@extends('templates.dashboard')
@section('dashboard')
    <style>
        /* Add this to your CSS to define the style for the disabled dropdown */
        /* Add this to your CSS to define the style for the disabled dropdowns */
        #children:disabled,
        #children.disabled-style,
        #formats:disabled,
        #formats.disabled-style {
            background-color: #f8d7da;
            /* Set the background color to a light red */
            border-color: red;
            /* Set the border color to red */
            border-width: 2px;
            /* Set the border width to 2px (adjust as needed) */
        }
    </style>
    <div class="container-fluid">

        <!-- Page Heading -->

        @if (session()->has('success'))
            <div id="success-message" class="container alert alert-success">
                {{ session()->get('success') }}
            </div>
            <script>
                setTimeout(function() {
                    var successMessage = document.getElementById('success-message');
                    if (successMessage) {
                        successMessage.remove();
                    }
                }, 5000); // 5000 milliseconds = 5 seconds
            </script>
        @endif
        @if ($errors->any())
            <div id="error" class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <script>
            setTimeout(function() {
                var successMessage = document.getElementById('error');
                if (successMessage) {
                    successMessage.remove();
                }
            }, 5000); // 5000 milliseconds = 5 seconds
        </script>
        <!-- DataTales Example -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="m-0 font-weight-bold text-primary">Demande de {{ $demande->nom }} fait Le
                            {{ $demande->created_at }} </h6>
                    </div>

                </div>
            </div>

            <div class="container">


                <form action="{{ route('update_demande', $demande->id) }}" method="demande" enctype="multipart/form-data">
                    @csrf
                    <br>
                    <div class="form-group">
                        <label for="title">Nom & Prénom</label>
                        <input type="text" value="{{ $demande->nom }}" class="form-control" id="titre" name="nom"
                            readonly>
                    </div>
                    <div class="form-group">
                        <label for="title">Email</label>
                        <input type="text" value="{{ $demande->email }}" class="form-control" id="email"
                            name="email" readonly>
                    </div>
                    <div class="form-group">
                        <label for="title">Téléphone</label>
                        <input type="text" value="{{ $demande->tel }}" class="form-control" id="tel" name="tel"
                            readonly>
                    </div>
                    <div class="form-group">
                        <label for="title">PDF</label> <br><br>
                        <label style="font-weight: bold; font-size: 14px; display: block; margin-bottom: 5px;">Fichier
                            actuel:
                            <span style="color: #4CAF50;">{{ $demande->pdf }}</span>
                        </label>

                        <iframe src="{{ asset('uploads/demandes/' . $demande->pdf) }}"
                            style="max-width: 100%; height: 300px; border: 2px solid #ccc; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);"
                            frameborder="0" readonly>
                        </iframe> <br><br>



                    </div>

                    <div class="form-group">
                        <label for="country">Pays</label>
                        <select class="form-control form-select country" name="country" id="country" disabled
                            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>
                    </div>

                    <div class="form-group">
                        <label for="ville">Villes</label>
                        <select class="form-control form-select state" name="ville" id="ville" disabled
                            onchange="loadCities()">
                            <option selected disabled>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>
                    </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'),
                            citySelect = document.querySelector('.city');

                        // Function to load countries
                        function loadCountries() {
                            let apiEndPoint = config.cUrl;

                            fetch(apiEndPoint, {
                                    headers: {
                                        "X-CSCAPI-KEY": config.ckey
                                    }
                                })
                                .then(response => response.json())
                                .then(data => {
                                    countrySelect.innerHTML = '<option selected disabled>Sélectionner un pays</option>';

                                    data.forEach(country => {
                                        const option = document.createElement('option');
                                        option.value = country.iso2;
                                        option.textContent = country.name;
                                        countrySelect.appendChild(option);
                                    });

                                    // Set the pre-selected country after the API load
                                    const selectedCountry = '{{ $demande->country }}';
                                    if (selectedCountry) {
                                        countrySelect.value = selectedCountry;
                                        loadStates(); // Load states for the selected country
                                    }
                                })
                                .catch(error => console.error('Error loading countries:', error));

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

                        // Function to load states based on the selected country
                        function loadStates() {
                            stateSelect.disabled = 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);
                                    });

                                    // Set the pre-selected state after the API load
                                    const selectedState = '{{ $demande->ville }}';
                                    if (selectedState) {
                                        stateSelect.value = selectedState;
                                        loadCities(); // Load cities for the selected state
                                    }
                                })
                                .catch(error => console.error('Error loading states:', error));
                        }

                        // Function to load cities based on the selected state
                        function loadCities() {
                            const selectedCountryCode = countrySelect.value;
                            const selectedStateCode = stateSelect.value;

                            if (!selectedStateCode) return;

                            citySelect.innerHTML = '<option value="">Sélectionner 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;
                                        citySelect.appendChild(option);
                                    });

                                    // Optionally set the pre-selected city here if needed
                                })
                                .catch(error => console.error('Error loading cities:', error));
                        }

                        // Trigger functions on page load
                        window.onload = function() {
                            loadCountries(); // Load countries on page load
                        };
                    </script>


                    <div class="form-group">
                        <label for="title">Service Demandé</label>
                        <input type="text" value="{{ $demande->sujet }}" class="form-control" id="sujet" readonly
                            name="sujet">
                    </div>

                    <div class="form-group">
                        <label for="title">Date de la Demande</label>
                        <input type="date" value="{{ $demande->created_at->format('Y-m-d') }}" class="form-control"
                            readonly id="date" name="created_at">
                    </div>

                    <div class="form-group">
                        <label for="status">Status</label>
                        <select class="form-control" id="status" name="status" disabled>
                            <option value="En attente" {{ $demande->status == 'En attente' ? 'selected' : '' }}>En attente
                            </option>
                            <option value="En cours" {{ $demande->status == 'En cours' ? 'selected' : '' }}>En cours
                            </option>
                            <option value="Terminé" {{ $demande->status == 'Terminé' ? 'selected' : '' }}>Terminé</option>
                            <option value="Annulé" {{ $demande->status == 'Annulé' ? 'selected' : '' }}>Annulé</option>
                            <option value="Refusé" {{ $demande->status == 'Refusé' ? 'selected' : '' }}>Refusé</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="medecin">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>
                    </div>
                    <div class="form-group">
                        <label for="description">Message</label>
                        <textarea class="form-control" name="message" rows="4" readonly>{{ $demande->message }}</textarea>
                    </div>



                </form><br><br>

                <script src="{{ URL('Asset/tinymce/js/tinymce/tinymce.min.js') }}"></script>
                <script src="{{ URL('Asset/script.js') }}"></script>
            </div>

        </div>

    </div>
    <!-- /.container-fluid -->

    </div>
    <!-- End of Main Content -->
@endsection