@extends('main.main_back')
@section('style-up')
@endsection
@section('title')
    Ajout des dépenses du voyage No {{ $code }}
@endsection

@section('pagination')
    Voyage No {{ $code }}
@endsection
@php
    $value_id = $item->id;
    $ref = $item->tra_ref;
    $bus = isset($item->bus) ? $item->bus->bus_number : "";
    $bus_place = isset($item->bus) ? $item->bus->bus_place : "";
    $trajet_start = isset($item->trajet) ? $item->trajet->tr_place_start : "";
    $trajet_end = isset($item->trajet) ? $item->trajet->tr_place_end : "";
    $trajet = $trajet_start. " - ".$trajet_end;

@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="{{ route('get.backend.seller.ticket') }}">Guichet</a></li>
        <li class="breadcrumb-item"><a href="{{ route('get.backend.list.bordereau') }}">Liste des Bordereaux</a></li>
        <li class="breadcrumb-item active"><a href="javascript:void(0)">Voyage No {{ $ref }}</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-transfer"></i>
        </div>
    </a>
    <a class="btn btn-primary btn-sm active" href="javascript:void(0)">
        Voyage No {{ $ref }}
    </a>
</div>
<!-- row -->


<!-- row -->
<div class="row">
    <!-- --column-- -->
    <div class="col-xl-12 col-lg-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Enregistrements des informations</h4>
            </div>
            <div class="card-body">
                <div class="basic-form">
                    <form id="add_bordereau" method="post" action="{{ route('post.backend.add.bordereau',$value_id) }}" onsubmit="SendDataAnimation(event,'add_bordereau')">
                        <div class="row">
                            <div class="col-sm-4 mb-3">
                                <div class="d-flex align-items-center justify-content-between pt-3">
                                    <div class="form-check custom-checkbox mb-3">
                                        <input type="checkbox" class="form-check-input" value="CARBURANT" id="customCheckBox1" name="fuel" checked>
                                        <label class="form-check-label" for="customCheckBox1">CARBURANT</label>
                                    </div>
                                    <div class="form-check custom-checkbox mb-3">
                                        <label class="form-label">Montant</label>
                                        <input type="number" class="form-control" name="amount_fuel" placeholder="55000">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4 mb-3">
                                <div class="d-flex align-items-center justify-content-between pt-3">
                                    <div class="form-check custom-checkbox mb-3">
                                        <input type="checkbox" class="form-check-input" value="PEAGE" id="customCheckBox2" name="peage" checked>
                                        <label class="form-check-label" for="customCheckBox2">PEAGE</label>
                                    </div>
                                    <div class="form-check custom-checkbox mb-3">
                                        <label class="form-label">Montant</label>
                                        <input type="number" class="form-control" name="amount_peage" placeholder="2000">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4 mb-3">
                                <div class="d-flex align-items-center justify-content-between pt-3">
                                    <div class="form-check custom-checkbox mb-3">
                                        <input type="checkbox" class="form-check-input" value="RATION" id="customCheckBox3" name="ration">
                                        <label class="form-check-label" for="customCheckBox3">RATION</label>
                                    </div>
                                    <div class="form-check custom-checkbox mb-3">
                                        <label class="form-label">Montant</label>
                                        <input type="number" class="form-control" name="amount_ration" placeholder="2000">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 mb-3">
                                <div class="d-flex align-items-center justify-content-between pt-3">
                                    <div class="col-auto form-check custom-checkbox mb-3">
                                        <input type="checkbox" class="form-check-input" value="AUTRES" id="customCheckBox4" name="other">
                                        <label class="form-check-label" for="customCheckBox4">AUTRES</label>
                                    </div>
                                    <div class="col-sm-10" style="margin-top: -1em;">
                                        <a href="javascript:void(0)" class="badge badge-primary" id="add_documents" style="display: none">Ajouter</a>
                                    </div>
                                </div>
                            </div>
                            <div id="container_all_doc" style="display: none;">
                                <div class="row container_documents" id="container_documents">
                                    <div class="col-sm-3 mb-3">
                                        <label class="form-label">Libellé</label>
                                        <input type="text" class="form-control" name="label[]" id="label" placeholder="RATION PASSAGERS">
                                    </div>
                                    <div class="col-sm-3 mb-3">
                                        <label class="form-label">Montant</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">Fichier</label>
                                        <input type="file" class="form-control" name="file[]" id="file" accept=".pdf,.png,.jpeg,.jpg,.ico,.webp">
                                    </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>
                            </div>
                            <div class="col-sm-12 mb-4">
                                <button type="submit" class="btn btn-primary btn_submit mt-3">Enregistrer</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!----/column-- -->
</div>

@endsection
@section("script-up")
@endsection
@section("script-down")
<script>
    $(document).ready(function(){
        $('#customCheckBox4').change(function() {
            if(this.checked) {
                $('#container_all_doc').show();
                $('#add_documents').show();
            } else {
                $('#container_all_doc').hide();
                $('#add_documents').hide();
            }
        });
    });
</script>
<script>
    $(document).ready(function () {
        const containerLessonsAll = $('#container_all_doc');
        const containerLesson = $('.container_documents').last().clone();

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

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

            toggleRemoveButtons();
            return false;
        });

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

        toggleRemoveButtons();
    });
</script>
@endsection