@extends('main.main_back')
@section('style-up')
    <link href="{{ asset('vendor/select2/css/select2.min.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('css/jquery-ui.min.css') }}">
@endsection
@section('title')
    Ajouter un Prêt
@endsection

@section('pagination')
    Prêts
@endsection
@php
    $trajet_price = 0;
    $bus_place = 0;
    $bus_place_passengers = 0;
    $date = request()->input('date');
    $travel_get = request()->input('travel');
@endphp
@section('content')
<div class="row page-titles">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('get.backend.dashboard') }}">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="javascript:void(0)">Comptabilité</a></li>
        <li class="breadcrumb-item active"><a href="javascript:void(0)">Ajouter Un prêt</a></li>
    </ol>
</div>
<div class="d-flex align-items-center mb-4 flex-wrap justify-content-between">
    <a href="javascript:voiud(0);">
        <div class="card p-3 me-2 mb-0 filter">
            <i class="flaticon-381-calculator-1"></i>
        </div>
    </a>
    <a class="btn btn-primary btn-sm" href="{{ route('get.backend.list.loan') }}">
        Liste
    </a>
</div>
<!-- row -->
<div class="row">
    <!-- --column-- -->
    <div class="col-xl-12 col-lg-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title"><span id="title_content">Accorder</span> Un prêt</h4>
                <div class="">
                    <button class="btn btn-primary btn-sm active btn_add_loan">
                        Accorder
                    </button>
                    <button class="btn btn-primary btn-sm btn_add_loan">
                        Recouvrir
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="basic-form content_loan" id="content_loan">
                    <form id="add_loan" method="post" action="{{ route('post.backend.add.loan') }}" onsubmit="SendDataAnimation(event,'add_loan')">
                        <div class="row">
                            <div class="col-sm-6 mb-3">
                                <label class="form-label">Employe (Nom ou No Téléphone ou matricule)</label>
                                <input type="text" class="form-control" id="name" name="name" placeholder="MMMR">
                                <input type="hidden" class="form-control" id="user" name="user">
                            </div>
                            <div class="col-sm-6 mb-3">
                                <label class="form-label">Raison</label>
                                <input type="text" class="form-control" id="reason" name="reason" placeholder="AIDE MALADIE">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3 mb-3">
                                <label class="form-label">Montant</label>
                                <input type="number" class="form-control" id="amount" name="amount" placeholder="30000">
                            </div>
                            <div class="col-sm-3 mb-3">
                                <label class="form-label">Lié au salaire</label>
                                <div class="d-flex align-items-center justify-content-between pt-3">
                                    <div class="form-check custom-checkbox mb-3">
                                        <input type="radio" class="form-check-input" value="1" id="customCheckBox3" name="status" checked>
                                        <label class="form-check-label" for="customCheckBox3">OUI</label>
                                    </div>
                                    <div class="form-check custom-checkbox mb-3">
                                        <input type="radio" class="form-check-input" value="0" id="customCheckBox4" name="status">
                                        <label class="form-check-label" for="customCheckBox4">NON</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-3 mb-3" id="destination_second">
                                <label class="form-label">Nbre de Tranche</label>
                                <input type="number" class="form-control" id="installment" name="installment" placeholder="4">
                            </div>
                            <div class="col-sm-3 mb-3" id="destination_second">
                                <label class="form-label">Date Initiale</label>
                                <input type="date" class="form-control" id="start_date" name="start_date">
                            </div>
                        </div>
                        <div class="col-sm-12 mb-4">
                            <button type="submit" class="btn btn-primary btn_submit mt-3">Enregistrer</button>
                        </div>
                    </form>
                </div>
                <div class="basic-form content_payment" id="content_payment" style="display: none">
                    <form id="add_payment_loan" method="post" action="{{ route('post.backend.add.payment.loan') }}" onsubmit="SendDataAnimation(event,'add_payment_loan')">
                        <div class="row">
                            <div class="col-sm-12 mb-3">
                                <label class="form-label">Employe (Nom ou No Téléphone ou matricule)</label>
                                <input type="text" class="form-control" id="name_payment" name="name_payment" placeholder="MMMR">
                                <input type="hidden" class="form-control" id="user_payment" name="user_payment">
                            </div>
                            <div class="col-sm-6 mb-3">
                                <label class="form-label">Motif Prets & Reference</label>
                                <select class="form-control select2" name="loan_id" id="select_reason">
                                    <option value="">Prets</option>
                                </select>
                            </div>
                            <div class="col-sm-6 mb-3">
                                <label class="form-label">Montant</label>
                                <input type="number" class="form-control" id="amount_payment" name="amount_payment" placeholder="30000">
                            </div>
                        </div>
                        <div class="col-sm-12 mb-4">
                            <button type="submit" class="btn btn-primary btn_submit mt-3">Enregistrer</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!----/column-- -->
</div>
<!-- /row -->
@endsection
@section("script-up")
<script src="{{ asset('vendor/select2/js/select2.full.min.js') }}"></script>
<script src="{{ asset('js/jquery-ui.min.js') }}"></script>
@endsection
@section("script-down")
<script>
    $(document).ready(function(){
        $('.btn_add_loan').click(function() {
            var isActive = $(this).hasClass('active');
            $('.btn_add_loan').removeClass('active');
            if (!isActive) {
                $(this).addClass('active');
            }

            if ($(this).text().trim() === 'Accorder') {
                $('#content_loan').show();
                $('#content_payment').hide();
                $('#title_content').text('Accorder');
            } else {
                $('#content_loan').hide();
                $('#content_payment').show();
                $('#title_content').text('Recouvrir');
            }
        });
        var path = "{{ route('get.backend.search.employee.by.name') }}";
            //alert(path)
        $("#name").autocomplete({
            source: function (request, response) {
                //console.log(request.term);
                $.ajax({
                    url: path,
                    type: "GET",
                    dataType: "json",
                    data: {
                        user: request.term,
                    },
                    success: function (data) {
                        response(data);
                        //alert(data)
                    },
                });
            },
            select: function (event, ui) {
                var content = ui.item.label;
                content = content.split("/");
                $("#name").val(content[1].trim());
                $("#user").val(content[3].trim());
                console.log(ui.item);
                return false;
            },
        });
        $("#name_payment").autocomplete({
            source: function (request, response) {
                //console.log(request.term);
                $.ajax({
                    url: path,
                    type: "GET",
                    dataType: "json",
                    data: {
                        user: request.term,
                    },
                    success: function (data) {
                        response(data);
                        //alert(data)
                    },
                });
            },
            select: function (event, ui) {
                var content = ui.item.label;
                content = content.split("/");
                var user_id = content[3].trim();
                $("#name_payment").val(content[1].trim());
                $("#user_payment").val(user_id);
                console.log(ui.item);
                getReason(user_id);
                return false;
            },
        });

        function getReason(value){
            let selectBox = $('#select_reason');
            selectBox.empty();
            $.ajax({
                url: "{{ route('get.backend.all.loan.employee', ':id') }}".replace(':id', value),
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    if(data.code == 200){
                        $.each(data.data, function(key, value) {
                            selectBox.append('<option value="' + value.id + '">' + value.reference +' / '+value.reason +' / '+value.balance+'</option>');
                        });
                    }else{
                        selectBox.append("<option value=''>Aucun pret pour cet employé</option>");
                    }

                },
                error: function(xhr, status, error) {
                    selectBox.empty().append("<option value=''>Erreur lors du chargement des données</option>");
                    console.error('Erreur lors du chargement des données :', error);
                }
            });
        }
    });
</script>
@endsection