@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-cart-plus mr-1"></i>
                Garanties
            </div>
            <div class="text-gray-600 space-x-2">
                @if(!empty($demande->id_demande))
                    <a id="addGarantie"  href="#" class="hover:text-orange-500" title="Ajouter des garanties">
                        <i class="fal fa-plus 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="hover:text-orange-500">
                    <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">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>N°</th>
                                <th class="text-left">Type</th>
                                <th class="text-center">Donneur</th>
                                <th class="text-left">Nature</th>
                                <th class="text-right">Valeur</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $sum_garantie = 0;
                                $i = 0;
                            @endphp

                            @foreach ($garanties as $garantie)
                                @php
                                    $sum_garantie += $garantie->valeur;
                                    $i++;
                                @endphp
                                <tr>
                                    <td>
                                        {{$i}}
                                    </td>
                                    <td class="text-left">{{key_exists($garantie->type_garantie, $types)?$types[$garantie->type_garantie]:$garantie->type_garantie}}</td>
                                    <td class="text-center">{{$garantie->emetteur}}</td>
                                    <td class="text-left uppercase">{{$garantie->nature}} : {{$garantie->caracteristique}}</td>
                                    <td class="text-right">{{ App\Lib\Format::number($garantie->valeur) }}</td>
                                    <td class="text-right">
                                        <a href="{{route('cd.garantie.show', $garantie->id_garantie)}}" class="hover:text-orange-500 mr-2 text-gray-600" title="Ajouter photo">
                                            <i class="fal fa-search-plus fa-lg"></i>
                                        </a>
                                        <a href="{{route('cd.garantie.edit', $garantie->id_garantie)}}" class="hover:text-orange-500 mr-2 text-gray-600" title="Editer">
                                            <i class="fal fa-edit fa-lg"></i>
                                        </a>
                                        <a  href="#" data-garantie="{{$garantie->id_garantie}}" class="btn-delete hover:text-orange-500 mr-2 text-red-500" title="Editer">
                                            <i class="fal fa-times fa-lg"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                            <tr>
                                <td colspan="4" class="text-right font-bold">TOTAL</td>
                                <td class="text-right font-bold">{{ App\Lib\Format::number($sum_garantie) }}</td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </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>

<form id="frmAction" method="post" action="{{route('cd.garantie.destroy')}}">
    @csrf
    <input type="hidden" id="garantieId" name="garantieId">
</form>

<x-msg-box>
    <x-slot name="title">
        Garanties
    </x-slot>
    Voulez vous réellement supprimer cette garantie ?
</x-msg-box>

@endsection

@section('script')
    <script>

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

        let btnDelete = document.querySelectorAll('.btn-delete');

        const frmAction = document.getElementById('frmAction');

        btnDelete.forEach(btn => {
            btn.addEventListener('click', function(e){
                frmAction.querySelector('[name="garantieId"]').setAttribute('value', btn.getAttribute('data-garantie'));
                Modal("#MsgBox", "show");
            })            
        });

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

    </script>
@endsection