@extends('main.main_back')
@section('style-up')
    <link href="{{ asset('vendor/select2/css/select2.min.css') }}" rel="stylesheet">
@endsection
@section('title')
    Ajouter une dépense
@endsection

@section('pagination')
    Dépenses
@endsection
@php
    $trajet_price = 0;
    $mode = request()->input('mode');
@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>
        @if(isset($mode) && in_array($mode, ['JOURNALIERE','HEBDOMADAIRE']))
            <li class="breadcrumb-item"><a href="{{ route('get.backend.add.expense') }}">Mode de dépense</a></li>
        @endif
        <li class="breadcrumb-item active"><a href="javascript:void(0)">Ajouter Une Dépense</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.expense') }}">
        Liste
    </a>
</div>
<div class="row">
    <div class="col-xl-12 col-lg-12">
        @if(empty($mode))
        <div class="card">
            <div class="card-body">
                <div class="basic-form content_payment">
                    <form id="add_expense_two" method="get">
                        <div class="row d-flex justify-content-center align-items-center">
                            <div class="col-auto mb-4">
                                <input type="submit" class="btn btn-primary btn_submit mt-3" name="mode" value="JOURNALIERE">
                            </div>
                            <div class="col-auto mb-4">
                                <input type="submit" class="btn btn-primary btn_submit mt-3" name="mode" value="HEBDOMADAIRE">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        @elseif(in_array($mode, ['JOURNALIERE','HEBDOMADAIRE']))
        <div class="card">
            <div class="card-header">
                <div class="d-flex">
                    <h4 class="card-title">{{ $mode }} : <span id="title_content">MECANIQUE</span></h4>
                    <a href="javascript:void(0)" class="badge badge-primary" style="margin-left: 2em;" id="add_documents_mecanique">Ajouter</a>
                    <a href="javascript:void(0)" class="badge badge-primary" style="margin-left: 2em;display: none;" id="add_documents_fonctionnelle">Ajouter</a>
                </div>
                <div class="">
                    <button class="btn btn-primary btn-sm active btn_add_loan">
                        MECANIQUE
                    </button>
                    <button class="btn btn-primary btn-sm btn_add_loan">
                        FONCTIONNELLE
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="basic-form content_loan" id="content_loan">
                    <form id="add_expense_one" method="post" action="{{ route('post.backend.add.expense','MECANIQUE') }}" onsubmit="SendDataAnimation(event,'add_expense_one')">
                        <div class="row" id="container_all_doc">
                            <div class="row container_documents" id="container_documents">
                                <div class="col-sm-5 mb-3">
                                    <label class="form-label">Bus</label>
                                    <select class="form-control select2" name="bus[]">
                                        <option value="">Selectionner un bus</option>
                                        @if(isset($bus) && COUNT($bus) > 0)
                                            @foreach ($bus as $key => $value)
                                                <option value="{{ $value->id }}">
                                                    {{ $value->bus_number }} / {{ $value->bus_brand }} / {{ $value->bus_model }}
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                                <div class="col-sm-5 mb-3">
                                    <label class="form-label">Libelle<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="label[]" id="label" placeholder="ACHAT DU PNEUS">
                                </div>
                                <div class="col-sm-2 mt-5">
                                    <button class="badge badge-danger btn-remove-document" id="btn-remove-document" style="display: none;">Supprimer</button>
                                </div>
                                <div class="col-sm-4 mb-3">
                                    <label class="form-label">Montant<span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" name="price[]" id="price" placeholder="25000">
                                </div>
                                <div class="col-sm-4 mb-3">
                                    <label class="form-label">Preuve (Fichier) <span class="text-danger">*</span></label>
                                    <input type="file" class="form-control" name="file[]" id="file" accept=".pdf,.png,.jpeg,.jpg,.ico,.webp">
                                </div>
                                <div class="col-sm-4 mb-3">
                                    <label class="form-label">Date (Fichier) <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control" name="date_file[]" id="date_file">
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 mb-4">
                            <input type="hidden" value="{{ $mode }}" name="mode">
                            <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_expense_two" method="post" action="{{ route('post.backend.add.expense', 'FONCTIONNELLE') }}" onsubmit="SendDataAnimation(event,'add_expense_two')">
                        <div class="row" id="container_all_doc_two">
                            <div class="row container_documents_two" id="container_documents_two">
                                <div class="col-sm-5 mb-3">
                                    <label class="form-label">Libelle<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="label[]" id="label" placeholder="ACHAT DU MATERIEL DE BUREAU">
                                </div>
                                <div class="col-sm-5 mb-3">
                                    <label class="form-label">Montant<span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" name="price[]" id="price" placeholder="25000">
                                </div>
                                <div class="col-sm-2 mt-5">
                                    <button class="badge badge-danger btn-remove-document" id="btn-remove-document" style="display: none;">Supprimer</button>
                                </div>
                                <div class="col-sm-6 mb-3">
                                    <label class="form-label">Preuve (Fichier) <span class="text-danger">*</span></label>
                                    <input type="file" class="form-control" name="file[]" id="file" accept=".pdf,.png,.jpeg,.jpg,.ico,.webp">
                                </div>
                                <div class="col-sm-6 mb-3">
                                    <label class="form-label">Date (Fichier) <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control" name="date_file[]" id="date_file">
                                </div>

                            </div>
                        </div>
                        <div class="col-sm-12 mb-4">
                            <input type="hidden" value="{{ $mode }}" name="mode">
                            <button type="submit" class="btn btn-primary btn_submit mt-3">Enregistrer</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        @else
        <div class="card">
            <div class="card-body">
                <div class="basic-form content_payment">
                    <form id="add_expense_two" method="get">
                        <div class="row d-flex justify-content-center align-items-center">
                            <div class="col-auto mb-4">
                                <input type="submit" class="btn btn-primary btn_submit mt-3" name="mode" value="JOURNALIERE">
                            </div>
                            <div class="col-auto mb-4">
                                <input type="submit" class="btn btn-primary btn_submit mt-3" name="mode" value="HEBDOMADAIRE">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        @endif

    </div>
</div>
@endsection
@section("script-up")
    <script src="{{ asset('vendor/select2/js/select2.full.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() === 'MECANIQUE') {
                $('#content_loan').show();
                $('#content_payment').hide();
                $('#title_content').text('MECANIQUE');
                $('#add_documents_fonctionnelle').hide();
                $('#add_documents_mecanique').show();
            } else {
                $('#content_loan').hide();
                $('#content_payment').show();
                $('#title_content').text('FONCTIONNELLE');
                $('#add_documents_mecanique').hide();
                $('#add_documents_fonctionnelle').show();
            }
        });

        const containerLessonsAll = $('#container_all_doc');
        const containerLesson = $('.container_documents').last().clone();
        const containerLessonsAllTwo = $('#container_all_doc_two');
        const containerLessonTwo = $('.container_documents_two').last().clone();

        function toggleRemoveButtons(container) {
            const documents = container.find('.container_documents, .container_documents_two');
            if (documents.length > 1) {
                documents.find('.btn-remove-document').show();
            } else {
                documents.find('.btn-remove-document').hide();
            }
        }

        $('#add_documents_mecanique').click(function () {
            const newContainerLesson = containerLesson.clone();
            newContainerLesson.find('input, textarea').val('');
            containerLessonsAll.append(newContainerLesson);
            newContainerLesson.find('.select2').select2();
            newContainerLesson.find('.btn-remove-document').click(function (e) {
                e.preventDefault();
                newContainerLesson.remove();
                toggleRemoveButtons(containerLessonsAll);
            });

            toggleRemoveButtons(containerLessonsAll);
            return false;
        });

        $('#add_documents_fonctionnelle').click(function () {
            const newContainerLessonTwo = containerLessonTwo.clone();
            newContainerLessonTwo.find('input, textarea').val('');
            containerLessonsAllTwo.append(newContainerLessonTwo);
            newContainerLessonTwo.find('.btn-remove-document').click(function (e) {
                e.preventDefault();
                newContainerLessonTwo.remove();
                toggleRemoveButtons(containerLessonsAllTwo);
            });

            toggleRemoveButtons(containerLessonsAllTwo);
            return false;
        });

        $('.btn-remove-document').click(function (e) {
            e.preventDefault();
            $(this).closest('.container_documents, .container_documents_two').remove();
            toggleRemoveButtons($(this).closest('#container_all_doc, #container_all_doc_two'));
        });

        toggleRemoveButtons(containerLessonsAll);
        toggleRemoveButtons(containerLessonsAllTwo);
    });

</script>
@endsection