@extends('admin.layouts.admin')

@section('content')
<section class="pc-container">
    <div class="pc-content">
        <div class="page-header">
            <div class="page-block">
                <div class="row align-items-center">
                    <div class="col-md-12">
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item" aria-current="page">
                                <a href="{{ route('admin.appointments') }}">Appointments</a>
                            </li>
                            <li class="breadcrumb-item" aria-current="page">{!! isset($id) ? 'Edit' : 'New' !!} </li>
                        </ul>
                    </div>
                    <div class="col-md-12">
                        <div class="page-header-title">
                            <h2 class="mb-0">Appointment</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row pt-0">
            <div class="col-md-12 col-xl-6">
                <div class="card">
                    <div class="card-body">
                        <div>
                            @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                    <li>
                                        {{ $error }}
                                    </li>
                                    @endforeach
                                </ul>
                            </div>
                            @endif
                        </div>
                        @if(isset($id))
                        <form action="{{ route('admin.update-appointment',$id) }}" method="post" class="form-data">
                            @else

                            <form action="{{ route('admin.store-appointment') }}" method="post" class="form-data">
                                @endif

                                @csrf

                                <div class="row">
                                    {{-- Category --}}
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="form-label">Category <span class="text-danger">*</span></label>
                                            @php $cat_id=0; @endphp
                                            @if(isset($appointment) && $appointment->service)
                                            @php $cat_id=$appointment->service->cat_id; @endphp
                                            @endif
                                            <select id="category-select" class="form-control">
                                                <option>---</option>

                                                @foreach ($categories as $x)
                                                    <option value="{{ $x->id }}" {!! ($x->id==$cat_id) ? 'selected' : '' !!}>{{ $x->name }}</option>
                                                @endforeach

                                            </select>
                                        </div>

                                        <input id="category-id" type="hidden" name="category_id" value="{{ $cat_id }}">
                                    </div>

                                    {{-- Service --}}
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="form-label">Service <span class="text-danger">*</span></label>
                                            @php $service_id=0; @endphp
                                            @if(isset($appointment))
                                            @php $service_id=$appointment->service_id; @endphp
                                            @endif
                                            <select id="service-select" class="form-control">
                                                <option selected disabled>---</option>
                                            </select>
                                        </div>

                                        <input id="service-id" type="hidden" name="service" value="{{ $service_id }}">
                                    </div>

                                    {{-- Staff --}}
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="form-label">Staff <span class="text-danger">*</span></label>
                                            @php $staff_id=0; @endphp
                                            @if(isset($appointment) && $appointment->booked_appointment)
                                            @php $staff_id=$appointment->booked_appointment->user_id; @endphp
                                            @endif
                                            <select id="staff-select" class="form-control">
                                                <option selected disabled>---</option>
                                            </select>
                                        </div>

                                        <input id="staff-id" type="hidden" name="staff" value="{{$staff_id}}">
                                    </div>

                                    {{-- Date --}}
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            @if(isset($appointment) && $appointment->date)
                                            @php $date = $appointment->date; @endphp
                                            @endif

                                            <label class="form-label" for="startDate">Date <span class="text-danger">*</span></label>
                                            <input required name="date" type="date" min="{{ date('Y-m-d') }}" class="form-control" value="{!! ($date!='') ? date('Y-m-d', strtotime($date)) : ''  !!}">
                                        </div>
                                    </div>

                                    {{-- Slots --}}
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label">Time <span class="text-danger">*</span></label>
                                            @php $slot_id=0; @endphp
                                            @if(isset($appointment) && $appointment->slot_id)
                                            @php $slot_id=$appointment->slot_id; @endphp
                                            @endif
                                            <select id="time-select" class="form-control">
                                                <option selected disabled>---</option>

                                                @foreach ($slots as $x)
                                                <option value="{{ $x->id }}" {!! ($slot_id==$x->id) ? 'selected' : '' !!}>{{ date('h:i A',strtotime($x->from_time)) }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <input id="slot-id" type="hidden" name="slot_id" value="{{$slot_id}}">
                                    </div>

                                    {{-- Customers --}}
                                    <div class="col-md-6">
                                        <div class="row form-group">
                                            <div class="col-10 pe-0">
                                                <label class="form-label">Customer <span class="text-danger">*</span></label>
                                                @php $user_id=0; @endphp
                                                @if(isset($appointment) && $appointment->user_id)
                                                @php $user_id=$appointment->user_id; @endphp
                                                @endif
                                                <select id="customer-select" class="form-control">
                                                    <option selected disabled>---</option>

                                                    @foreach ($users as $user)
                                                    <option value="{{ $user->id }}" {!! ($user_id==$user->id) ? 'selected' : '' !!}>{{ $user->first_name }} {{ $user->last_name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <input id="customer-id" type="hidden" name="customer_id" value="{{ $user_id }}">

                                            <div class="col-2 ps-0 position-relative ">
                                                <label class="form-label"> </label>
                                                <button id="add-customer-btn" class="btn btn-outline-success rounded-1 position-absolute bottom-0" type="button" onclick="addCustomer()">+</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label">Status</label>
                                            @php $status=''; @endphp
                                            @if(isset($appointment) && $appointment->status)
                                            @php $status=$appointment->status; @endphp
                                            @endif
                                            <select required id="status-select" class="form-control">
                                                <option>---</option>
                                                <option value="P" {!! ($status=='P' ) ? 'selected' : '' !!}>Pending</option>
                                                <option value="C" {!! ($status=='C' ) ? 'selected' : '' !!}>Cancelled</option>
                                                <option value="A" {!! ($status=='A' ) ? 'selected' : '' !!}>Approved</option>
                                                <option value="R" {!! ($status=='R' ) ? 'selected' : '' !!}>Rejected</option>
                                            </select>
                                        </div>

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

                                <div class="row">
                                    <div class="col-md-12">
                                        <input type="submit" value="Save" class="btn btn-primary m-t-20 m-b-20" data-bs-toggle="tooltip" data-bs-original-title="Save changes">
                                    </div>
                                </div>
                            </form>
                    </div>
                </div>
            </div>

            <div class="col-md-12 col-xl-6">
                <div id="new-customer-div" class="card d-none">
                    <div class="card-body pt-0 px-0 shadow">
                        <div class="bg-blue-500 pt-2 pb-1 mb-2">
                            <h5 class="text-center fw-normal text-white">New Customer</h5>
                        </div>
                        <div class="p-4">
                            <form id="customer-form" method="post" class="form-data">
                                @csrf

                                <div class="row">
                                    <div class="form-group col-md-6">
                                        <label class="form-label">First Name <span class="text-danger">*</span></label>
                                        <input required id="first-name-input" name="first_name" type="text" maxlength="100" class="form-control" placeholder="First Name" value="{{ old('first_name') }}">
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label class="form-label">Last Name <span class="text-danger">*</span></label>
                                        <input required name="last_name" type="text" maxlength="100" class="form-control" placeholder="last Name" value="{{ old('last_name') }}">
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label class="form-label">Email <span class="text-danger">*</span></label>
                                        <input required name="email" type="text" maxlength="50" class="form-control" placeholder="email" value="{{ old('email') }}">
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label class="form-label">Phone <span class="text-danger">*</span></label>
                                        <input required name="phone" type="text" maxlength="10" class="form-control" placeholder="phone" value="{{ old('phone') }}">
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <input type="submit" value="Save" class="btn btn-primary m-t-20 m-b-20" data-bs-toggle="tooltip" data-bs-original-title="Save changes">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</section>

<script>
    function addCustomer() {
        $('#customer-form').find('.form-control').val('');
        $('#new-customer-div').toggleClass('d-none');
        $('#first-name-input').focus();
    }

    $(document).ready(function() {

        selected_cat_id = $('#category-id').val();
        selected_service_id = $('#service-id').val();
        selected_staff_id = $('#staff-id').val();

        if (selected_cat_id > 0) {
            fetchServices(selected_cat_id);
        }

        if (selected_service_id > 0) {
            fetchStaff(selected_service_id);
        }

        $('#category-select, #service-select, #staff-select, #time-select, #customer-select').select2();

        function fetchServices(categoryId) {
            var url = "{{ route('admin.get-appointment-services', ['category' => 'arg1']) }}";
            url = url.replace('arg1', categoryId);

            $.ajax({
                type: 'POST',
                url: url,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    selected_service_id: selected_service_id
                },
                success: function(data) {
                    $('#service-select').html(data);
                }
            });
        }

        function fetchStaff(serviceId) {
            var url = "{{ route('admin.get-appointment-service-staff', ['service' => 'arg1']) }}";
            url = url.replace('arg1', serviceId);

            $.ajax({
                type: 'POST',
                url: url,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    selected_staff_id: selected_staff_id
                },
                success: function(data) {
                    $('#staff-select').html(data);
                }
            });
        }

        function fetchCustomers(selectLastFlag = false) {
            var url = "{{ route('admin.get-customers') }}";

            $.ajax({
                type: 'POST',
                url: url,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(data) {
                    $('#customer-select').html(data);

                    if (selectLastFlag == true) {
                        let lastOptionValue = $('#customer-select option:last').val();

                        $('#customer-select').val(lastOptionValue);
                        $('#customer-select').trigger('change');
                    }
                }
            });
        }

        $('#category-select').change(function() {
            let x = $(this).val();

            $('#category-id').val(x);

            fetchServices(x);
        });

        $('#service-select').change(function() {
            let x = $(this).val();

            $('#service-id').val(x);

            fetchStaff(x);
        });

        $('#staff-select').change(function() {
            let x = $(this).val();

            $('#staff-id').val(x);
        });

        $('#time-select').change(function() {
            let x = $(this).val();

            $('#slot-id').val(x);
        });

        $('#customer-select').change(function() {
            let x = $(this).val();

            $('#customer-id').val(x);
        });

        $('#status-select').change(function() {
            let x = $(this).val();

            $('#status-id').val(x);
        });

        $('#customer-form').submit(function(e) {
            e.preventDefault();
            var formData = $(this).serialize();

            $.ajax({
                url: "{{ route('admin.save-customer') }}",
                type: 'POST',
                data: formData,
                success: function(response) {
                    $('#new-customer-div').addClass('d-none');

                    fetchCustomers(true);
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        });
    })
</script>
@endsection