@extends('layouts.app')

@php

    $capital_repayment = !empty($next_loan_repayment->capital) ? $next_loan_repayment->capital : 0;
    $interet_repayment = !empty($next_loan_repayment->interet) ? $next_loan_repayment->interet : 0;
    $penalite_repayment = !empty($next_loan_repayment->penalite) ? ceil($next_loan_repayment->penalite) : 0;

@endphp

@section('content')
    <div class="card w-4/5">
        <div class="card-head">
            <div class="font-semibold text-cyan-900 uppercase">
                <i class="fal fa-cash-register mr-2"></i>
                REMBOURSEMENT
            </div>
            <div class="space-x-2">
                {{-- <a href="{{$url_oper}}" class="search" title="Changer le mode de remboursement">
                    <i class="fal fa-exchange"></i>
                </a> --}}
            </div>
        </div>
        <div class="card-body">
            <x-alert/>

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

            <div class="card-content">
                <div class="bg-gray-400 px-5 py-1 text-gray-200 font-bold">
                    Remboursement
                </div>
                <div class="pt-5">
                    <form id="frmCaisse" method="post" action="{{route('gt.credit.store', $contrat->id_pret)}}">
                        @csrf
                        <input type="hidden" name="pretId" value="{{$contrat->id_pret}}">
                        <input type="hidden" name="modeSaisie" value="2">
                        <input type="hidden" name="mttMininum" value="0">
                        <div class="space-y-3">
                            <div>
                                <div class="text-sm text-gray-500">
                                    N° pièce
                                </div>
                                <div>
                                    <input type="text" name="piece" value="{{$operation->num_piece}}" class="form-control" required>
                                </div>
                            </div>
                            <div>
                                <div class="text-sm text-gray-500">
                                    Capital
                                </div>
                                <div>
                                    <input type="text" name="capital" value="{{$operation->credit}}" class="form-control" required>
                                </div>
                            </div>
                            <div>
                                <div class="text-sm text-gray-500">
                                    Intérêt
                                </div>
                                <div>
                                    <input type="text" name="interet" value="{{$operation->interet}}" class="form-control" required>
                                </div>
                            </div>
                            <div>
                                <div class="text-sm text-gray-500">
                                    pénalité
                                </div>
                                <div>
                                    <input type="text" name="penalite" value="{{$operation->penalite}}" class="form-control" required>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="py-2">
                {{-- <button class="msg-box-show btn btn-warning">
                    <i class="fal fa-check mr-1"></i>
                    Enregistrer
                </button> --}}

                <button id = "btnDelete" data-url="{{route('gt.credit.destroy', App\Lib\CryptId::crypt($operation->id_oper))}}" class="inline-block btn btn-dark">
                    <i class="fal fa-times mr-1"></i>
                    Annuler le remboursement
                </button>
            </div>
        </div>
    </div>
    <x-tiers-modal :tiers="$tiers"></x-tiers-modal>
    <x-msg-box>
        <x-slot name="title">
            Opération
        </x-slot>
        <div>
            <div class="font-bold text-lg">Statut de l'opération</div>

        </div>
        <div class="mt-10">
            Voulez vous réellement valider cette opération ?
        </div>
    </x-msg-box>
@endsection

@section('script')
<script>
    document.getElementById("frmCaisse").addEventListener("submit", function(e){
        e.preventDefault();
    });
    // document.querySelector(".msg-box-show").addEventListener("click", function(e){
    //     e.preventDefault();
    //     Modal("#MsgBox", "show");
    // })
    document.getElementById("btnYes").addEventListener("click", function(e){
        e.preventDefault();
        document.getElementById("frmCaisse").submit();
    });

    let btnDelete = document.getElementById('btnDelete');
    if(btnDelete !== undefined){
        btnDelete.addEventListener('click', function(e){
            e.preventDefault()
            Modal("#MsgBox", "show");
            let getUrl = btnDelete.getAttribute('data-url');
            document.getElementById('frmCaisse').setAttribute('action', getUrl);
        })
    }

</script>
@endsection