@extends('layouts.app')

@section('content')
    <!-- Include Bootstrap DateTimePicker CDN -->
    <script src=
                "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">
    </script>
    <script type="text/javascript" src=
        "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js">
    </script>
    <link
        href=
            "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css"
        rel="stylesheet">

    <script src=
                "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js">
    </script>
    <div class="content-wrapper">
        <div class="row">
            <div class="col-sm-12">
                <x-form id="save-reservation-data-form">
                    <div class="add-client bg-white rounded">
                        <h4 class="mb-0 p-20 f-21 font-weight-normal text-capitalize border-bottom-grey">
                            @lang('app.menu.reservationDetails')</h4>
                        <div class="row p-20">
                            <div class="col-lg-12">
                                <div class="row">
                                    <div class="col-md-6">
                                        <x-forms.text fieldId="name" :fieldLabel="__('app.name')" fieldName="name" :fieldValue="$user->client_name" fieldRequired="true">
                                        </x-forms.text>
                                    </div>
                                    <div class="col-md-6">
                                        <x-forms.text fieldId="phone_number" :fieldLabel="__('app.phone_number')" fieldName="phone_number" :fieldValue="$user->mobile_number" fieldRequired="true">
                                        </x-forms.text>
                                    </div>
                                    <div class="col-md-6">
                                        <x-forms.label class="mt-3" fieldId="service" :fieldLabel="__('app.service')"
                                                       fieldName="service" fieldRequired="true">
                                        </x-forms.label>
                                        <x-forms.input-group>
                                            <select class="form-control select-picker" name="service" id="service"
                                                    data-live-search="true" required>
                                                <option value="">--</option>
                                                @if(app()->getLocale() === 'ar')
                                                    @foreach ($services as $service)
                                                        <option value="{{ $service->id }}">
                                                            {{ $service->ar_title }}
                                                        </option>
                                                    @endforeach
                                                @else
                                                    @foreach ($services as $service)
                                                        <option value="{{ $service->id }}">
                                                            {{ $service->en_title }}
                                                        </option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </x-forms.input-group>
                                    </div>
                                    <div class="col-md-6">
                                        <x-forms.label class="mt-3" fieldId="doctor" :fieldLabel="__('app.doctor_name')"
                                                       fieldName="doctor" fieldRequired="true">
                                        </x-forms.label>
                                        <x-forms.input-group>
                                            <select class="form-control select-picker" name="doctor" id="doctor"
                                                    data-live-search="true" required>
                                                <option value="">--</option>
                                                @if(app()->getLocale() === 'ar')
                                                    @foreach ($doctors as $doctor)
                                                        <option value="{{ $doctor->id }}">
                                                            {{ $doctor->name_ar }}
                                                        </option>
                                                    @endforeach
                                                @else
                                                    @foreach ($doctors as $doctor)
                                                        <option value="{{ $doctor->id }}">
                                                            {{ $doctor->name_en }}
                                                        </option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </x-forms.input-group>
                                    </div>
                                    <div class="col-md-6">
                                        <x-forms.datepicker fieldId="date" :fieldLabel="__('app.menu.date')"
                                                            fieldName="date" fieldRequired="true" :fieldPlaceholder="__('')"/>
                                    </div>
                                    <div class="col-md-6">

                                        <x-forms.text fieldId="reservation_time" :fieldLabel="__('modules.lead.reservation_time')"
                                                      fieldName="reservation_time" fieldRequired="true">
                                        </x-forms.text>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group my-3">
                                            <x-forms.label fieldId="follow_up_method" :fieldLabel="__('app.follow_up_method')">
                                            </x-forms.label>
                                            <div class="d-flex">
                                                <x-forms.radio fieldId="mobile" :fieldLabel="__('app.call')" fieldName="follow_up_method"
                                                               fieldValue="mobile" checked="true">
                                                </x-forms.radio>
                                                <x-forms.radio fieldId="whatsapp" :fieldLabel="__('app.whatsapp')" fieldValue="whatsapp" fieldName="follow_up_method"></x-forms.radio>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <x-forms.text fieldId="description" :fieldLabel="__('app.description')" fieldName="description">
                                        </x-forms.text>
                                    </div>

                                    <div class="col-md-12">
                                        <x-forms.file class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('modules.projects.uploadFile')" fieldName="file" fieldId="file"/>
                                    </div>

                                </div>
                            </div>
                            <input type="hidden" value="{{$user_type}}" name="user_type">
                            <input type="hidden" value="{{$user->id}}" name="user_id">
                        </div>

                        <x-form-actions>
                            <x-forms.button-primary id="save-reservation-form" class="mr-3" icon="check">@lang('app.save')
                            </x-forms.button-primary>
                            @if($user_type == 'lead')
                            <x-forms.button-cancel :link="route('leads.index')" class="border-0">@lang('app.cancel')
                            </x-forms.button-cancel>
                            @elseif($user_type == 'client')
                                    <x-forms.button-cancel :link="route('clients.index')" class="border-0">@lang('app.cancel')
                                    </x-forms.button-cancel>
                            @else
                                <x-forms.button-cancel :link="route('reservations.index')" class="border-0">@lang('app.cancel')
                                </x-forms.button-cancel>
                            @endif
                        </x-form-actions>

                    </div>
                </x-form>

            </div>
        </div>
    </div>



    <script>
        $(document).ready(function() {
            datepicker('#date', {
                position: 'bl',
                ...datepickerConfig
            });

            $('#reservation_time').datetimepicker({
                format: 'hh:mm A'
            });

            $('#add-file').click(function () {
                $('.upload-section').removeClass('d-none');
                $('#add-file').addClass('d-none');
                window.scrollTo(0, document.body.scrollHeight);
            });

            $('#save-reservation-form').click(function() {

                const url = "{{ route('reservations.store') }}";

                $.easyAjax({
                    url: url,
                    container: '#save-reservation-data-form',
                    type: "POST",
                    disableButton: true,
                    blockUI: true,
                    buttonSelector: "#save-reservation-form",
                    data: $('#save-reservation-data-form').serialize(),
                    file: true,
                    success: function(response) {
                        window.location.href = response.redirectUrl;
                    }
                });
            });

            init(RIGHT_MODAL);
        });
    </script>
@endsection