@extends('backoffice.dashboard')
@section('content')
<link rel="stylesheet" href="{{ asset('BackOfficeAR/css/formulaire.css') }}">

@if(Auth::check())

<div class="container">
    <form action="{{ route('salle-sport.store') }}" method="POST" enctype="multipart/form-data" lang="ar">
    @csrf
        <input type="hidden" name="id_formulaire" value="{{ $formulaire->id_type }}">
        <h2>الجمهورية التونسية</h2>
        <h2>وزارة الشباب و الرياضة</h2>
        <h3>{{ $formulaire->type_ar }}</h3>
        <h4 style="text-align:center;">استمارة إيداع</h4>
        <div class="form-section">
            <h4>هوية الباعث</h4> 
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">الاسم و اللقب أو الاسم التجاري</label>
                <div class="col-sm-10">
                    <input required type="text" class="form-control" name="nom_prenom" placeholder="الاسم و اللقب أو الاسم التجاري" maxlength="50">
                </div>
            </div>  
            <div class="form-group row align-items-center">
                <label class="col-sm-2 col-form-label">الهوية الشخصية</label>  
                <div class="col-sm-4">
                    <select required class="form-control" id="id_type_identite" name="id_type_identite" onchange="showTypeIdentiteInput()">
                        <option value="" disabled selected>اختر...</option>
                        @foreach($typesIdentite as $type)
                            <option value="{{ $type->id_type }}">{{ $type->type_ar }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-sm-6" id="identite-fields">
                    <input type="text" class="form-control identite-field" id="cin_input" name="cin" placeholder="أدخل رقم بطاقة التعريف" pattern="^\d{8}$" maxlength="8" style="display:none;">
                    <input type="text" class="form-control identite-field" id="passport_input" name="passport" placeholder="أدخل رقم جواز السفر" pattern="^\d{8,12}$" minlength="8" maxlength="12" style="display:none;">
                    <input type="text" class="form-control identite-field" id="num_fiscal_input" name="num_fiscal" placeholder="أدخل رقم المعرف الجبائي" pattern="^\d{12}$" maxlength="12" style="display:none;">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">رقم الهاتف الشخصي</label>
                <div class="col-sm-10">
                    <input required type="text" class="form-control" name="tel" placeholder="رقم الهاتف الشخصي" maxlength="12">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">البريد الالكتروني</label>
                <div class="col-sm-10">
                    <input required type="email" class="form-control" name="email" placeholder=" ">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">العنوان الشخصي</label>
                <div class="col-sm-10">
                    <input required type="text" class="form-control" name="adresse" placeholder=" " maxlength="100">
                </div>
            </div>
            <h4> هوية العقار </h4> 
            <div class="form-group row">
                <label for="nom_victime" class="col-sm-2 col-form-label"> عنوان العقار </label>
                <div class="col-sm-10">
                    <input required type="text" class="form-control" id="adresse_imm" name="adresse_imm" placeholder=" "
                        oninput="validateThemeLengthNom()" oninvalid="this.setCustomValidity('يجب ألا يتجاوز عنوان العقار   100 حرفاً')" 
                        oninput="this.setCustomValidity('')">
                </div>
            </div>
            <div class="form-group row">                <label class="col-sm-2 col-form-label"> الولاية </label>                <div class="col-sm-4">                    <select required class="form-control" id="gouvernorat_id" name="gouvernorat_id">                        <option value="" disabled selected>اختر...</option>                        @foreach($gouvernorats as $gouv)                            <option value="{{ $gouv->id_gouver }}">{{ $gouv->nom_ar }}</option>                        @endforeach                    </select>                </div>                <label class="col-sm-2 col-form-label"> البلدية </label>                <div class="col-sm-4">                    <select required class="form-control" id="delegation_id" name="delegation_id" disabled>                        <option value="" disabled selected>اختر...</option>                    </select>                </div>            </div>
            <div class="form-group row">
                <label for="type_imm_id" class="col-sm-2 col-form-label">صيغة العقار</label>
                <div class="col-sm-4">
                    <select required class="form-control" id="type_imm_id" name="type_imm_id">
                        <option value="" disabled selected>اختر...</option>
                        @foreach($typesImmobilier as $type)
                            <option value="{{ $type->id_type }}">{{ $type->type_ar }}</option>
                        @endforeach
                    </select>
                </div>
                <label for="superfici_m2" class="col-sm-2 col-form-label"> المساحة الجملية للعقار بالم2  </label>
                <div class="col-sm-4">
                    <input required type="number" class="form-control" id="superfici_m2" name="superfici_m2" placeholder=" "
                          oninvalid="this.setCustomValidity('المساحة يجب ان لا تتجاوز 100م2')" 
                        oninput="this.setCustomValidity('')"  min="100">
                    <span>المساحة يجب ان تكون 100م2 على الاقل. </span>
                </div>                
            </div>
            <div class="form-group row">
                <label for="usage_id" class="col-sm-2 col-form-label">صيغة استغلال العقار</label>
                <div class="col-sm-4">
                     <select required class="form-control" id="usage_id" name="usage_id">
                        <option value="" disabled selected>اختر...</option>
                        @foreach($usagesImmobilier as $usage)
                            <option value="{{ $usage->id_usage_imm }}">{{ $usage->usage_ar }}</option>
                        @endforeach
                    </select>
                </div>
                <label for="document_propriete" class="col-sm-2 col-form-label">نسخة العقد/الملكية</label>
                <div class="col-sm-4">
                    <input required type="file" class="form-control" id="document_propriete" name="document_propriete">
                </div>
            </div>
            <h4> مكونات العقار  </h4>
            <div class="form-group row">
                <label for="salle_exercice" class="col-sm-2 col-form-label">قاعة التمارين</label>
                <div class="col-sm-4">
                    <select required class="form-control" id="salle_exercice" name="salle_exercice" onchange="toggleSection('salle_exercice', 'id_salle_exercice')">
                        <option value="" disabled {{ old('salle_exercice', '') === '' ? 'selected' : '' }}>اختر...</option>
                        <option value="1" {{ old('salle_exercice') === '1' ? 'selected' : '' }}>نعم</option>
                        <option value="0" {{ old('salle_exercice') === '0' ? 'selected' : '' }}>لا</option>
                    </select>
                </div>
                <div class="col-sm-6" id="id_salle_exercice" style="display: none;">
                    <div class="mb-2">
                        <input type="number"
                            class="form-control"
                            id="nbr_salle_exercice"
                            name="nbr_salle_exercice"
                            placeholder="عدد"
                            value="{{ old('nbr_salle_exercice') }}">
                    </div>
                    <div>
                        <input type="number"
                            class="form-control"
                            id="superface_salle"
                            name="superface_salle_exercice"
                            placeholder="مساحة"
                            value="{{ old('superface_salle_exercice') }}">
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label for="piscine" class="col-sm-2 col-form-label">حوض مائي</label>
                <div class="col-sm-4">
                    <select required class="form-control" id="piscine" name="piscine" onchange="toggleSection('piscine', 'id_piscine')">
                        <option value="" disabled {{ old('piscine', '') === '' ? 'selected' : '' }}>اختر...</option>
                        <option value="1" {{ old('piscine') === '1' ? 'selected' : '' }}>نعم</option>
                        <option value="0" {{ old('piscine') === '0' ? 'selected' : '' }}>لا</option>
                    </select>
                </div>
                <div class="col-sm-6" id="id_piscine" style="display: none;">
                    <div class="mb-2">
                        <input type="number"
                            class="form-control"
                            id="nbr_piscine"
                            name="nbr_piscine"
                            placeholder="عدد"
                            value="{{ old('nbr_piscine') }}">
                    </div>
                    <div>
                        <input type="number"
                            class="form-control"
                            id="superface_piscine"
                            name="superface_piscine"
                            placeholder="مساحة"
                            value="{{ old('superface_piscine') }}">
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label for="vestiaire" class="col-sm-2 col-form-label">حجرات ملابس</label>

                <div class="col-sm-4">
                    <select required class="form-control" id="vestiaire" name="vestiaire" onchange="toggleSection('vestiaire', 'id_vestiaire')">
                        <option value="" disabled {{ old('vestiaire', '') === '' ? 'selected' : '' }}>اختر...</option>
                        <option value="1" {{ old('vestiaire') === '1' ? 'selected' : '' }}>نعم</option>
                        <option value="0" {{ old('vestiaire') === '0' ? 'selected' : '' }}>لا</option>
                    </select>
                </div>
                <div class="col-sm-6" id="id_vestiaire" style="display: none;">
                    <div class="mb-2">
                        <input type="number"
                            class="form-control"
                            id="nbr_vestiaire"
                            name="nbr_vestiaire"
                            placeholder="عدد"
                            value="{{ old('nbr_vestiaire') }}">
                    </div>
                    <div>
                        <input type="number"
                            class="form-control"
                            id="superface_vestiaire"
                            name="superface_vestiaire"
                            placeholder="مساحة"
                            value="{{ old('superface_vestiaire') }}">
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label for="unitaires_sanitaire" class="col-sm-2 col-form-label">وحدات صحية</label>

                <div class="col-sm-4">
                    <select required class="form-control" id="unitaires_sanitaire" name="unitaires_sanitaire" onchange="toggleSection('unitaires_sanitaire', 'id_unitaires_sanitaire')">
                        <option value="" disabled {{ old('unitaires_sanitaire', '') === '' ? 'selected' : '' }}>اختر...</option>
                        <option value="1" {{ old('unitaires_sanitaire') === '1' ? 'selected' : '' }}>نعم</option>
                        <option value="0" {{ old('unitaires_sanitaire') === '0' ? 'selected' : '' }}>لا</option>
                    </select>
                </div>
                <div class="col-sm-6" id="id_unitaires_sanitaire" style="display: none;">
                    <input type="number"
                        class="form-control"
                        id="superface_unitaires_sanitaire"
                        name="superface_unitaires_sanitaire"
                        placeholder="مساحة"
                        value="{{ old('superface_unitaires_sanitaire') }}">
                </div>
            </div>
            <div class="form-group row">
                <label for="stockage_conservation" class="col-sm-2 col-form-label">فضاء للخزن و حفض الاثاث و المعدات</label>

                <div class="col-sm-4">
                    <select required class="form-control" id="stockage_conservation" name="stockage_conservation" onchange="toggleSection('stockage_conservation', 'id_stockage_conservation')">
                        <option value="" disabled {{ old('stockage_conservation', '') === '' ? 'selected' : '' }}>اختر...</option>
                        <option value="1" {{ old('stockage_conservation') === '1' ? 'selected' : '' }}>نعم</option>
                        <option value="0" {{ old('stockage_conservation') === '0' ? 'selected' : '' }}>لا</option>
                    </select>
                </div>
                <div class="col-sm-6" id="id_stockage_conservation" style="display: none;">
                    <input type="number"
                        class="form-control"
                        id="superface_stockage_conser"
                        name="superface_stockage_conservation"
                        placeholder="مساحة"
                        value="{{ old('superface_stockage_conservation') }}">
                </div>
            </div>
            <div class="form-group row">
                <label for="espace_exterieur" class="col-sm-2 col-form-label">فضاء خارجي</label>
                <div class="col-sm-4">
                    <select required class="form-control" id="espace_exterieur" name="espace_exterieur" onchange="toggleSection('espace_exterieur', 'id_espace_exterieur')">
                        <option value="" disabled {{ old('espace_exterieur', '') === '' ? 'selected' : '' }}>اختر...</option>
                        <option value="1" {{ old('espace_exterieur') === '1' ? 'selected' : '' }}>نعم</option>
                        <option value="0" {{ old('espace_exterieur') === '0' ? 'selected' : '' }}>لا</option>
                    </select>
                </div>
                <div class="col-sm-6" id="id_espace_exterieur" style="display: none;">
                    <input type="number"
                        class="form-control"
                        id="superface_espace_exterieur"
                        name="superface_espace_exterieur"
                        placeholder="مساحة"
                        value="{{ old('superface_espace_exterieur') }}">
                </div>
            </div>
            <div class="form-group row">
                <label for="garage" class="col-sm-2 col-form-label">ماوى سيارات</label>
                <div class="col-sm-4">
                    <select required class="form-control" id="garage" name="garage" onchange="toggleSection('garage', 'id_garage')">
                        <option value="" disabled {{ old('garage', '') === '' ? 'selected' : '' }}>اختر...</option>
                        <option value="1" {{ old('garage') === '1' ? 'selected' : '' }}>نعم</option>
                        <option value="0" {{ old('garage') === '0' ? 'selected' : '' }}>لا</option>
                    </select>
                </div>
                <div class="col-sm-6" id="id_garage" style="display: none;">
                    <input type="number"
                        class="form-control"
                        id="superface_garage"
                        name="superface_garage"
                        placeholder="مساحة"
                        value="{{ old('superface_garage') }}">
                </div>
            </div>
            <div class="form-group row">
                <label for="autres_surfaces" class="col-sm-2 col-form-label"> مساحات اخرى </label>
                <div class="col-sm-10">
                    <input required type="number" class="form-control" id="autres_surfaces" name="autres_surfaces">
                </div>
            </div>
        </div>
            <div class="form-group row text-center">
                <div class="col-sm-4 mx-auto">
                    <button type="submit" class="btn btn-success font-weight-medium" style="width:100px;margin-right:250px;">إرسال</button>
                </div>
                <div class="col-sm-4 mx-auto">
                    <a href="{{ route('salle-sport.index') }}" class="btn btn-primary" style="width:100px;margin-left:250px;">
                        <i class="bi bi-arrow-left"></i> رجوع
                    </a>
                </div>
            </div>
    </form>
</div><script>document.getElementById('gouvernorat_id').addEventListener('change', function() {    let gouvId = this.value;    let delegationSelect = document.getElementById('delegation_id');    delegationSelect.innerHTML = '<option value="" disabled selected>تحميل...</option>';    delegationSelect.disabled = true;    let url = "{{ route('delegations.get', ['gouvernoratId' => 'ID_PLACEHOLDER']) }}";    url = url.replace("ID_PLACEHOLDER", gouvId);    fetch(url)        .then(response => response.json())        .then(data => {            delegationSelect.innerHTML = '<option value="" disabled selected>اختر...</option>';            data.forEach(d => {                let option = document.createElement('option');                option.value = d.id_delegation;                option.text = d.nom_ar;                delegationSelect.add(option);            });            delegationSelect.disabled = false;        });});</script> 
@else
    <script>
        window.location.href = "{{ route('login') }}";
    </script>
@endif
@endsection