@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($contrat->id_pret))
                    <a id="addGarantie"  href="#" class="hover:text-orange-500" title="Ajouter une garantie">
                        <i class="fal fa-plus fa-lg"></i>
                    </a>
                    <a href="{{route('cd.garantie.index', $demande->id_demande)}}" class="hover:text-orange-500" title="Liste de garantie">
                        <i class="fal fa-list fa-lg"></i>
                    </a>
                    <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.garantie.edit', $garantie->id_garantie)}}" class="hover:text-orange-500" title="Contrat de prêt">
                        <i class="fal fa-edit fa-lg"></i>
                    </a>
                    <a id="btnAddPhoto" href="#" class="hover:text-orange-500" title="Ajouter une photo ou autres documents">
                        <i class="fal fa-image fa-lg"></i>
                    </a>
                @endif
            </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-contrat-pret-header :contrat="$contrat"></x-contrat-pret-header>
                </div>

                <div class="card-content mt-3">

                    <div class="flex flex-col md:w-full lg:flex-row  lg:flex-wrap">
                        @foreach ($fields as $name => $attribue)
                            <div class="w-full lg:w-2/4 pr-3 mb-2">
                                <x-show>
                                    <x-slot name="label">
                                        {{ !empty($attribue->label) ? $attribue->label : $name }}
                                    </x-slot>
                                    @switch($attribue->type)
                                        @case('date')
                                            {{(new DateTime($attribue->value))->format('d/m/Y')}}
                                            @break
                                        @case('select')
                                                @if(key_exists($attribue->value,$attribue->options))
                                                    {{$attribue->options[$attribue->value]}}
                                                @else
                                                    {{ $attribue->value }}
                                                @endif
                                            @break
                                        @case('money')
                                            {{ App\Lib\Format::number($attribue->value)}}
                                            @break
                                        @default
                                        {{$attribue->value}}
                                    @endswitch
                                </x-show>
                            </div>
                        @endforeach
                    </div>
                    
                    <div class="bg-gray-200 px-5 py-5 rounded-md border-gray-500 bg-opacity-50">
                        {{$garantie->caracteristique}}
                    </div>

                </div>
                <div class="mt-3">
                    <div class="border-b border-gray-500 font-semibold mb-3">
                        <i class="fal fa-paperclip mr-1"></i>
                        Pièces jointes
                    </div>
                    <div class="flex text-orange-700 space-x-3"> 
                        @php
                            $i = 0;
                        @endphp                       
                        @foreach ($pieces as $pj)
                            @php $i++ @endphp
                            <a href="{{route('cd.garantie.download', $pj->id_pj)}}" class="flex">
                                <div class="flex items-center justify-center bg-gray-500 text-white  text-xs rounded-full px-2 mr-1">
                                    {{$i}}</div>
                                <div>
                                    {{$pj->original_name}}
                                </div>
                            </a>
                        @endforeach
                        @if($i==0)
                            Aucune pièce jointe pour cette garantie
                        @endif
                    </div>
                </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">
        Calendrier de remboursement
    </x-slot>
    Voulez vous réellement valider ce calendrier de remboursement de prêt ?
</x-msg-box>

<x-import-file :params="$params"></x-import-file>

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

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

        document.getElementById('btnAddPhoto').addEventListener('click', function(e){
            Modal('#modalFile')
        })
        document.getElementById('btnSend').addEventListener('click', function(){
            document.getElementById('frmFile').submit()
        });
    </script>
@endsection