@extends('layouts.app')

@section('content')
    <div class="card w-3/5">
        <div class="card-head">
            <div class="font-semibold text-cyan-900 uppercase">
                <i class="fal fa-file-signature mr-1"></i>
                Demande de demission <span class="text-orange-500">{{$demission->id_tiers}}</span>
            </div>
            <div class="space-x-2 text-gray-500">
                <a href="{{route('tiers.dems.index')}}" class="hover:text-orange-500">
                    <i class="fal fa-list fa-lg"></i>
                </a>
            </div>
        </div>
        <div class="card-body">
            <x-alert/>
            <div class="flex flex-col">
                <x-tiers-bannier :tiers="$demission"></x-tiers-head>

                <div class="card-content">
                    <div class="flex bg-gray-500 bg-opacity-20 pl-5 py-1 mb-3 text-gray-500 font-semibold">
                        Description de la démission
                    </div>
                    <div class="flex flex-col md:w-full lg:flex-row  lg:flex-wrap space-y-3">
                        <div class="w-full">
                            <x-show>
                                <x-slot name="label">Date de démission</x-slot>
                                {{(new DateTime($demission->date_demande))->format(config('myahs')['date_format'])}}
                            </x-show>
                        </div>
                        <div class="w-full">
                            @php
                                $demissions = App\Lib\Referentiel::demission();
                                $motif = key_exists($demission->motif, $demissions) ? $demissions[$demission->motif] : "";
                            @endphp
                            <x-show>
                                <x-slot name="label">Motif de démission</x-slot>
                                <span class="uppercase">{{$motif}}</span>
                            </x-show>
                        </div>
                        <div class="w-full">
                            <x-show>
                                <x-slot name="label">Description</x-slot>
                                {{$demission->description_motif}}
                            </x-show>
                        </div>
                    </div>
                </div>

                @if($demission->decision == 'E')
                    <div class="mt-3">
                        @if($droit == '1')
                            <button id="btnAccorder" class="btn btn-warning btn-action mr-2">
                                <i class="fal fa-check mr-2"></i>
                                Accorder
                            </button>
                            <button id="btnRefuser" class="btn btn-dark btn-action">
                                <i class="fal fa-thumbs-down mr-2"></i>
                                Refuser
                            </button>
                        @else
                            <button id="btnAnnuler" class="btn btn-dark  btn-action">
                                <i class="fal fa-times mr-2"></i>
                                Annuler la demission
                            </button>
                        @endif
                    </div>
                @endif

            </div>
        </div>
    </div>

    @if(!empty($demission->id_tiers))
        <x-tiers-modal :tiers="$demission" :photo="$photo" :signature="$signature"></x-tiers-modal>
    @endif

    <x-form-modal>

        <x-slot name="title">Validation de demission</x-slot>
        <div id="msgText" class="font-semibold"></div>
        <form id="frmDemission" method="post" action="{{route('tiers.dems.decision')}}">
            @csrf
            <input type="hidden" name="demandeId" value="{{$demission->id_demande}}">
            <input type="hidden" name="folio" value="{{$demission->id_tiers}}">
            <input type="hidden" name="decision" id="inputDecision">
        </form>
        <x-slot name="footer">
            <div class="flex justify-center space-x-5">
                <button id="btnYes" class="btn btn-warning">
                    <i class="fal fa-check mr-1"></i>
                    Oui
                </button>
                <button id="btnNo" class="btn btn-dark btn-modal-close">
                    <i class="fal fa-times mr-2"></i>
                    Non
                </button>
            </div>
        </x-slot>

    </x-form-modal>

@endsection

@section('script')

    <script>

        let btnAccorder = document.getElementById("btnAccorder");
        let btnRefuser = document.getElementById("btnRefuser");
        let btnAnnuler = document.getElementById("btnAnnuler");

        if(btnAccorder != undefined){
            btnAccorder.addEventListener("click", function(e){
                e.preventDefault();
                document.getElementById("inputDecision").setAttribute("value", 'O')
                document.getElementById("msgText").textContent = 'Voulez vous réelement accorder la démission de ce membre ?'
                Modal("#frmModal", "show");
            })
        }

        if(btnRefuser != undefined){
            btnRefuser.addEventListener("click", function(e){
                e.preventDefault();
                document.getElementById("inputDecision").setAttribute("value", 'N')
                document.getElementById("msgText").textContent = 'Voulez vous réelement refuser la démission de ce membre ?'
                Modal("#frmModal", "show");
            })
        }

        if(btnAnnuler != undefined){
            btnAnnuler.addEventListener("click", function(e){
                e.preventDefault();
                document.getElementById("inputDecision").setAttribute("value", 'D')
                document.getElementById("frmDemission").setAttribute("action", '{{route("tiers.dems.destroy")}}')
                document.getElementById("msgText").textContent = 'Voulez vous réelement annuler cette demande de démission ?'
                Modal("#frmModal", "show");
            })
        }

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

        // document.querySelector(".btn-action").addEventListener("click", function(e){
        //     e.preventDefault();
        //     Modal("#frmModal", "show");
        // })

    </script>

@endsection