@extends('admin')

@section('title')
    NotaireApp - Liste Des Dépenses
@endsection

@section('menu-title')
    <!-- BEGIN: Breadcrumb -->
    <div class="-intro-x breadcrumb mr-auto hidden sm:flex"> <a href="{{ url('/admin') }}" class="">NotairesApp</a> <i
            data-feather="chevron-right" class="breadcrumb__icon"></i> <a href="#/" class="breadcrumb--active">Liste des
            Dépenses </a> </div>
    <!-- END: Breadcrumb -->
@endsection

@section('content')
    <h2 class="intro-y text-lg font-medium mt-10">

        Liste des Dépenses du dossier N°     </h2>

    <div class="">
        <div class="intro-y col-span-12 flex flex-wrap sm:flex-no-wrap items-center mt-2">
            <a class="button text-white bg-theme-1 shadow-md mr-2"
                href="{{ url('/admin/charge/create/' . $dossier->id) }}">Ajouter Nouveau Charge</a>
            <input type="hidden" value="{{ $dossier->id }}" class="dos_key">
            <div class="hidden md:block mx-auto text-gray-600" style="visibility: hidden;">Showing 1 to 10 of 150 entries
            </div>
            {{-- <div class="w-full sm:w-auto mt-3 sm:mt-0 sm:ml-auto md:ml-0">
            <div class="w-56 relative text-gray-700 dark:text-gray-300">
                <input type="text" class="input w-56 box pr-10 placeholder-theme-13 find" placeholder="Recherche...">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search w-4 h-4 absolute my-auto inset-y-0 mr-3 right-0"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg> 
            </div>
        </div> --}}
        </div>
        <!-- BEGIN: Data List -->
        <div class="intro-y box px-5 py-8 mt-5">
            <div class="intro-y w-full overflow-x-scroll overflow-y-hidden">

                <table class="table table-report -mt-2 border-none" style="border-style: none !important;" id="table_id">
                    <thead style="border-style: none !important;">
                        <tr class="shadow-lg">
                            <th class="whitespace-no-wrap" style="border-style: none !important;">NUM DOSSIER</th>
                            <th class="text-center whitespace-no-wrap" style="border-style: none !important;">MODE REGLEMENT
                            </th>
                            {{-- <th class="text-center whitespace-no-wrap" style="border-style: none !important;">NUMERO</th> --}}
                            <th class="text-center whitespace-no-wrap" style="border-style: none !important;">DESIGNATION
                            </th>
                            <th class="text-center whitespace-no-wrap" style="border-style: none !important;">DATE</th>
                            <th class="text-center whitespace-no-wrap" style="border-style: none !important;">ACTIONS</th>
                        </tr>

                    </thead>
                    <tbody id="tbd">
                        @foreach ($charges as $charge)
                            <tr class="intro-x shadow-md rounded-lg intro-y " style="height: 68px;">
                                <td class="text-center">{{ $charge->numdossier }}</td>
                                <td class="text-center">{{ !empty($charge->mode_reg) ? $charge->mode_reg : 'Non précisé' }}
                                </td>
                                {{-- <td class="text-center">{{ $charge->num_cheque }}</td> --}}
                                <td class="text-center">{{ $charge->designation }}</td>

                                <td class="text-center">{{ $charge->date_charge }}</td>
                                <td class="table-report__action w-56">
                                    <div class="flex justify-center items-center">
                                        <a class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
                                            href="{{ URL::to('/admin/charge/edit/' . $charge->id) }}"> <svg
                                                xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                                                stroke-linecap="round" stroke-linejoin="round"
                                                class="feather feather-check-square w-4 h-4 mr-1">
                                                <polyline points="9 11 12 14 22 4"></polyline>
                                                <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                                            </svg> Modifier </a>
                                        <a class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
                                            href="javascript:;" data-toggle="modal"
                                            data-target="#delete-confirmation-modal{{ $charge->id }}"> <svg
                                                xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                                                stroke-linecap="round" stroke-linejoin="round"
                                                class="feather feather-trash-2 w-4 h-4 mr-1">
                                                <polyline points="3 6 5 6 21 6"></polyline>
                                                <path
                                                    d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
                                                </path>
                                                <line x1="10" y1="11" x2="10" y2="17"></line>
                                                <line x1="14" y1="11" x2="14" y2="17"></line>
                                            </svg> Supprimer </a>
                                    </div>
                                </td>
                            </tr>

                            <!-- BEGIN: Delete Confirmation Modal -->
                            <div class="modal" id="delete-confirmation-modal{{ $charge->id }}">
                                <div class="modal__content">
                                    <div class="p-5 text-center">
                                        <i data-feather="x-circle" class="w-16 h-16 text-theme-6 mx-auto mt-3"></i>
                                        <div class="text-3xl mt-5">Êtes-vous sûr? </div>
                                        <div class="text-gray-600 mt-2">Voulez-vous vraiment supprimer ces enregistrements?
                                            Ce processus ne peut pas être annulé.</div>
                                    </div>
                                    <div class="px-5 pb-8 text-center">
                                        <button type="button" data-dismiss="modal"
                                            class="button w-24 border text-gray-700 mr-1">Annuler</button>
                                        <a class="button w-24 bg-theme-6 text-white"
                                            href="{{ URL::to('/admin/charge/delete/' . $charge->id) }}">Supprimer</a>
                                    </div>
                                </div>
                            </div>
                            <!-- END: Delete Confirmation Modal -->
                        @endforeach

                    </tbody>
                </table>
            </div>
        </div>
        <!-- END: Data List -->



    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $("#bord").attr('class', 'side-menu');
            $("#client").attr('class', 'side-menu side-menu');
            $('#propr').attr('class', 'side-menu side-menu');
            $('#dossier').attr('class', 'side-menu side-menu');
            $('#charge').attr('class', 'side-menu side-menu--active');
        });
    </script>
    <script>
        $(".find").bind("change paste keyup", function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            if ($(this).val().length >= 3) {
                $.ajax({
                    data: {
                        key: $(this).val(),
                        dos_key: $('.dos_key').val()
                    },
                    type: 'post',
                    dataType: 'json',
                    url: "{{ route('search.charge') }}",
                    success: function(data) {
                        $("#tbd").html("");
                        console.log(data);
                        $.each(data, function(index, o) {
                            id = o.id;

                            ur1l = "{{ route('admin.editcharge', '+id+') }}";
                            url = ur1l.replace("id", id);
                            num_cheque = "";
                            if (o.num_cheque != null) {
                                num_cheque = o.num_cheque;
                            }

                            $("#tbd").append(
                                "<tr>" +
                                "<td class='text-center'>" + o.num_dossier + "</td>" +
                                "<td class='text-center'>" + o.mode_reg + "</td>" +
                                "<td class='text-center'>" + num_cheque + "</td>" +
                                "<td class='text-center'>" + o.designation + "</td>" +
                                "<td class='text-center'>" + o.date_charge + "</td>" +
                                "<td class='table-report__action w-56 res hidden'>" +
                                "<div class='flex justify-center items-center'>" +
                                "<a class='flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-300 rounded-md ' href=" +
                                url + ">" +
                                "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check-square w-4 h-4 '><polyline points='9 11 12 14 22 4'></polyline><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'></path></svg> Modifier" +
                                "</a>" +
                                "<a class='flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-300 rounded-md text-theme-6' href='javascript:;' data-toggle='modal' data-target='#delete-confirmation-modal" +
                                id + "'>" +
                                "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' class='feather feather-trash-2 w-4 h-4 '><polyline points='3 6 5 6 21 6'></polyline><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'></path><line x1='10' y1='11' x2='10' y2='17'></line><line x1='14' y1='11' x2='14' y2='17'></line></svg>Supprimer" +
                                "</a>" +
                                "</div>" +
                                "</td>" +
                                "</tr>"
                            );
                        });
                        $.ajax({
                            url: "{{ route('admin.RoleS.charge') }}",
                            dataType: 'json',
                            type: 'post',
                            success: function(data) {
                                if (data.addcharge == 1) {
                                    $('.res').show();
                                }
                            },
                            error: function(error) {
                                console.log(error);
                            },
                        });
                    },
                    error: function(error) {
                        console.log(error);
                    },
                });
            } else if ($(this).val().length == 0) {
                $.ajax({
                    data: {
                        key: $(this).val(),
                        dos_key: $('.dos_key').val()
                    },
                    type: 'post',
                    dataType: 'json',
                    url: "{{ route('search.charge') }}",
                    success: function(data) {
                        $("#tbd").html("");
                        $.each(data, function(index, o) {
                            id = o.id;

                            ur1l = "{{ route('admin.editcharge', '+id+') }}";
                            url = ur1l.replace("id", id);
                            num_cheque = "";
                            if (o.num_cheque != null) {
                                num_cheque = o.num_cheque;
                            }
                            $("#tbd").append(
                                "<tr>" +
                                "<td class='text-center'>" + o.num_dossier + "</td>" +
                                "<td class='text-center'>" + o.mode_reg + "</td>" +
                                "<td class='text-center'>" + num_cheque + "</td>" +
                                "<td class='text-center'>" + o.designation + "</td>" +
                                "<td class='text-center'>" + o.date_charge + "</td>" +
                                "<td class='table-report__action w-56 res hidden'>" +
                                "<div class='flex justify-center items-center'>" +
                                "<a class='flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-300 rounded-md ' href=" +
                                url + ">" +
                                "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check-square w-4 h-4 '><polyline points='9 11 12 14 22 4'></polyline><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'></path></svg> Modifier" +
                                "</a>" +
                                "<a class='flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-300 rounded-md text-theme-6' href='javascript:;' data-toggle='modal' data-target='#delete-confirmation-modal" +
                                id + "'>" +
                                "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' class='feather feather-trash-2 w-4 h-4 '><polyline points='3 6 5 6 21 6'></polyline><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'></path><line x1='10' y1='11' x2='10' y2='17'></line><line x1='14' y1='11' x2='14' y2='17'></line></svg>Supprimer" +
                                "</a>" +
                                "</div>" +
                                "</td>" +
                                "</tr>"
                            );
                        });
                        $.ajax({
                            url: "{{ route('admin.RoleS.charge') }}",
                            dataType: 'json',
                            type: 'post',
                            success: function(data) {
                                if (data.addcharge == 1) {
                                    $('.res').show();
                                }
                            },
                            error: function(error) {
                                console.log(error);
                            },
                        });
                    },
                    error: function(error) {
                        console.log(error);
                    },
                });
            }

        });
    </script>
@endsection