@extends('layouts.app')

@section('content')
    <div class="card w-5/6">
        <div class="card-head">
            <div class="font-semibold text-cyan-900 uppercase">
                <i class="fal fa-file-signature mr-1"></i>
                Demande de prêt @if(!empty($tiers->id_tiers)): <span class="text-orange-500">{{$tiers->id_tiers}}</span>@endif
            </div>
            <div class="space-x-2 text-gray-500">
                <a id="btnDeleteDecision" href="#" class="hover:text-orange-500" title="Revenir sur sa décision">
                    <i class="fal fa-undo fa-lg"></i>
                </a>
                <a href="{{route('cd.demande.edit',  $demande->id_demande)}}" class="hover:text-orange-500" title="Liste des demandes">
                    <i class="fal fa-edit fa-lg"></i>
                </a>
                <a href="{{route('cd.demande.index')}}" class="hover:text-orange-500" title="Liste des demandes">
                    <i class="fal fa-list fa-lg"></i>
                </a>
                <a href="{{!empty($contrat->id_pret)?route('cd.contrat.show', $contrat->id_pret):route('cd.contrat.create', $demande->id_demande)}}"
                    class="hover:text-orange-500" title="Contrat de prêt">
                    <i class="fal fa-file-certificate fa-lg"></i>
                </a>
            </div>
        </div>
        <div class="card-body">

            <x-alert/>

            <x-tiers-bannier :tiers="$tiers"></x-tiers-bannier>

            <div class="flex flex-col">


                @if(in_array($demande->decision, ['R','D']))
                    <div class="bg-red-300 bg-opacity-70 text-red-900 px-5 py-2 border border-red-400 border-opacity-70 shadow-md rounded-md mb-3">
                        Ce prêt a été refusé ou abandonné à cause de : <span class="font-bold">{{$demande->motif}}</span>
                    </div>
                @endif

                <div class="card-content">
                    <div class="flex bg-gray-500 bg-opacity-20 pl-5 py-1 mb-3 text-gray-500 font-semibold">
                        Demande de prêt
                    </div>
                    <div class="flex flex-col md:w-full lg:flex-row  lg:flex-wrap">
                        <div class="w-full lg:w-2/4 pr-3 mb-2">
                            <x-show>
                                <x-slot name="label">
                                    Réf de demande
                                </x-slot>
                                {{$demande->id_demande}}
                            </x-show>
                        </div>
                        <div class="w-full lg:w-2/4 pr-3 mb-2">
                            <x-show>
                                <x-slot name="label">
                                    Statut
                                </x-slot>
                                @php $status = config('credit.decision') @endphp
                                {{key_exists($demande->decision, $status) ? mb_strtoupper($status[$demande->decision], 'UTF-8') : ""}}
                            </x-show>
                        </div>
                        <div class="w-full lg:w-2/4 pr-3 mb-2">
                            <x-show>
                                <x-slot name="label">
                                    Montant recommandé
                                </x-slot>
                                @if(!empty($demande->mtt_recommande))
                                <span class="text-orange-700">{{ App\Lib\Format::number($demande->mtt_recommande)}}</span>
                                @endif
                            </x-show>
                        </div>
                        @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>
                    <div class="flex justify-between w-full">
                        <div class="flex space-x-3 mt-3">
                            @foreach ($dossiers as $doc=>$libelle)
                                @if($doc == 'pt')
                                    <a href="{{route('cd.garantie.index', $demande->id_demande)}}" class="btn btn-cyan">Garanties</a>
                                @else
                                    <a href="{{route('cd.dossier').'/'.$doc.'/'.$demande->id_demande}}" class="btn btn-cyan">{{ucfirst($libelle)}}</a>
                                @endif
                            @endforeach
                        </div>
                        <div class="flex">
                            @if($demande->decision == 'E')
                                @if($droit_validation == '1')
                                    <div class="flex space-x-3 mt-3">
                                        <a href="#" class="btn btn-success decision" data-decision="A" data-label="Pour confirmer veuillez saisir le montant accorder">
                                            <i class="fal fa-thumbs-up mr-2"></i>
                                            Accorder
                                        </a>
                                        <a href="#" class="btn btn-warning-alt decision" data-decision="R" data-label="Pour confirmer veuillez decrire le motif de refus">
                                            <i class="fal fa-thumbs-down mr-2"></i>
                                            Refuser
                                        </a>
                                        <a href="#" class="btn btn-dark decision" data-decision="D" data-label="Pour confirmer veuillez decrire le motif de l'abandon">
                                            <i class="fal fa-hand-paper mr-2"></i>
                                            Abandonner
                                        </a>
                                    </div>
                                @endif
                            @endif
                        </div>
                    </div>

            </div>
            <form id="frmDeleteDecision" method="post" action="{{route('cd.demande.init', $demande->id_demande)}}">
                @csrf
            </form>
            <div id="decisionModal" class="modal hidden justify-center fixed w-full h-full top-0 left-0 z-50 bg-black bg-opacity-80">
                <div class="w-2/5 pt-56">
                    <div class="rounded-lg border border-gray-300 bg-white py-3 text-gray-700">
                        <div id="msgTitle" class="border-b border-gray-300 px-5 font-semibold">
                            Demande de prêt
                        </div>
                        <div class="flex items-center py-3 px-5">
                            <form id="frmDemande" method="post" action="{{route('cd.decision.store', $demande->id_demande)}}" class="flex w-full">
                                @csrf
                                <input type="hidden" name="decisionId" id="decisionId">
                                <div class="flex flex-col w-full">
                                    <p id="motifLabel"></p>
                                    <div>
                                        <input type="text" name="motif" class="form-control">
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="flex items-center justify-end space-x-4 border-t border-gray-300 mt-5 px-5 pt-2">
                            <button id="decisionYves" class="btn btn-warning">
                                <i class="fal fa-check mr-1"></i>
                                Valider
                            </button>
                            <button id="decisionNo" class="btn btn-dark btn-modal-close">
                                <i class="fal fa-check mr-2"></i>
                                Annuler
                            </button>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <x-tiers-modal :tiers="$tiers"></x-tiers-modal>

    <x-msg-box>
        <x-slot name="title">Demande de prêt</x-slot>
        Voulez vous réellement revenir sur votre décision ?
    </x-msg-box>

@endsection


@section('script')

    <script>
        document.getElementById('btnDeleteDecision').addEventListener('click', function(e){
            e.preventDefault();
            Modal('#MsgBox', 'show');
        })

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

        let decisions = document.querySelectorAll(".decision");

        for(let i = 0; i < decisions.length; i++){

            decisions[i].addEventListener("click", function(e){

                e.preventDefault();

                let decision = this.getAttribute('data-decision');

                document.getElementById('decisionId').setAttribute('value', decision);
                document.getElementById('motifLabel').innerText = this.getAttribute('data-label');

                Modal("#decisionModal", "show");

            });

        }

        document.getElementById("decisionYves").addEventListener("click", function(e){
            e.preventDefault();
            document.getElementById("frmDemande").submit();
        });

    </script>

@endsection