@extends('layouts.app')

@section('content')
    <div class="card w-full">
        <div class="card-head">
            <div class="font-semibold text-cyan-900 uppercase">
                <i class="fal fa-calendar-alt mr-1"></i>
                Garanties matérielles
            </div>
            <div class="text-gray-600 space-x-2">

                @if(!empty($demande->id_demande))
                    <a id="addGarantie"  href="#" class="hover:text-orange-500" title="Changer de type garantie">
                        <i class="fal fa-rotate fa-lg"></i>
                    </a>
                    <a href="{{route('cd.garantie.index', $demande->id_demande)}}" class="hover:text-orange-500" title="Liste des garanties">
                        <i class="fal fa-list fa-lg"></i>
                    </a>
                    <a href="{{route('cd.demande.show', $demande->id_demande)}}" class="hover:text-orange-500" title="Demande de pret">
                        <i class="fal fa-file-signature fa-lg"></i>
                    </a>
                @endif

                @if(!empty($contrat->id_pret))
                    <a href="{{route('cd.contrat.show', $contrat->id_pret)}}" class="hover:text-orange-500" title="Contrat de prêt">
                        <i class="fal fa-file-certificate fa-lg"></i>
                    </a>
                    <a href="{{route('cd.calendrier.show',$contrat->id_pret)}}" class="hover:text-orange-500">
                        <i class="fal fa-calendar-alt fa-lg"></i>
                    </a>
                    <a href="{{route('cd.fiche.show',  $contrat->id_pret)}}" class="hover:text-orange-500">
                        <i class="fal fa-file-spreadsheet fa-lg"></i>
                    </a>
                @endif

                <a href="" class="search">
                    <i class="fal fa-print fa-lg"></i>
                </a>

            </div>
        </div>
        <div class="card-body">
            <x-alert/>

            <div class="flex flex-col">
                <x-tiers-bannier :tiers="$tiers"></x-tiers-bannier>
                <div class="card-content">
                    <x-demande-pret-head :demande="$demande"></x-demande-pret-head>
                    {{-- <x-contrat-pret-header :contrat="$contrat"></x-contrat-pret-header> --}}
                </div>

                <div class="card-content mt-3">
    
                    <form id="frmGarantie" method="post" action="{{$url}}">
                        <div class="space-y-4 mb-3">
                            @csrf
                            <input type="hidden" name="demandeId" value="{{$demande->id_demande}}">                                
                            <div class="flex flex-col md:w-full lg:flex-row  lg:flex-wrap">
                                @foreach ($fields as $name => $attribues)
                                    <div class="w-full lg:w-2/4 pr-3 mb-2">
                                        <div class="text-sm text-gray-500">
                                            {{ !empty($attribues->label) ? $attribues->label : $name }}
                                        </div>
                                        <div>
                                            <x-fields :name="$name" :attribues="$attribues"></x-fields>
                                            @error($name)
                                            <span class="text-red-500 text-sm">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div>
                                <div class="text-sm text-gray-500">
                                    Autres caractéristiques
                                </div>
                                <div>
                                    <textarea name="caracteristique" class="form-control" placeholder="La description de compte">{{!empty($garantie->caracteristique)?$garantie->caracteristique:old('caracteristique')}}</textarea>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>                
                <div class="mt-3">
                    <button id="btnSave" class="msg-box-show btn btn-warning">
                        <i class="fal fa-save mr-1"></i>
                        Enregistrer
                    </button>
    
                    <a href="{{route('cd.garantie.index',$contrat->id_pret)}}" class="inline-block btn btn-dark">
                        <i class="fal fa-times mr-1"></i>
                        Annuler
                    </a>
                </div>
            </div>
        </div>
    </div>
<x-tiers-modal :tiers="$tiers"></x-tiers-modal>

<div id="garantieModal" class="modal hidden justify-center fixed w-full h-full top-0 left-0 z-50 bg-black bg-opacity-80">
    <div style="width: 50rem" class="pt-36">
        <div class="rounded-lg border border-gray-300 bg-white py-3">
            <div class="border-b border-gray-300 px-5 font-semibold">
                <div class="flex justify-between py-2">
                    <div class="text-gray-700">
                        Garantie
                    </div>
                    <div>
                        <a href="#" class="btn-modal-close hover:text-orange-500">
                            <i class="fal fa-times"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="py-3 px-5">
                <div class="flex items-center justify-between py-3 px-5">
                    <ul class="space-y-3 text-cyan-700 text-semibold">
                        <li>
                            <a href="{{route('cd.garantie.create', [
                            'id_demande'   =>$demande->id_demande,
                            'type'  =>'mat'
                            ])}}">
                                <i class="fal fa-couch mr-2"></i>
                                Garantie Matériels</a>
                        </li>
                        <li>
                            <a href="{{route('cd.garantie.create', [
                            'id_demande'   =>$demande->id_demande,
                            'type'  =>'gag'
                            ])}}">
                                <i class="fal fa-truck mr-2"></i>
                                Véhicule</a>
                        </li>
                        <li>
                            <a href="{{route('cd.garantie.create', [
                            'id_demande'   =>$demande->id_demande,
                            'type'  =>'hyp'
                            ])}}">
                                <i class="fal fa-house-building mr-2"></i>
                                Terrain et maison</a>
                        </li>
                        <li>
                            <a href="{{route('cd.garantie.create', [
                            'id_demande'   =>$demande->id_demande,
                            'type'  =>'fin'
                            ])}}">
                                <i class="fal fa-cart-shopping mr-2"></i>
                                Garantie financière</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<x-msg-box>
    <x-slot name="title">
        Garanties
    </x-slot>
    Voulez vous réellement enregistrer ces garanties ?
</x-msg-box>

@endsection
@section('script')
    <script>

        document.getElementById('btnSave').addEventListener('click', function(e){
            e.preventDefault();

            Modal("#MsgBox", "show");
        })

        document.getElementById('btnYes').addEventListener('click', function(e){
            document.getElementById('frmGarantie').submit();
        })

        document.getElementById('addGarantie').addEventListener('click', function(e){
            e.preventDefault()
            Modal("#garantieModal", "show");
        })

    </script>
@endsection