@extends('layouts.app') 

@section('styles')
<link rel="stylesheet" href="{{ asset('BackOfficeAR/css/formulaire_edit.css') }}">
@endsection

@section('content')


@if(Auth::check())
<div class="salle-sport-edit it-about-3-area p-relative pt-30 pb-125">
    <img class="it-about-shape-1" src="{{ asset('assets/img/shape/about-1-1.png') }}" alt="">
    <div class="container">
	<nav class="breadcrumb-nav" aria-label="breadcrumb">
    <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item">
            <a href="{{ route('dashboard') }}">
                <i class="bi bi-house-fill"></i>
                <span>{{ __('site.investment.breadcrumb.home') }}</span>
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ route('investissement_choix') }}">
                <span>{{ __('site.investment.breadcrumb.index') }}</span>
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ route('salle-sport.index2') }}">
                <span>{{ __('site.investment.breadcrumb.salles_list') }}</span>
            </a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">{{ __('site.investment.breadcrumb.edit_salle') }}</li>
    </ol>
</nav>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
    <form class="card shadow-sm p-4" action="{{ route('salle-sport.update2', $immobilier->id_imm) }}" method="POST" enctype="multipart/form-data" lang="ar">
        @csrf
        @method('PUT')

        <input type="hidden" name="id_formulaire" value="{{ $formulaire->id_type }}">

        <h3>{{ trans_field($formulaire, 'type') }}</h3>
        <h4 style="text-align:center;">{{ __('site.investment.form.update_title') }}</h4>

        <div class="form-section">
            <h4>{{ __('site.investment.form.identity.title') }}</h4>  
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">{{ __('site.investment.form.label.full_name') }}</label>
                <div class="col-sm-10">
                    <input  type="text" disabled class="form-control" name="nom_prenom" 
                        placeholder="{{ __('site.investment.form.placeholder.full_name', []) }}" maxlength="50" style="text-transform: none; direction: rtl;"
                        value="{{ old('nom_prenom', $immobilier->utilisateur->nom_prenom ?? '') }}">
                </div>
            </div>  

            <div class="form-group row align-items-center">
                <label class="col-sm-2 col-form-label">{{ __('site.investment.form.label.identity_type') }}</label>  
                <div class="col-sm-4">
                    <select  class="form-control" disabled id="id_type_identite" name="id_type_identite" onchange="showTypeIdentiteInput2()">
                        <option value="" disabled>{{ __('site.investment.form.placeholder.choose') }}</option>
                        @foreach($typesIdentite as $type)
                            <option value="{{ $type->id_type }}" 
                                {{ old('id_type_identite', $immobilier->utilisateur->id_type_identite ?? '') == $type->id_type ? 'selected' : '' }}>
                                {{ trans_field($type, 'type') }}
                            </option>
                        @endforeach
                    </select>
					@error('id_type_identite') 
                        <span class="text-danger">{{ $message }}</span> 
                    @enderror
                </div>
                <div class="col-sm-6" id="identite-fields">
                    <input type="text" class="form-control identite-field" id="cin_input" name="cin" 
                        placeholder="{{ __('site.investment.form.placeholder.cin') }}" pattern="^\d{8}$" maxlength="8" style="text-transform: none; direction: rtl;"
                        style="display:none;" disabled
                        value="{{ old('cin', $immobilier->utilisateur->cin ?? '') }}">
                    <input type="text" class="form-control identite-field" id="passport_input" name="passport"  style="text-transform: none; direction: rtl;"
                        placeholder="{{ __('site.investment.form.placeholder.passport') }}" pattern="^\d{8,12}$" minlength="8" maxlength="12"
                        style="display:none;" disabled
                        value="{{ old('passport', $immobilier->utilisateur->passport ?? '') }}">
                    <input type="text" class="form-control identite-field" id="num_fiscal_input" name="num_fiscal" 
                        placeholder="{{ __('site.investment.form.placeholder.fiscal') }}"  style="text-transform: none; direction: rtl;" pattern="^\d{12}$" maxlength="12"
                        style="display:none;" disabled
                        value="{{ old('num_fiscal', $immobilier->utilisateur->num_fiscal ?? '') }}">
                </div>
            </div>

            <div class="form-group row">
                <label class="col-sm-2 col-form-label">{{ __('site.investment.form.label.phone') }}</label>
                <div class="col-sm-10">
                    <input required type="text" style="text-transform: none; direction: rtl;" class="form-control" name="tel"
                         value="{{ old('tel', $immobilier->utilisateur->tel ?? '') }}" pattern="[0-9]{8}"  maxlength="8" inputmode="numeric" >
                </div>
            </div>

            <div class="form-group row">
                <label class="col-sm-2 col-form-label">{{ __('site.investment.form.label.email') }}</label>
                <div class="col-sm-10">
                    <input required type="email" class="form-control"  style="text-transform: none; direction: rtl;" name="email" placeholder=" "
                        disabled value="{{ old('email', $immobilier->utilisateur->email ?? '') }}">
                </div>
            </div>

            <div class="form-group row">
				<label class="col-sm-2 col-form-label">{{ __('site.investment.form.label.address') }}</label>
				<div class="col-sm-10">
					<input type="text" 
						   style="text-transform: none; direction: rtl;" 
						   class="form-control @error('adresse') is-invalid @enderror" 
						   name="adresse" 
						   placeholder=" " 
						   maxlength="100"
						   value="{{ old('adresse', $immobilier->utilisateur->adresse ?? '') }}"
						   oninput="this.value = this.value.slice(0, 100)"> 
					@error('adresse')
						<span class="text-danger">{{ $message }}</span>
					@enderror
				</div>
			</div>



            <h4>{{ __('site.investment.form.property.title') }}</h4> 
            <div class="form-group row">
				<label for="adresse_imm" class="col-sm-2 col-form-label">{{ __('site.investment.form.label.property_address') }}</label>
				<div class="col-sm-10">
					<input type="text" 
						   class="form-control @error('adresse_imm') is-invalid @enderror"
						   id="adresse_imm" 
						   name="adresse_imm" 
						   placeholder=" "
						   maxlength="100" 
						   style="text-transform: none; direction: rtl;" 
						   value="{{ old('adresse_imm', $immobilier->adresse_imm ?? '') }}"
						   oninput="this.value = this.value.slice(0, 100)"
						   oninvalid="this.setCustomValidity('{{ __('site.investment.form.validation.property_address_max') }}')" 
						   oninput="this.setCustomValidity('')">
					@error('adresse_imm')
						<span class="text-danger">{{ $message }}</span>
					@enderror
				</div>
			</div>


            <div class="form-group row">
				<label class="col-sm-2 col-form-label">{{ __('site.investment.form.label.gouvernorat') }}</label>
				<div class="col-sm-4">
					<select  class="form-control" id="gouvernorat_id" name="gouvernorat_id">
						<option value="" disabled {{ old('gouvernorat_id', $immobilier->gouvernorat_id ?? '') ? '' : 'selected' }}>
							{{ __('site.investment.form.placeholder.choose') }}
						</option>
						@foreach($gouvernorats as $gouv)
							<option value="{{ $gouv->id_gouver }}"
								{{ old('gouvernorat_id', $immobilier->gouvernorat_id ?? '') == $gouv->id_gouver ? 'selected' : '' }}>
								{{ trans_field($gouv, 'nom') }}
							</option>
						@endforeach
					</select>
					@error('gouvernorat_id')
						<span class="text-danger">{{ $message }}</span>
					@enderror
				</div>

				<label class="col-sm-2 col-form-label">{{ __('site.investment.form.label.delegation') }}</label>
				<div class="col-sm-4">
					<select  class="form-control" id="delegation_id" name="delegation_id" {{ $immobilier->delegation_id ? '' : 'disabled' }}>
						<option value="" disabled {{ old('delegation_id', $immobilier->delegation_id ?? '') ? '' : 'selected' }}>
							{{ __('site.investment.form.placeholder.choose') }}
						</option>
						@if($immobilier->delegation_id)
							@foreach($delegations as $del)
								<option value="{{ $del->id_delegation }}"
									{{ old('delegation_id', $immobilier->delegation_id ?? '') == $del->id_delegation ? 'selected' : '' }}>
									{{ trans_field($del, 'nom') }}
								</option>
							@endforeach
						@endif
					</select>
					@error('delegation_id')
						<span class="text-danger">{{ $message }}</span>
					@enderror
				</div>
			</div>


            <div class="form-group row">
    <label for="type_imm_id" class="col-sm-2 col-form-label">{{ __('site.investment.form.label.property_type') }}</label>
    <div class="col-sm-4">
        <select  class="form-control @error('type_imm_id') is-invalid @enderror" id="type_imm_id" name="type_imm_id">
            <option value="" disabled {{ old('type_imm_id', $immobilier->type_imm_id ?? '') ? '' : 'selected' }}>
                {{ __('site.investment.form.placeholder.choose') }}
            </option>
            @foreach($typesImmobilier as $type)
                <option value="{{ $type->id_type }}"
                    {{ old('type_imm_id', $immobilier->type_imm_id ?? '') == $type->id_type ? 'selected' : '' }}>
                    {{ trans_field($type, 'type') }}
                </option>
            @endforeach
        </select>
        @error('type_imm_id')
            <span class="text-danger">{{ $message }}</span>
        @enderror
    </div>

    <label for="superfici_m2" class="col-sm-2 col-form-label">{{ __('site.investment.form.label.surface_total') }}</label>
    <div class="col-sm-4">
        <input  type="number" 
               class="form-control @error('superfici_m2') is-invalid @enderror" 
               id="superfici_m2" 
               name="superfici_m2" 
               placeholder=" "
               value="{{ old('superfici_m2', $immobilier->superfici_m2 ?? '') }}"
			   min="100" 
               max="99999">
        @error('superfici_m2')
            <span class="text-danger">{{ $message }}</span>
        @enderror
        <span>{{ __('site.investment.form.validation.surface_hint') }}</span>
    </div>                
</div>


            <div class="form-group row">
    <label for="usage_id" class="col-sm-2 col-form-label">{{ __('site.investment.form.label.usage_type') }}</label>
    <div class="col-sm-4">
        <select  class="form-control @error('usage_id') is-invalid @enderror" id="usage_id" name="usage_id">
            <option value="" disabled {{ old('usage_id', $immobilier->usage_id ?? '') ? '' : 'selected' }}>
                {{ __('site.investment.form.placeholder.choose') }}
            </option>
            @foreach($usagesImmobilier as $usage)
                <option value="{{ $usage->id_usage_imm }}"
                    {{ old('usage_id', $immobilier->usage_id ?? '') == $usage->id_usage_imm ? 'selected' : '' }}>
                    {{ trans_field($usage, 'usage') }}
                </option>
            @endforeach
        </select>
        @error('usage_id')
            <span class="text-danger">{{ $message }}</span>
        @enderror
    </div>

    <label for="document_propriete" class="col-sm-2 col-form-label">{{ __('site.investment.form.label.document_property') }}</label>
    <div class="col-sm-4">
        <input type="file" class="form-control @error('document_propriete') is-invalid @enderror" id="document_propriete" name="document_propriete">
        @error('document_propriete')
            <span class="text-danger">{{ $message }}</span>
        @enderror

        @if($immobilier->document_propriete)
            <small>
                {{ __('site.investment.form.current_file') }} 
                <a href="{{ route('immobilier.document_propriete', $immobilier->id_imm) }}" target="_blank">
                    {{ __('site.investment.view') }}
                </a>
            </small>
        @endif
    </div>
</div>

            <h4>{{ __('site.investment.form.components.title') }}</h4>

            @php
    $components = [
        'salle_exercice','piscine','vestiaire','unitaires_sanitaire',
        'stockage_conservation','espace_exterieur','garage'
    ];
@endphp

@foreach($components as $comp)
    <div class="form-group row">
        <label for="{{ $comp }}" class="col-sm-2 col-form-label">
            @switch($comp)
                @case('salle_exercice') {{ __('site.investment.form.components.exercise_hall') }} @break
                @case('piscine') {{ __('site.investment.form.components.pool') }} @break
                @case('vestiaire') {{ __('site.investment.form.components.changing_rooms') }} @break
                @case('unitaires_sanitaire') {{ __('site.investment.form.components.sanitary_units') }} @break
                @case('stockage_conservation') {{ __('site.investment.form.components.storage_space') }} @break
                @case('espace_exterieur') {{ __('site.investment.form.components.outdoor_space') }} @break
                @case('garage') {{ __('site.investment.form.components.garage') }} @break
            @endswitch
        </label>

        <div class="col-sm-4">
            <select  class="form-control @error($comp) is-invalid @enderror" 
                    id="{{ $comp }}" name="{{ $comp }}" 
                    onchange="toggleSection('{{ $comp }}','id_{{ $comp }}')">
                <option value="" disabled {{ old($comp, $immobilier->$comp ?? '') === null ? 'selected' : '' }}>
                    {{ __('site.investment.form.placeholder.choose') }}
                </option>
                <option value="1" {{ old($comp, $immobilier->$comp ?? '') == 1 ? 'selected' : '' }}>{{ __('site.yes') }}</option>
                <option value="0" {{ old($comp, $immobilier->$comp ?? '') == 0 ? 'selected' : '' }}>{{ __('site.no') }}</option>
            </select>
            @error($comp)
                <span class="text-danger">{{ $message }}</span>
            @enderror
        </div>

        <div class="col-sm-6" id="id_{{ $comp }}" style="display: {{ old($comp, $immobilier->$comp ?? '') == 1 ? 'block' : 'none' }};">
            @if(in_array($comp, ['salle_exercice','piscine','vestiaire']))
                <div class="mb-2">
                    <input type="number" class="form-control @error('nbr_'.$comp) is-invalid @enderror" 
                           id="nbr_{{ $comp }}" name="nbr_{{ $comp }}" 
                           placeholder="{{ __('site.investment.form.placeholder.count') }}"
                           value="{{ old('nbr_'.$comp, $immobilier->{'nbr_'.$comp} ?? '') }}" min="1" max="100"
				   oninput="this.value = Math.max(1, Math.min(100, this.value))">
                    @error('nbr_'.$comp)
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div>
                    <input type="number" class="form-control @error('superface_'.$comp) is-invalid @enderror" 
                           id="superface_{{ $comp }}" name="superface_{{ $comp }}" 
                           placeholder="{{ __('site.investment.form.placeholder.surface') }}"
                           value="{{ old('superface_'.$comp, $immobilier->{'superface_'.$comp} ?? '') }}"
						   min="1" max="9999"
				   oninput="this.value = Math.max(1, Math.min(9999, this.value))">
                    @error('superface_'.$comp)
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
            @else
                <input type="number" class="form-control @error('superface_'.$comp) is-invalid @enderror" 
                       id="superface_{{ $comp }}" name="superface_{{ $comp }}" 
                       placeholder="{{ __('site.investment.form.placeholder.surface') }}"
                       value="{{ old('superface_'.$comp, $immobilier->{'superface_'.$comp} ?? '') }}">
                @error('superface_'.$comp)
                    <span class="text-danger">{{ $message }}</span>
                @enderror
            @endif
        </div>
    </div>
@endforeach

<div class="form-group row">
    <label for="autres_surfaces" class="col-sm-2 col-form-label">{{ __('site.investment.form.label.other_surfaces') }}</label>
    <div class="col-sm-10">
        <input disabled type="number" class="form-control @error('autres_surfaces') is-invalid @enderror" 
               id="autres_surfaces" name="autres_surfaces" 
               value="{{ old('autres_surfaces', $immobilier->autres_surfaces ?? '') }}">
        @error('autres_surfaces')
            <span class="text-danger">{{ $message }}</span>
        @enderror
    </div>
</div>

            
        </div>
        <div class="form-group row text-center" style="padding-top:50px;">
               <div class="d-flex justify-content-end mb-4">
                    <button type="submit" class="btn btn-success font-weight-medium" style="width:100px;margin-right:250px;">{{ __('site.jeunesse.buttons.submit') }}</button>
                </div>
            </div>
		

    </form>
</div>
</div>


@section('scripts')
<script>
    // Fonction pour gérer l'affichage des champs d'identité
    function showTypeIdentiteInput2() {
        const idType = document.getElementById('id_type_identite').value;
        const cinInput = document.getElementById('cin_input');
        const passportInput = document.getElementById('passport_input');
        const numFiscalInput = document.getElementById('num_fiscal_input');

        // Cacher tous les champs
        [cinInput, passportInput, numFiscalInput].forEach(input => {
            input.style.display = 'none';
            input.required = false;
        });

        // Afficher le champ approprié
        switch(idType) {
            case '1':
                cinInput.style.display = 'block';
                cinInput.required = true;
                break;
            case '2':
                passportInput.style.display = 'block';
                passportInput.required = true;
                break;
            case '3':
                numFiscalInput.style.display = 'block';
                numFiscalInput.required = true;
                break;
        }
    }

    // Fonction pour basculer l'affichage des sections
    function toggleSection(selectId, sectionId) {
        const select = document.getElementById(selectId);
        const section = document.getElementById(sectionId);
        if (!select || !section) return;

        const updateVisibility = () => {
            section.style.display = select.value === '1' ? 'block' : 'none';
        };

        select.addEventListener('change', updateVisibility);
        updateVisibility(); // État initial
    }

    document.addEventListener('DOMContentLoaded', function() {
        // Désactiver nice-select pour tous les selects dans le formulaire
        const formSelects = document.querySelectorAll('.salle-sport-edit select');
        formSelects.forEach(select => {
            const niceSelect = select.nextElementSibling;
            if (niceSelect && niceSelect.classList.contains('nice-select')) {
                niceSelect.remove();
            }
        });

        // Initialiser showTypeIdentiteInput2
        showTypeIdentiteInput2();

        // Initialiser les sections
        const sections = [
            'salle_exercice',
            'piscine',
            'vestiaire',
            'unitaires_sanitaire',
            'stockage_conservation',
            'espace_exterieur',
            'garage'
        ];

        sections.forEach(id => {
            toggleSection(id, 'id_' + id);
        });


		
		
		
		
		
    });
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const gouvSelect = document.getElementById('gouvernorat_id');
    const delSelect  = document.getElementById('delegation_id');

    // Blade-provided initial values (kept as JS literals)
    const initialGouv = {!! json_encode(old('gouvernorat_id', $immobilier->gouvernorat_id ?? '')) !!};
    const initialDel  = {!! json_encode(old('delegation_id', $immobilier->delegation_id ?? '')) !!};
    const locale = {!! json_encode(app()->getLocale()) !!};

    // Localized placeholders (Blade / Lang)
    const placeChoose = {!! json_encode(__('site.investment.form.placeholder.choose')) !!};
    const placeLoading = {!! json_encode(__('site.investment.form.placeholder.loading')) !!};

    if (!gouvSelect || !delSelect) return;

    // Utility: clear & set a single disabled placeholder option
    function setPlaceholder(selectEl, text) {
        selectEl.innerHTML = '';
        const opt = document.createElement('option');
        opt.disabled = true;
        opt.selected = true;
        opt.textContent = text;
        selectEl.appendChild(opt);
    }

    // Fill delegations list (prefers nom_localized returned by server)
    function populateDelegations(list, selectedId = null) {
        setPlaceholder(delSelect, placeChoose);

        list.forEach(item => {
            const opt = document.createElement('option');
            opt.value = item.id_delegation;

            // Prefer server-provided localized name; otherwise fall back to locale-specific raw fields or id
            opt.text = item.nom_localized
                || item['nom_' + locale]
                || item.nom_en
                || item.nom_fr
                || item.nom_ar
                || String(item.id_delegation);

            if (selectedId && String(selectedId) === String(item.id_delegation)) {
                opt.selected = true;
            }

            delSelect.appendChild(opt);
        });

        delSelect.disabled = list.length === 0;
    }

    // Fetch delegations for a gouvernorat id (uses your named route pattern)
    async function fetchDelegations(gouvId, preselectId = null) {
        if (!gouvId) {
            setPlaceholder(delSelect, placeChoose);
            delSelect.disabled = true;
            return;
        }

        delSelect.disabled = true;
        setPlaceholder(delSelect, placeLoading);

        // Build URL using the same named route pattern you used in blade earlier.
        // Replace the placeholder with the real id.
        let url = "{{ route('delegations.get', ['gouvernoratId' => 'ID_PLACEHOLDER']) }}";
        url = url.replace('ID_PLACEHOLDER', encodeURIComponent(gouvId));

        try {
            const resp = await fetch(url, { credentials: 'same-origin' });
            if (!resp.ok) throw new Error('Network response was not ok');

            const data = await resp.json();

            // data expected as array of objects with 'id_delegation' and 'nom_localized' (controller provides this)
            if (!Array.isArray(data)) {
                console.error('Unexpected delegations response:', data);
                setPlaceholder(delSelect, placeChoose);
                delSelect.disabled = true;
                return;
            }

            populateDelegations(data, preselectId);
        } catch (err) {
            console.error('Failed to fetch delegations:', err);
            setPlaceholder(delSelect, placeChoose);
            delSelect.disabled = true;
        }
    }

    // on change: fetch and populate
    gouvSelect.addEventListener('change', function () {
        const gouvId = this.value;
        // clear current delegation and fetch
        fetchDelegations(gouvId, null);
    });

    // Init: if the form has an initial gouvernorat, load its delegations and preselect delegation if present
    if (initialGouv) {
        // if delegation select already has options (server-side rendered), we still want to ensure labels are correct for locale
        // so fetch and replace with locale-aware labels, preselect previous delegation
        fetchDelegations(initialGouv, initialDel);
    } else {
        // No gov preselected — ensure delegation select is disabled and shows placeholder
        setPlaceholder(delSelect, placeChoose);
        delSelect.disabled = true;
    }

    // Small enhancement: preserve previously selected delegation when user submits with validation errors
    // (handled by preselecting using old() values injected above)
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {

    const totalSurfaceInput = document.getElementById('superfici_m2');
    const autresSurfacesInput = document.getElementById('autres_surfaces');

    const surfaceFields = [
        'superface_salle_exercice',
        'superface_piscine',
        'superface_vestiaire',
        'superface_unitaires_sanitaire',
        'superface_stockage_conser',
        'superface_espace_exterieur',
        'superface_garage'
    ];

    function getValue(id) {
        const el = document.getElementById(id);
        return el && el.value ? parseFloat(el.value) : 0;
    }

    function calculateSurfaces() {
        const totalSurface = parseFloat(totalSurfaceInput.value) || 0;

        let sum = 0;
        surfaceFields.forEach(id => {
            sum += getValue(id);
        });

        if (totalSurface === 0) {
            autresSurfacesInput.value = '';
            return;
        }

        // ❌ si la somme dépasse la surface totale
        if (sum > totalSurface) {
            alert('❌ La somme des surfaces dépasse la surface totale.');
            autresSurfacesInput.value = '';
            return;
        }

        // ✅ calcul automatique de autres_surfaces
        const autres = totalSurface - sum;
        autresSurfacesInput.value = autres >= 0 ? autres.toFixed(2) : 0;
    }

    // écouter les changements
    totalSurfaceInput.addEventListener('input', calculateSurfaces);

    surfaceFields.forEach(id => {
        const el = document.getElementById(id);
        if (el) {
            el.addEventListener('input', calculateSurfaces);
        }
    });
});
</script>
@endsection

@else
    <script>
        window.location.href = "{{ route('login') }}";
    </script>
@endif
@endsection