@extends('layouts.guest')

@section('content')
<style>
    body {
        font-family: 'Roboto', sans-serif;
    }
    .invalid-feedback {
        font-family: 'Roboto', sans-serif;
        display: block !important;
    }
    .c_separator {
        width: 100%;
        margin: 25px 0px 15px 0px;
        border-top: 1px solid #d3d3d3;
        margin-top: 3rem;
    }

    #request_offer .form-control {
        font-family: 'Roboto', sans-serif;
        padding-top: 0;
        padding-bottom: 0;
        height: 32px;
        background-color: #f4f4f4 !important;
        font-size: 16px !important;
        color: #000000 !important;
        border-width: 1px 1px 1px 1px;
        border-color: #bfbfbf;
        border-radius: 0px !important;
    }

    #request_offer h4 {
        font-family: 'Roboto', sans-serif;
        font-weight: 600;
        font-size: 18px;
        line-height: 1.3;
        color: #333333;
    }

    #request_offer h6 {
        font-weight: 600;
        font-size: 14px;
        line-height: 1.3;
        color: #333333;
    }
    
    #request_offer .btn-primary {
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        font-style: normal;
        letter-spacing: 0px;
        border-width: 2px;
        border-style: solid;
        border-radius: 4px;
        text-transform: none;
        transition: all .2s;
        background: #ffffff;
        color: #ffa500;
        border-color: #ffa500;
    }

    #request_offer .btn-primary:hover {
        background: #ffa500;
        color: #ffffff;
        border-color: #f6a500;;
    }

    #request_offer a {
        font-size: 14px;
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
        letter-spacing: 0px;
        font-style: normal;
        color: #d18600;
        text-decoration: none;
        transition-property: color,background-color,border-color;
        transition-duration: .2s;
        transition-timing-function: linear;
    }

    #request_offer a:hover {
        color: #ffb600;
    }
</style>
<form method="POST" id="request_offer" action="{{ route('guests.request_offer') }}" enctype="multipart/form-data">
    @csrf
    {{-- client --}}
    <div class="container-fluid">

        <h4 class="mb-3">{!! __('Adatok:') !!}</h4>
            
        <div class="row">
            <div class="col-sm-6 client_data mb-3">
                {{-- <label for="last_name" class="form-label">{!! __('Vezetéknév') !!}</label> --}}
                <input type="text" class="form-control jquery-text-capitalize" name="last_name" placeholder="{!! __('Vezetéknév *') !!}" required value="{{ old('last_name') ?? $client->last_name ?? '' }}">
                @error('last_name')
                    <span class="invalid-feedback" role="alert">
                        <strong>{!! $message !!}</strong>
                    </span>
                @enderror
            </div>

            <div class="col-sm-6 client_data mb-3">
                {{-- <label for="first_name" class="form-label">{!! __('Keresztnév') !!}</label> --}}
                <input type="text" class="form-control first_name jquery-text-capitalize" name="first_name" placeholder="{!! __('Keresztnév *') !!}" required value="{{ old('first_name') ?? $client->first_name ?? '' }}">
                @error('first_name')
                    <span class="invalid-feedback" role="alert">
                        <strong>{!! $message !!}</strong>
                    </span>
                @enderror
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6 client_data mb-3">
                {{-- <label for="email" class="form-label">{!! __('E-mail') !!}</label> --}}
                <input type="text" class="form-control" name="email" placeholder="{!! __('E-mail *') !!}" required value="{{ old('email') ?? '' }}">
                @error('email')
                    <span class="invalid-feedback" role="alert">
                        <strong>{!! $message !!}</strong>
                    </span>
                @enderror
            </div>

            <div class="col-sm-6 client_data mb-3">
                {{-- <label for="phone" class="form-label">{!! __('Telefonszám') !!}</label> --}}
                <input type="text" class="form-control" name="phone" placeholder="{!! __('Telefonszám *') !!}" required value="{{ old('phone') ?? '' }}">
                @error('phone')
                    <span class="invalid-feedback" role="alert">
                        <strong>{!! $message !!}</strong>
                    </span>
                @enderror
            </div>
        </div>

        {{-- address --}}
        <h6 class="mt-5 mb-3">{!! __('Beruházási/Szállítási cím:') !!}</h6>
        <div class="">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12 col-md-4 mb-3 m-0 p-0 pe-md-3">
                        <div class="form-group">
                            {{-- <label for="zip_code">{!! __('Irányítószám') !!}</label> --}}
                            <input id="zip_code" type="number" class="form-control @error('zip_code') is-invalid @enderror" name="address[0][zip_code]" placeholder="{!! __('Irányítószám') !!}" value="{{ old('zip_code') ?? '' }}" autocomplete="zip_code">
                            @error('zip_code')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{!! $message !!}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-12 col-md-4 mb-3 m-0 p-0">
                        <div class="form-group">
                            {{-- <label for="city">{!! __('Település') !!}</label> --}}
                            <input id="city" type="text" class="form-control jquery-text-capitalize @error('city') is-invalid @enderror" name="address[0][city]" placeholder="{!! __('Település *') !!}" required value="{{ old('city') ?? '' }}" autocomplete="city">
                            @error('city')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{!! $message !!}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-12 col-md-4 mb-3 m-0 p-0 ps-md-3">
                        <div class="form-group">
                            {{-- <label for="street_name">{!! __('Közterület neve') !!}</label> --}}
                            <input id="street_name" type="text" class="form-control jquery-text-capitalize @error('street_name') is-invalid @enderror" name="address[0][street_name]" placeholder="{!! __('Közterület neve') !!}" value="{{ isset($data['street_name']) ? $data['street_name'] : old('street_name') }}" {{ $required ?? '' }} autocomplete="street_name">
                            @error('street_name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{!! $message !!}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-md-3 mb-3 m-0 p-0 pe-md-3">
                        <div class="form-group">
                            {{-- <label for="street_suffix">{!! __('Közterület jellege') !!}</label> --}}
                            <input id="street_suffix" type="text" class="form-control @error('street_suffix') is-invalid @enderror" name="address[0][street_suffix]" placeholder="{!! __('Közterület jellege') !!}" value="{{ isset($data['street_suffix']) ? $data['street_suffix'] : old('street_suffix') }}" {{ $required ?? '' }} autocomplete="street_suffix">
                            @error('street_suffix')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{!! $message !!}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-12 col-md-3 mb-3 m-0 p-0 pe-md-3">
                        <div class="form-group">
                            {{-- <label for="house_number">{!! __('Házszám') !!}</label> --}}
                            <input id="house_number" type="text" class="form-control @error('house_number') is-invalid @enderror" name="address[0][house_number]" placeholder="{!! __('Házszám') !!}" value="{{ isset($data['house_number']) ? $data['house_number'] : old('house_number') }}" {{ $required ?? '' }} autocomplete="house_number">
                            @error('house_number')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{!! $message !!}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-12 col-md-3 mb-3 m-0 p-0 pe-md-3">
                        <div class="form-group">
                            {{-- <label for="floor">{!! __('Emelet') !!}</label> --}}
                            <input id="floor" type="text" class="form-control @error('floor') is-invalid @enderror" name="address[0][floor]" placeholder="{!! __('Emelet') !!}" value="{{ isset($data['floor']) ? $data['floor'] : old('floor') }}" {{ $required ?? '' }} autocomplete="floor">
                            @error('floor')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{!! $message !!}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-12 col-md-3 mb-3 m-0 p-0">
                        <div class="form-group">
                            {{-- <label for="door_number">{!! __('Ajtó') !!}</label> --}}
                            <input id="door_number" type="text" class="form-control @error('door_number') is-invalid @enderror" name="address[0][door_number]" placeholder="{!! __('Ajtó') !!}" value="{{ isset($data['door_number']) ? $data['door_number'] : old('door_number') }}" {{ $required ?? '' }} autocomplete="door_number">
                            @error('door_number')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{!! $message !!}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>
                </div>
            
            </div>
        </div>

        <div class="c_separator"></div>

        {{-- Leírás --}}
        <h4 class="my-3">{!! __('Üzenet: *') !!}</h4>
        <div class="form-group mb-3">
            {{-- <label for="message">{!! __('Leírás *') !!}</label> --}}
            <textarea id="description" name="description" required cols="30" rows="10" style="height: 150px;" class="ckeditor form-control @error('description') is-invalid @enderror">{{ isset($description) ? $description : old('description') }}</textarea>
            @error('description')
                <span class="invalid-feedback" role="alert">
                    <strong>{!! $message !!}</strong>
                </span>
            @enderror
        </div>

        <div class="c_separator"></div>

        {{-- Fájl --}}
        <div class="row my-3">

            <div class="col-12 col-md-4">
                <h4>{!! __('Dokumentum csatolás:') !!}</h4>
            </div>
            
            <div class="col-12 col-md-4">
                <div class="form-group">
                    {{-- <label for="file">{!! __('Fájl') !!}</label> --}}
                    <input type="file" class="form-control" id="file" name="file[]" style="height: auto !important" multiple accept=".jpg, .jpeg, .png, .gif, .tif, .pdf, .doc, .docx, .ppt, .pptx, .odt, .xls, .xlsx" max="15360"/>
                </div>
            </div>

            <div class="col-12 col-md-4">
                Fájl típusok: .jpg .jpeg .png .gif .tif .pdf .doc .docx .ppt .pptx .odt .xls .xlsx | Méret limit: 15Mb
            </div>

        </div>
        <div class="row">
            <div class="col-12 col-md-4">
                <div class="mb-3">
                    <a href="https://www.sikerablak.hu/adatvedelmi-tajekoztato/" target="_blank">
                        <strong>Adatvédelmi nyilatkozat *</strong>
                    </a>
                </div>
                <div class="form-check mb-3">
                    <input class="form-check-input" type="checkbox" value="1" name="privacy" id="privacy" required>
                    <label class="form-check-label" for="privacy">
                        {!! __('Elolvastam és elfogadom!') !!}
                    </label>
                </div>
            </div>
            <div class="col-12 col-md-4 mb-3">
                {!! __('* A csillaggal jelölt mezők kitöltése kötelező!') !!}
            </div>
            <div class="col-12 col-md-4 mb-3">
                <button type="submit" class="btn btn-primary">{!! __('Küldés') !!}</button>
            </div>
        </div>
    </div>

</form>
{{-- sikeres ajánlatkérés üzenet --}}
@if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif
@push('scripts')
<script>

$(function() {
    // $('[name="phone"]').each(function(){
    //     var phone = $(this).val();

    //     var cleave = new Cleave('[name="phone"]', { delimiters: [' ', ' '], blocks: [3, 2, 3, 10], numericOnly: false,});
        
    //     cleave.setRawValue(phone);
    // });

    $('[name="phone"]').each(function(){
        var input = this;

        var cleave = new Cleave(input, {
            delimiters: [' ', ' '],
            blocks: [3, 2, 3, 10],
            numericOnly: false,
        });

        $(input).on('input', function() {
            var phone = $(input).val();
            
            if (phone.startsWith('06')) {
                phone = '+36' + phone.substr(2);
            }

            cleave.setRawValue(phone);
        });
    });
});
</script>
@endpush

@endsection