@extends('layouts.app')
@section('content')
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <!--begin::Content wrapper-->
        <div class="d-flex flex-column flex-column-fluid">
            <!--begin::Toolbar-->
            <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
                <!-- Toolbar content -->
            </div>
            <!--end::Toolbar-->
            <!--begin::Content-->
            <div id="kt_app_content" class="app-content flex-column-fluid">
                <div id="kt_app_content_container" class="app-container container-xxl">
                    <form id="kt_update_provider_form" class="form d-flex flex-column flex-lg-row"
                        data-action="{{ route('provider.update-data', ['uuid' => $provider->uuid]) }}">
                        @csrf
                        <input type="hidden" name="latitude" id="lat" value="{{ $provider->address->latitude }}">
                        <input type="hidden" name="longitude" id="lng" value="{{ $provider->address->longitude }}">
                        <div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10">
                            <div class="tab-content">
                                <div class="tab-pane fade show active" role="tab-panel">
                                    <div class="d-flex flex-column gap-7 gap-lg-10">
                                        <div class="card card-flush py-4">
                                            <div class="card-body pt-0">
                                                <h3 class="mb-4">Provider Information</h3>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="row">
                                                            <div class="col-md-12 fv-row">
                                                                <label class="required form-label">Provider / Company
                                                                    Name</label>
                                                                <input type="text" name="company_name"
                                                                    class="form-control mb-2"
                                                                    placeholder="Enter Name or Company Name"
                                                                    value="{{ old('company_name', $provider->name) }}"
                                                                    required>
                                                            </div>
                                                        </div>
                                                        <br>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="row">
                                                            <div class="col-md-12 fv-row">
                                                                <label class="required form-label">A.B.N No.</label>
                                                                <input type="text" name="abn_no"
                                                                    class="form-control mb-2"
                                                                    placeholder="Enter Australian Business Number"
                                                                    value="{{ old('abn_no', $provider->abn_no) }}" required>
                                                            </div>
                                                        </div>
                                                        <br>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6 fv-row">
                                                        <label class="required fs-6 fw-semibold mb-2">Email</label>
                                                        <input type="email" name="email" class="form-control mb-2"
                                                            placeholder="Enter Email Id"
                                                            value="{{ old('email', $provider->email) }}" required>
                                                    </div>
                                                    <div class="col-md-6 fv-row">
                                                        <label class="required fs-6 fw-semibold mb-2">Phone</label>
                                                        <input type="text" name="phone" class="form-control mb-2"
                                                            placeholder="Enter phone No." maxlength="10"
                                                            value="{{ old('phone', $provider->phone) }}"
                                                            oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');"
                                                            required>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="row">
                                                            <div class="col-md-12 fv-row">
                                                                <label class="required fs-6 fw-semibold mb-2">Enter full
                                                                    address</label>
                                                                <textarea rows="3" type="text" name="address" id="address" class="form-control mb-2 address"
                                                                    placeholder="Enter address" required>{{ old('address', $provider->address->full_address) }}</textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 fv-row">
                                                        <label class="required form-label">Status</label>
                                                        <select name="status" class="form-control mb-2" required>
                                                            <option value="1"
                                                                {{ $provider->status == 1 ? 'selected' : '' }}>Active
                                                            </option>
                                                            <option value="0"
                                                                {{ $provider->status == 0 ? 'selected' : '' }}>Inactive
                                                            </option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <br>

                                                <!-- Services Section -->
                                                <h3 class="mb-4">Services</h3>
                                                <div class="row">
                                                    <div class="col-md-12 fv-row">
                                                        <label class="required fs-6 fw-semibold mb-2">Services</label>
                                                    </div>
                                                </div>
                                                @foreach ($services as $service)
                                                    <div class="row mb-3">
                                                        <div class="col-3">
                                                            <div class="form-check">
                                                                <input class="form-check-input service-checkbox"
                                                                    type="checkbox" name="services[]"
                                                                    value="{{ $service->id }}"
                                                                    id="service_{{ $service->id }}"
                                                                    {{ $service_ids->contains($service->id) ? 'checked' : '' }}>
                                                                <label class="form-check-label"
                                                                    for="service_{{ $service->id }}">
                                                                    {{ $service->name }}
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class="col-9">
                                                            <div id="subservices-section">
                                                                <div class="subservices"
                                                                    id="subservices_{{ $service->id }}"
                                                                    style="display: block; margin-left: 20px;">
                                                                    <div class="d-flex flex-wrap">
                                                                        @foreach ($service->subServices as $subService)
                                                                            <div class="form-check me-3">
                                                                                <input class="form-check-input"
                                                                                    type="checkbox"
                                                                                    name="subservices[{{ $service->id }}][]"
                                                                                    value="{{ $subService->id }}"
                                                                                    id="subservice_{{ $subService->id }}"
                                                                                    {{ $provider->services->contains('sub_service_id', $subService->id) ? 'checked' : '' }}>
                                                                                <label class="form-check-label"
                                                                                    for="subservice_{{ $subService->id }}">
                                                                                    {{ $subService->name }}
                                                                                </label>
                                                                            </div>
                                                                        @endforeach
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach

                                                <!-- Availability Section -->
                                                <h3 class="mb-4">Availability</h3>
                                                <div id="availability-section" class="col-md-12 row">
                                                    @foreach ($days as $day)
                                                        <div class="col-md-12 mb-3">
                                                            <label
                                                                class="fs-6 fw-semibold mb-2">{{ $day->days }}</label>
                                                            <div class="time-slots">
                                                                @php
                                                                    $availability = $provider->availabilities
                                                                        ->where('week_day_id', $day->id)
                                                                        ->first();
                                                                @endphp
                                                                @if ($availability)
                                                                    @foreach ($availability->times as $k => $time)
                                                                        <div class="input-group mb-2">
                                                                            <input type="text"
                                                                                name="availability[{{ $day->id }}][start_time][]"
                                                                                class="form-control timepicker"
                                                                                placeholder="Start Time"
                                                                                value="{{ old('availability.' . $day->id . '.start_time.0', $time->from ?? '') }}">
                                                                            <span class="input-group-text">-</span>
                                                                            <input type="text"
                                                                                name="availability[{{ $day->id }}][end_time][]"
                                                                                class="form-control timepicker"
                                                                                placeholder="End Time"
                                                                                value="{{ old('availability.' . $day->id . '.end_time.0', $time->to ?? '') }}">
                                                                            @if ($k > 0)
                                                                                <button type="button"
                                                                                    class="btn btn-danger remove-time-slot">×</button>
                                                                            @else
                                                                                <button type="button"
                                                                                    class="btn btn-success add-time-slot"
                                                                                    {{ $k > 0 ? 'disabled' : '' }}>+</button>
                                                                            @endif
                                                                        </div>
                                                                    @endforeach
                                                                @else
                                                                    <div class="input-group mb-2">
                                                                        <input type="text"
                                                                            name="availability[{{ $day->id }}][start_time][]"
                                                                            class="form-control timepicker"
                                                                            placeholder="Start Time">
                                                                        <span class="input-group-text">-</span>
                                                                        <input type="text"
                                                                            name="availability[{{ $day->id }}][end_time][]"
                                                                            class="form-control timepicker"
                                                                            placeholder="End Time">
                                                                        <button type="button"
                                                                            class="btn btn-success add-time-slot">+</button>
                                                                    </div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>

                                                <!-- Insurance Section -->
                                                <h3 class="mb-4">Insurance Information</h3>
                                                <div class="row">
                                                    <div class="col-md-5">
                                                        <div class="row">
                                                            <div class="col-md-12 fv-row">
                                                                <label class="form-label">Insurance Company Name</label>
                                                                <input type="text" name="ins_company_name"
                                                                    class="form-control mb-2"
                                                                    placeholder="Enter Insurance Company Name"
                                                                    value="{{ old('ins_company_name', $provider->insurance->insurance_company_name ?? '') }}">
                                                            </div>
                                                        </div>
                                                        <br>
                                                    </div>
                                                    <div class="col-md-5">
                                                        <div class="row">
                                                            <div class="col-md-12 fv-row">
                                                                <label class="form-label">Policy No.</label>
                                                                <input type="text" name="policy_no"
                                                                    class="form-control mb-2"
                                                                    placeholder="Enter Insurance Policy No."
                                                                    value="{{ old('policy_no', $provider->insurance->policy_no ?? '') }}">
                                                            </div>
                                                        </div>
                                                        <br>
                                                    </div>
                                                    <div class="fv-row col-md-2">
                                                        <!--begin::Label-->
                                                        <label class="d-block fw-semibold fs-6 mb-5">
                                                            <span class="">Policy Copy</span>
                                                            <i class="fas fa-exclamation-circle ms-2 fs-7"
                                                                data-bs-toggle="tooltip" title="Select a user image."></i>
                                                        </label>
                                                        <!--end::Label-->
                                                        <!--begin::Image input placeholder-->
                                                        <style>
                                                            .image-input-placeholder {
                                                                background-image: url('{{ asset('assets/media/svg/files/blank-image.svg') }}');
                                                            }

                                                            [data-bs-theme="dark"] .image-input-placeholder {
                                                                background-image: url('assets/media/svg/files/blank-image-dark.svg');
                                                            }
                                                        </style>
                                                        <!--end::Image input placeholder-->
                                                        <!--begin::Image input-->
                                                        <div class="image-input image-input-empty image-input-outline {{ isset($provider->insurance->policy_copy) ? 'image-input-filled' : 'image-input-placeholder' }}"
                                                            data-kt-image-input="true">
                                                            <!--begin::Preview existing avatar-->
                                                            <div class="image-input-wrapper w-125px h-125px"
                                                                style="background-image: url('{{ isset($provider->insurance->policy_copy) ? asset('/storage/insurance_policies/' . $provider->insurance->policy_copy) : '' }}');">
                                                            </div>
                                                            <!--end::Preview existing avatar-->
                                                            <!--begin::Label-->
                                                            <label
                                                                class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                                                data-kt-image-input-action="change"
                                                                data-bs-toggle="tooltip" title="Add image">
                                                                <i class="bi bi-pencil-fill fs-7"></i>
                                                                <!--begin::Inputs-->
                                                                <input type="file" name="policy_copy"
                                                                    accept=".png, .jpg, .jpeg" id="my_prof_image" />
                                                                <input type="hidden" name="avatar_remove" />
                                                                <!--end::Inputs-->
                                                            </label>
                                                            <!--end::Label-->
                                                            <!--begin::Cancel-->
                                                            <span
                                                                class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                                                data-kt-image-input-action="cancel"
                                                                data-bs-toggle="tooltip" title="Cancel image">
                                                                <i class="bi bi-x fs-2"></i>
                                                            </span>
                                                            <!--end::Cancel-->
                                                            <!--begin::Remove-->
                                                            <span
                                                                class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                                                data-kt-image-input-action="remove"
                                                                data-bs-toggle="tooltip" title="Remove logo">
                                                                <i class="bi bi-x fs-2"></i>
                                                            </span>
                                                            <!--end::Remove-->
                                                        </div>
                                                        <!--end::Image input-->
                                                        <!--begin::Hint-->
                                                        <div class="form-text" style="font-size: 10px;">Allowed file
                                                            types: png, jpg, jpeg.</div>
                                                        <!--end::Hint-->
                                                    </div>
                                                </div>

                                                <!-- Bank Details Section -->
                                                <h3 class="mb-4">Bank Details</h3>
                                                <div class="row">
                                                    <div class="col-md-6 fv-row">
                                                        <label class="required form-label">Bank Name </label>
                                                        <input type="text" name="bank_name" class="form-control mb-2"
                                                            placeholder="Bank Name"
                                                            value="{{ old('bank_name', $provider->account->bank_name ?? '') }}"
                                                            required>
                                                    </div>
                                                    <div class="col-md-6 fv-row">
                                                        <label class="required form-label">Account Holder Name </label>
                                                        <input type="text" name="account_holder_name"
                                                            class="form-control mb-2" placeholder="Name"
                                                            value="{{ old('account_holder_name', $provider->account->account_holder_name ?? '') }}"
                                                            required>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6 fv-row">
                                                        <label class="required form-label">Account No. </label>
                                                        <input type="text" name="account_no" class="form-control mb-2"
                                                            placeholder="Bank Account No."
                                                            value="{{ old('account_no', $provider->account->acc_no ?? '') }}"
                                                            required>
                                                    </div>
                                                    <div class="col-md-6 fv-row">
                                                        <label class="required form-label">BSB Code </label>
                                                        <input type="text" name="bsb_code" class="form-control mb-2"
                                                            placeholder="Enter BSB Code"
                                                            value="{{ old('bsb_code', $provider->account->bsb_code ?? '') }}"
                                                            required>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <div class="d-flex justify-content-end">
                                <a href="{{ route('provider.list') }}" id="kt_edit_provider_cancel"
                                    class="btn btn-light me-5">Cancel</a>
                                <button type="submit" id="kt_update_provider_submit" class="btn btn-primary">
                                    <span class="indicator-label">Save Changes</span>
                                    <span class="indicator-progress">Please wait...
                                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        // Convert the PHP collection to a JavaScript object
        const weekDays = {};
        @foreach ($days as $day)
            weekDays['{{ $day->days }}'] = {{ $day->id }};
        @endforeach
    </script>
    <script>
        $(document).ready(function() {
            // Initialize timepicker for existing inputs
            $('.timepicker').flatpickr({
                enableTime: true,
                noCalendar: true,
                dateFormat: "H:i",
                time_24hr: true
            });

            // Add time slot
            // Add time slot
            $('.add-time-slot').on('click', function() {
                // Get the closest time-slots div
                const timeSlotsDiv = $(this).closest('.time-slots');
                const dayLabel = $(this).closest('.mb-3').find('label').text().trim(); // Get the day name

                const dayId = weekDays[dayLabel]; // Get the corresponding day ID from the dynamic mapping

                // Create new time slot HTML using the day ID
                const timeSlotHtml = `
    <div class="input-group mb-2">
        <input type="text" name="availability[${dayId}][start_time][]" class="form-control timepicker" placeholder="Start Time">
        <span class="input-group-text">-</span>
        <input type="text" name="availability[${dayId}][end_time][]" class="form-control timepicker" placeholder="End Time">
        <button type="button" class="btn btn-danger remove-time-slot">×</button>
    </div>`;

                // Append the new time slot HTML to the time-slots div
                timeSlotsDiv.append(timeSlotHtml);
                $('.timepicker').flatpickr({
                    enableTime: true,
                    noCalendar: true,
                    dateFormat: "H:i",
                    time_24hr: true
                });
            });

            // Remove time slot
            $(document).on('click', '.remove-time-slot', function() {
                $(this).closest('.input-group').remove();
            });

            // Handle service checkbox change
            $('.service-checkbox').on('change', function() {
                const serviceId = $(this).attr('id').split('_')[1]; // Get the service ID
                const subservicesDiv = $('#subservices_' + serviceId);

                if ($(this).is(':checked')) {
                    // Show subservices if the service is checked
                    subservicesDiv.show();
                } else {
                    // Hide and uncheck all subservices if the service is unchecked
                    subservicesDiv.hide();
                    subservicesDiv.find('input[type="checkbox"]').prop('checked', false);
                }
            });
        });
    </script>
    <script src="{{ asset('assets/js/provider/update.js') }}"></script>
    <script src="{{ asset('assets/js/google_location.js') }}"></script>
@endpush