@extends('main.main_back')
@php
    $sum = 0;
    $bus_num = "";
    $ref = "";
    $travel_id = 0;
    if(isset($data)){
        foreach ($data as $key => $value) {
            $ref = isset($value->travel) ? $value->travel->tra_ref : "";
            $travel_id = $value->travel_id;
            $bus_num = isset($item->travel) && isset($item->travel->bus) ? $item->travel->bus->bus_number : "";
            $sum += $value->amount;
        }
    }
@endphp
@section('style-up')
@endsection
@section('title')
    Ajout d'autres dépenses du voyage No {{ $ref }}
@endsection

@section('pagination')
    Voyage No {{ $ref }}
@endsection

@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">Montant des Dépenses : {{ convert_amount_v2($sum) }}</h4>
            </div>
            <div class="card-body">
                <div class="basic-form">
                    <form id="add_expenses" method="post" action="{{ route('post.backend.add.expense.bordereau',$travel_id) }}" onsubmit="SendDataAnimation(event,'add_expenses')">
                        <div class="row">
                            <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" checked>
                                        <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">Ajouter</a>
                                    </div>
                                </div>
                            </div>
                            <div id="container_all_doc">
                                <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">
                                    </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