@extends('layouts.app')

@section('content')
    <div class="card w-4/5">
        <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
            </div>
            <div class="space-x-2 text-gray-600">
                <a href="{{route('cd.dd.new.index', ['list'=>'on'])}}" class="hover:text-orange-500" title="Liste des demandes">
                    <i class="fal fa-list fa-lg"></i>
                </a>
                <a href="{{route('cd.dd.new.edit', $demande->id_demande)}}" class="hover:text-orange-500">
                    <i class="fal fa-edit fa-lg"></i>
                </a>
                <a href="{{route('cd.contrat.create', $demande->id_demande)}}" class="hover:text-orange-500" title="Créer un contrat">
                    <i class="fal fa-file-certificate 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">
                    <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.status_demande') @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))
                                {{ App\Lib\Format::number($demande->mtt_recommande)}}
                                @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>

                @if($demande->decision == 'N')
                    @if($droit_validation == '1')
                        <div class="flex space-x-4 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 la demande
                            </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 la demande
                            </a>
                            <a href="#" class="btn btn-warning 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 la demande
                            </a>
                        </div>
                    @endif
                @endif

                @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 mt-3">
                        Ce prêt a été refusé ou abandonné à cause de : <span class="font-bold">{{$demande->motif}}</span>
                    </div>
                @endif

            </div>
        </div>
    </div>
    <div id="MsgBox" 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.demande.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="btnYes" class="btn btn-warning">
                        <i class="fal fa-check mr-1"></i>
                        Valider
                    </button>
                    <button id="btnNo" class="btn btn-dark btn-modal-close">
                        <i class="fal fa-check mr-2"></i>
                        Annuler
                    </button>
                </div>
            </div>
        </div>
    </div>

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

@endsection

@section('script')

    <script>

        let imgTiers =  document.getElementById('imgIdentite');

        if(imgTiers){
            imgTiers.addEventListener("click", function(e){
            Modal("#photoTiers", "show");
            })
        };

        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("#MsgBox", "show");

            });

        }

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

        document.getElementById('btnEdit').addEventListener('click', function(e){
            Modal('#frmModal', 'show');
            document.getElementById('agentName').textContent = this.getAttribute('data-name');
        });
        document.getElementById('btnSave').addEventListener('click', function(e){
            document.getElementById('frmAgent').submit();
        });
    </script>

@endsection