@extends('parent')

@section('content')
<div class="page-inner">
    <div class="page-header">
            <!-- <h3 class="fw-bold mb-3">Textes Juridiques</h3> -->
            <ul class="breadcrumbs mb-3">
            <li class="nav-home">
                <a href="{{ route('dashboard') }}">
                <i class="icon-home"></i>
                </a>
            </li>
            <li class="separator">
                <i class="icon-arrow-right"></i>
            </li>
            <li class="nav-item">
                <a href="{{ route('institutions.index') }}">Institution Financière</a>
            </li>
            <li class="separator">
                <i class="icon-arrow-right"></i>
            </li>
            <li class="nav-item">
                @if(isset($institution))
                    Editer une institution Financière
                @else
                    Ajouter une institution Financière
                @endif
            </li>
            </ul>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="card-title text-center" style="color: #1E3A34; bold: true; margin-top: 12px; margin-bottom:12px">
                    @if(isset($institution))
                        Editer une Institution Financière
                    @else
                        Ajouter une Institution Financière
                    @endif
                </div>
                </div>
                <div class="card-body">
                    <div class="row justify-content-center">
                    <form action="{{ isset($institution) ? route('institutions.update', $institution->id) : route('institutions.store') }}" method="POST">
                                @csrf
                                    @if(isset($institution))
                                    @method('PUT')
                                @endif
                            <div class="row">
                                <div class="col-md-6 col-lg-6">
                                    <div class="form-group">
                                        <label for="nom">Nom de l'institution <span class="text-danger">*</span></label>
                                        <input type="text" name="nom" class="form-control @error('nom') is-invalid @enderror" value="{{ old('nom', $institution->nom ?? '') }}" placeholder="Entrez le nom de l'institution" required>
                                        @error('nom')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-6">
                                    <div class="form-group">
                                        <label>Type d'institution <span class="text-danger">*</span></label>
                                        <select name="type_id" class="form-control" id="typeSelector" required>
                                            <option value="">Choisir un type</option>
                                            @if(!empty($types))
                                                @foreach($types as $type)
                                                    <option value="{{ $type->id }}"
                                                        {{ isset($institution) && $institution->type_id == $type->id ? 'selected' : '' }}>
                                                        {{ $type->nom }}
                                                    </option>
                                                @endforeach
                                            @endif

                                        </select>
                                         @error('type')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-lg-6">
                                    <div class="form-group">
                                        <label for="contact">Téléphone</label>
                                        <input type="text" name="telephone" class="form-control @error('telephone') is-invalid @enderror" value="{{ old('telephone', $institution->telephone ?? '') }}" placeholder="Entrez votre numéro de téléphone">
                                        @error('telephone')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-6">
                                    <div class="form-group">
                                        <label for="url">Lien (url)</label>
                                        <input type="text" name="url" class="form-control @error('url') is-invalid @enderror" value="{{ old('url', $institution->url ?? '') }}" placeholder="Entrez l'url">
                                        @error('url')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-lg-6">
                                    <div class="form-group">
                                        <label for="contact">Téléphone</label>
                                        <input type="text" name="telephone" class="form-control @error('telephone') is-invalid @enderror" value="{{ old('telephone', $institution->telephone ?? '') }}" placeholder="Entrez votre numéro de téléphone">
                                        @error('telephone')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-6">
                                    <div class="form-group">
                                        <label for="email">Email</label>
                                        <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email', $institution->email ?? '') }}" placeholder="Entrez votre email">
                                        @error('email')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-lg-6">
                                    <div class="form-group">
                                        <label for="adresse">Adresse</label>
                                        <input type="text" name="adresse" class="form-control @error('adresse') is-invalid @enderror" value="{{ old('adresse', $institution->adresse ?? '') }}" placeholder="Entrez votre adresse">
                                        @error('adresse')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-6">
                                    <div class="form-group">
                                        <label for="region">Region</label>
                                        <input type="text" name="region" class="form-control @error('region') is-invalid @enderror" value="{{ old('region', $institution->region ?? '') }}" placeholder="Entrez votre region">
                                        @error('region')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 col-lg-12">
                                    <div class="form-group">
                                        <label for="description">Description</label>
                                        <textarea   name="description" class="form-control" rows="5">{{ old('service_offerts', $institution->description ?? '') }}</textarea>

                                    </div>
                                </div>

                            </div>

                            <div class="row">
                                <div class="col-md-6 col-lg-6 d-none field-banque">
                                    <div class="form-group">
                                        <label for="service_offerts">Services Offert (Banque)</label>
                                        {{-- <textarea  id="service_offerts" name="service_offerts" class="form-control @error('service_offerts') is-invalid @enderror" rows="5">{{ old('service_offerts', $institution->service_offerts ?? '') }}</textarea>
                                        @error('service_offerts')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror --}}
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-6 d-none field-fonds_investissement">
                                    <div class="form-group">
                                        <label for="access_modalities">Modalités d'accès (Fonds)</label>
                                        {{-- <textarea id="access_modalities" name="access_modalities" class="form-control @error('access_modalities') is-invalid @enderror" rows="5">{{ old('access_modalities', $institution->access_modalities ?? '') }}</textarea>
                                        @error('access_modalities')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror --}}
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-6 d-none field-microfinance">
                                    {{-- <div class="form-group">
                                        <label for="description">Description (Microfinance)</label>
                                        <textarea id="description" name="description" class="form-control @error('description') is-invalid @enderror" rows="5">{{ old('description', $institution->description ?? '') }}</textarea>
                                        @error('description')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div> --}}
                                </div>
                            </div>
                            <div class="card-action text-center">
                                <button type="submit" class="btn btn-success">Enregistrer</button>
                                <button type="reset" class="btn btn-danger">Annuler</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

document.addEventListener('DOMContentLoaded', function () {
    const typeSelector = document.getElementById('typeSelector');

    function toggleFields() {
        // Hide all fields
        document.querySelectorAll('.field-banque, .field-fonds_investissement, .field-microfinance').forEach(field => {
            field.classList.add('d-none');
            field.querySelector('textarea, input, select')?.removeAttribute('required');
        });

        // Get the selected value
        const selectedType = typeSelector.value;

        // Show the related fields if a valid type is selected
        if (selectedType) {
            const activeField = document.querySelector(`.field-${selectedType}`);
            if (activeField) {
                activeField.classList.remove('d-none');
                activeField.querySelector('textarea, input, select')?.setAttribute('required', 'required');
            }
        }
    }

    // Ensure correct field is shown on page load
    toggleFields();

    // Listen for changes on the select field
    typeSelector.addEventListener('change', toggleFields);
});






</script>
@endsection