@extends('layouts.app')
@push('style')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@endpush
@section('content')
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <div class="d-flex flex-column flex-column-fluid">
            <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
                <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                        <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                            Add Provider Form</h1>
                        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                            <li class="breadcrumb-item text-muted">
                                <a href="{{ route('dashboard') }}" class="text-muted text-hover-primary">Home</a>
                            </li>
                            <li class="breadcrumb-item">
                                <span class="bullet bg-gray-400 w-5px h-2px"></span>
                            </li>
                            <li class="breadcrumb-item text-muted">Providers</li>
                            <li class="breadcrumb-item">
                                <span class="bullet bg-gray-400 w-5px h-2px"></span>
                            </li>
                            <li class="breadcrumb-item text-muted">Add Provider</li>
                        </ul>
                    </div>
                </div>
            </div>
            <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_add_provider_form" class="form d-flex flex-column flex-lg-row"
                        data-action="{{ route('provider.store-data') }}">
                        @csrf
                        <input type="hidden" name="latitude" id="lat">
                        <input type="hidden" name="longitude" id="lng">
                        <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">
                                                <!-- Provider Information Section -->
                                                <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" 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" 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" 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"
                                                            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"></textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 fv-row">
                                                        <!--begin::Label-->
                                                        <label class="required form-label">Status</label>
                                                        <!--end::Label-->
                                                        <!--begin::Input-->
                                                        <select name="status" class="form-control mb-2">
                                                            <option value="1">Active</option>
                                                            <option value="0">Inactive</option>
                                                        </select>
                                                        <!--end::Input-->
                                                    </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 }}">
                                                                <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: none; 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 }}">
                                                                                <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">
                                                                <div class="input-group mb-2">
                                                                    <input type="text"
                                                                        name="availability[{{ $day->id }}][start_time][]"
                                                                        class="form-control timepicker"
                                                                        placeholder="Start Time" required>
                                                                    <span class="input-group-text">-</span>
                                                                    <input type="text"
                                                                        name="availability[{{ $day->id }}][end_time][]"
                                                                        class="form-control timepicker"
                                                                        placeholder="End Time" required>
                                                                    <button type="button"
                                                                        class="btn btn-success add-time-slot">+</button>
                                                                </div>
                                                            </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">
                                                            </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.">
                                                            </div>
                                                        </div>
                                                        <br>
                                                    </div>
                                                    <div class="col-md-2 fv-row">
                                                        <label class="d-block fw-semibold fs-6 mb-5">
                                                            <span>Policy Copy</span>
                                                            <i class="fas fa-exclamation-circle ms-2 fs-7"
                                                                data-bs-toggle="tooltip" aria-label="Select a user image."
                                                                data-bs-original-title="Select a user image."
                                                                data-kt-initialized="1"></i>
                                                        </label>
                                                        <div class="image-input image-input-empty image-input-outline image-input-placeholder mb-3"
                                                            data-kt-image-input="true">
                                                            <div class="image-input-wrapper w-150px h-150px"
                                                                style="background-image: url('{{ asset('assets/media/svg/files/blank-image.svg') }}');">
                                                            </div>
                                                            <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"
                                                                aria-label="Change avatar"
                                                                data-bs-original-title="Change avatar"
                                                                data-kt-initialized="1">
                                                                <i class="bi bi-pencil-fill fs-7"></i>
                                                                <input type="file" name="policy_copy"
                                                                    accept=".png, .jpg, .jpeg">
                                                                <input type="hidden" name="avatar_remove">
                                                            </label>
                                                            <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"
                                                                aria-label="Cancel avatar"
                                                                data-bs-original-title="Cancel avatar"
                                                                data-kt-initialized="1">
                                                                <i class="bi bi-x fs-2"></i>
                                                            </span>
                                                            <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"
                                                                aria-label="Remove avatar"
                                                                data-bs-original-title="Remove avatar"
                                                                data-kt-initialized="1">
                                                                <i class="bi bi-x fs-2"></i>
                                                            </span>
                                                        </div>
                                                        <div class="form-text" style="font-size: 10px;">Allowed file types: png, jpg, jpeg.</div>
                                                    </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" 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" 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." 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" required>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <div class="d-flex justify-content-end">
                                <a href="{{ route('provider.list') }}" id="kt_add_provider_cancel"
                                    class="btn btn-light me-5">Cancel</a>
                                <button type="submit" id="kt_add_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 src="https://cdn.jsdelivr.net/npm/flatpickr"></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').on('click', function() {
                // Get the closest time-slots div
                const timeSlotsDiv = $(this).closest('.time-slots');

                // Create new time slot HTML
                const timeSlotHtml = `
                    <div class="input-group mb-2">
                        <input type="text" name="availability[${$(this).closest('.mb-3').find('label').text().trim()}][start_time][]" class="form-control timepicker" placeholder="Start Time">
                        <span class="input-group-text">-</span>
                        <input type="text" name="availability[${$(this).closest('.mb-3').find('label').text().trim()}][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/add.js') }}"></script>
    <script src="{{ asset('assets/js/google_location.js') }}"></script>
@endpush