@extends('templates.dashboard_client')
@section('dashboard_client')
    <div id="kt_app_content" class="app-content  flex-column-fluid ">


        <!--begin::Content container-->
        <div id="kt_app_content_container" class="app-container  container-xxl ">

            <!--begin::Contacts App- Add New Contact-->
            <div class="row g-7">



                <!--begin::Content-->
                <div class="col-xl-12">

                    <!--begin::Contacts-->
                    <div class="card card-flush h-lg-100" id="kt_contacts_main">
                        <!--begin::Card header-->
                        <div class="card-header pt-7" id="kt_chat_contacts_header">
                            <!--begin::Card title-->
                            <div class="card-title">
                                <i class="ki-duotone ki-badge fs-1 me-2"><span class="path1"></span><span
                                        class="path2"></span><span class="path3"></span><span class="path4"></span><span
                                        class="path5"></span></i>
                                <h2>Votre Demande</h2>
                            </div>
                            <!--end::Card title-->
                        </div>
                        <!--end::Card header-->

                        <!--begin::Card body-->
                        <div class="card-body pt-5">
                            <!--begin::Form-->
                            <form class="form" action="{{ route('update_patient', $demande->id) }}" method="POST"
                                enctype="multipart/form-data">
                                @csrf
                                @if (Session::has('message'))
                                    <div id="errormessage" class="alert alert-success" role="alert">
                                        {{ Session::get('message') }}
                                    </div>
                                    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
                                    <script>
                                        $(document).ready(function() {
                                            setTimeout(function() {
                                                $('#errormessage').fadeOut('slow');
                                            }, 60000); // 1 minute
                                        });
                                    </script>
                                @endif
                                <div class="row row-cols-1 row-cols-sm-2 rol-cols-md-1 row-cols-lg-2">
                                    <!--begin::Col-->
                                    <div class="col">
                                        <!--begin::Input group-->
                                        <div class="fv-row mb-7">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold form-label mt-3">
                                                Nom & Prénom

                                            </label>

                                            <!--end::Label-->

                                            <!--begin::Input-->
                                            <input type="text" class="form-control form-control-solid" name="nom"
                                                readonly value="{{ $demande->nom }}" required>
                                            <!--end::Input-->
                                        </div>
                                        <!--end::Input group-->

                                    </div>
                                    <!--end::Col-->

                                    <!--begin::Col-->
                                    <div class="col">
                                        <!--begin::Input group-->
                                        <div class="fv-row mb-7">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold form-label mt-3">
                                                Email


                                            </label>

                                            <!--end::Label-->

                                            <!--begin::Input-->
                                            <input type="email" class="form-control form-control-solid" name="email"
                                                readonly value="{{ $demande->email }}" required>
                                            <!--end::Input-->
                                        </div>
                                        <!--end::Input group-->
                                    </div>
                                    <!--end::Col-->
                                </div>

                                <!--begin::Input group-->
                                <div class="fv-row mb-7">

                                    <!--begin::Label-->
                                    <label class="fs-6 fw-semibold form-label mt-3">
                                        Téléphone


                                    </label>


                                    <input type="text" class="form-control form-control-solid" name="tel"
                                        value="{{ $demande->tel }}" maxlength="15" readonly
                                        oninput="this.value = this.value.replace(/[^0-9+]/g, '');" required>


                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->
                                <div class="row row-cols-1 row-cols-sm-2 rol-cols-md-1 row-cols-lg-2">
                                    <!--begin::Col-->
                                    <div class="col">
                                        <!--begin::Input group-->
                                        <div class="fv-row mb-7">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold form-label mt-3">
                                                Pays
                                            </label>
                                            <!--end::Label-->

                                            <div class="w-100">
                                                <!--begin::Select2-->
                                                <select class="form-control form-select country" name="country" disabled
                                                    id="country" onchange="loadStates()" required>
                                                    <option selected disabled>Sélectionner un pays</option>
                                                    @foreach ($countries as $country)
                                                        <option value="{{ $country['iso2'] }}"
                                                            {{ old('country', $demande->country) == $country['iso2'] ? 'selected' : '' }}>
                                                            {{ $country['name'] }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <!--end::Select2-->
                                            </div>
                                        </div>
                                        <!--end::Input group-->
                                    </div>
                                    <div class="col">
                                        <!--begin::Input group-->
                                        <div class="fv-row mb-7">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold form-label mt-3">
                                                <span>Villes</span>
                                            </label>
                                            <!--end::Label-->
                                            <div class="w-100">
                                                <!--begin::Select2-->
                                                <select class="form-control form-select state" name="ville" id="ville"
                                                    disabled onchange="loadCities()">
                                                    <option selected readonly>Sélectionner une ville</option>
                                                    @foreach ($states as $state)
                                                        <option value="{{ $state['iso2'] }}"
                                                            {{ old('ville', $demande->ville) == $state['iso2'] ? 'selected' : '' }}>
                                                            {{ $state['name'] }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <!--end::Select2-->
                                            </div>

                                        </div>
                                        <!--end::Input group-->
                                    </div>
                                    <!--end::Col-->

                                    <!--begin::Col-->

                                    <!--end::Col-->
                                </div>

                                <script>
                                    var config = {
                                        cUrl: 'https://api.countrystatecity.in/v1/countries',
                                        ckey: 'NHhvOEcyWk50N2Vna3VFTE00bFp3MjFKR0ZEOUhkZlg4RTk1MlJlaA==' // Your API Key
                                    }

                                    var countrySelect = document.querySelector('.country'),
                                        stateSelect = document.querySelector('.state');

                                    function loadCountries() {
                                        let apiEndPoint = config.cUrl;

                                        fetch(apiEndPoint, {
                                                headers: {
                                                    "X-CSCAPI-KEY": config.ckey
                                                }
                                            })
                                            .then(response => response.json())
                                            .then(data => {
                                                data.forEach(country => {
                                                    const option = document.createElement('option');
                                                    option.value = country.iso2;
                                                    option.textContent = country.name;
                                                    countrySelect.appendChild(option);
                                                });
                                            })
                                            .catch(error => console.error('Error loading countries:', error));

                                        stateSelect.readonly = true;
                                        stateSelect.style.pointerEvents = 'none';
                                    }

                                    function loadStates() {
                                        stateSelect.readonly = false;
                                        stateSelect.style.pointerEvents = 'auto';

                                        const selectedCountryCode = countrySelect.value;

                                        if (!selectedCountryCode) return;

                                        stateSelect.innerHTML = '<option value="">Sélectionner une ville</option>'; // Clear existing states

                                        fetch(`${config.cUrl}/${selectedCountryCode}/states`, {
                                                headers: {
                                                    "X-CSCAPI-KEY": config.ckey
                                                }
                                            })
                                            .then(response => response.json())
                                            .then(data => {
                                                data.forEach(state => {
                                                    const option = document.createElement('option');
                                                    option.value = state.iso2;
                                                    option.textContent = state.name;
                                                    stateSelect.appendChild(option);
                                                });
                                            })
                                            .catch(error => console.error('Error loading states:', error));
                                    }

                                    function loadCities() {
                                        const citySelect = document.querySelector('.city');



                                        const selectedCountryCode = countrySelect.value;
                                        const selectedStateCode = stateSelect.value;

                                        if (!selectedStateCode) return;

                                        const citySelectUpdated = document.querySelector('.city');
                                        citySelectUpdated.innerHTML = '<option value="">Sélecontionner une ville</option>'; // Clear existing cities

                                        fetch(`${config.cUrl}/${selectedCountryCode}/states/${selectedStateCode}/cities`, {
                                                headers: {
                                                    "X-CSCAPI-KEY": config.ckey
                                                }
                                            })
                                            .then(response => response.json())
                                            .then(data => {
                                                data.forEach(city => {
                                                    const option = document.createElement('option');
                                                    option.value = city.iso2;
                                                    option.textContent = city.name;
                                                    citySelectUpdated.appendChild(option);
                                                });
                                            })
                                            .catch(error => console.error('Error loading cities:', error));
                                    }

                                    window.onload = loadCountries;
                                </script>

                                <div class="row row-cols-1 row-cols-sm-2 rol-cols-md-1 row-cols-lg-2">
                                    <!--begin::Col-->
                                    <div class="col">
                                        <!--begin::Input group-->
                                        <div class="fv-row mb-7">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold form-label mt-3">
                                                Document PDF
                                            </label>
                                            <!--end::Label-->

                                            <div class="w-100">
                                                <!--begin::Select2-->
                                                <!-- Embed the PDF in an iframe -->
                                                <iframe src="{{ asset('uploads/demandes/' . $demande->pdf) }}"
                                                    style="width: 100%; height: 300px; border: 2px solid #ccc; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);"
                                                    frameborder="0">
                                                </iframe>


                                                <!--end::Select2-->
                                            </div>
                                        </div>
                                        <!--end::Input group-->
                                    </div>

                                </div>
                                <script>
                                    document.getElementById('pdfInput').addEventListener('change', function() {
                                        const file = this.files[0];
                                        if (file && file.type !== 'application/pdf') {
                                            alert('Please select a valid PDF file.');
                                            this.value = ''; // Clear the input
                                        }
                                    });
                                </script>
                                <!--begin::Row-->


                                <div class="fv-row mb-7">

                                    <!--begin::Label-->
                                    <label class="fs-6 fw-semibold form-label mt-3">
                                        Médecin Assigné


                                    </label>

                                    <select class="form-control" id="medecin" name="medecin_id" disabled>
                                        <option value="" selected disabled>Sélectionner un médecin</option>
                                        <!-- Option to remove the doctor -->
                                        <option value="null" {{ $demande->medecin_id == null ? 'selected' : '' }}>Aucun
                                            médecin assigné
                                        </option>
                                        @foreach ($medecins as $medecin)
                                            <option value="{{ $medecin->id }}"
                                                {{ $demande->medecin_id == $medecin->id ? 'selected' : '' }}>
                                                {{ $medecin->titre }}
                                            </option>
                                        @endforeach
                                    </select>


                                    <!--end::Input-->
                                </div>


                                <div class="fv-row mb-7">

                                    <!--begin::Label-->
                                    <label class="fs-6 fw-semibold form-label mt-3">
                                        <span class="required">Service/Sujet</span>

                                        <span class="ms-1" data-bs-toggle="tooltip"
                                            title="Veuillez entrer un sujet valide.">
                                            <i class="ki-duotone ki-information fs-7">
                                                <span class="path1"></span>
                                                <span class="path2"></span>
                                                <span class="path3"></span>
                                            </i>
                                        </span>
                                    </label>

                                    <input type="text" class="form-control form-control-solid" name="sujet"
                                        value="{{ $demande->sujet }}" required>


                                    <!--end::Input-->
                                </div>
                                <!--end::Row-->

                                <!--begin::Row-->

                                <!--end::Row-->

                                <!--begin::Input group-->
                                <div class="fv-row mb-7">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-semibold form-label mt-3">
                                        <span>Message</span>

                                        <span class="ms-1" data-bs-toggle="tooltip"
                                            title="Veuillez entrer votre message (facultatif).">
                                            <i class="ki-duotone ki-information fs-7">
                                                <span class="path1"></span>
                                                <span class="path2"></span>
                                                <span class="path3"></span>
                                            </i>
                                        </span>
                                    </label>

                                    <!--begin::Input-->
                                    <textarea class="form-control form-control-solid" name="message" required>{{ $demande->message }}</textarea>

                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->

                                <!--begin::Separator-->
                                <div class="separator mb-6"></div>
                                <!--end::Separator-->

                                <!--begin::Action buttons-->
                                <div class="d-flex justify-content-end">
                                    <!--begin::Button-->

                                    <!--end::Button-->

                                    <!--begin::Button-->
                                    <button type="submit" data-kt-contacts-type="submit" class="btn btn-primary">
                                        <span class="indicator-label">
                                            Modifier
                                        </span>
                                        <span class="indicator-progress">
                                            Please wait... <span
                                                class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                        </span>
                                    </button>
                                    <!--end::Button-->
                                </div>
                                <!--end::Action buttons-->
                            </form>
                            <!--end::Form-->
                        </div>
                        <!--end::Card body-->
                    </div>
                    <!--end::Contacts-->

                </div>
                <!--end::Content-->
            </div>
            <!--end::Contacts App- Add New Contact-->
        </div>
        <!--end::Content container-->
    </div>
    <!--end::Content-->

    </div>
@endsection