@extends('backend.layouts.app')
@section('title', $module_title)

@section('breadcrumb')
<ol class="breadcrumb border-0 m-0">
    <li class="breadcrumb-item"><a href="{{route("backend.$module_name.index")}}">Home</a></li>
    <li class="breadcrumb-item active">{{$module_title}}</li>
</ol>
@endsection
@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
            
<div class="flex flex-wrap md:flex-nowrap py-3 border-b">
    <div class="w-full md:w-1/3">
        <a href="{{ route("backend.$module_name.create") }}"
                                id="Tambah"
                                data-toggle="tooltip"
                                class="btn btn-dark px-4 rounded-2xl">
                                <i class="bi bi-plus"></i>@lang('Add')&nbsp;{{ $module_title }}
           </a>
    </div>
    <div class="w-full md:w-2/3  ml-auto">
        <div class="flex w-full flex-auto justify-end gap-3">
    
            <div class="w-1/3">
                <select class="form-control select2" name="parent" id="parent">
                    <option value="100" selected>--Menu Utama--</option>
                    <option value="0">--Sub Menu--</option>
                    @foreach(\Modules\Menu\Models\Menu::whereNull('parent_id')->get() as $k)
                    <option value="{{ $k->id }}" {{ old('parent') == $k->id ? 'selected' : '' }}>
                    {{ $k->name }}</option>
                    @endforeach
                </select>
            </div>
         
            <div id="buttons">
            </div>
            
        </div>
        
    </div>
    
</div>






                    <div class="table-responsive mt-1">
                        <table id="datatable" style="width: 100%" class="table table-bordered table-hover table-responsive-sm">
                            <thead>
                                <tr class="uppercase">
                                    <th style="width: 6%!important;">No</th>
                                    <th style="width: 20%!important;" class="text-center">{{ label_case('name') }}</th>
                                    <th class="text-center">{{ label_case('url') }}</th>
                                    <th class="text-center">{{ label_case('parent') }}</th>
                                    <th class="text-center">{{ label_case('order') }}</th>
                                  
                                    <th style="width: 11%!important;" class="text-center">
                                        {{ __('move') }}
                                    </th>
                                    <th style="width: 18%!important;" class="text-center">
                                        {{ __('Action') }}
                                    </th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

<x-library.datatable />
@push ('after-styles')

@endpush
@push('after-scripts')
<script type="text/javascript">
jQuery.noConflict();
(function( $ ) {
    var table = $('#datatable').DataTable({
        processing: true,
        serverSide: true,
        autoWidth: true,
        responsive: true,
        language: {
            search: "<i class='fa fa-search fa-fw'></i> Pencarian : ",
            lengthMenu: "_MENU_ &nbsp;&nbsp;Data Per Halaman ",
            info: "Menampilkan _START_ s/d _END_ dari <b>_TOTAL_ data</b>",
            infoFiltered: "(difilter dari _MAX_ total data)",
            zeroRecords: "Pencarian tidak ditemukan",
            emptyTable: "Data kosong",
            loadingRecords: "Harap Tunggu...",
            paginate: {
                previous: "Prev",
                next: "Next"
            }
        },
        order: [[0, "desc"]],
        columnDefs: [
            {
                targets: 'no-sort',
                orderable: false,
            }
        ],
        pagingType: "simple_numbers",
         ajax: {
            url: "{{ route("backend.$module_name.index_data") }}",
            data: function (d) {
                d.parent = $('#parent').val(); // Add parent value
                d.search = $('input[type="search"]').val(); // Add search value
            }
        },
        dom: 'Blfrtip',
        buttons: [
            'excel',
            'pdf',
            'print'
        ],
        columns: [
            {
                data: 'id',
                orderable: false,
                render: function (data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1; // Row index
                }
            },
             
               
                {data: 'name', name: 'name'},
                {data: 'url', name: 'url'},
                {data: 'parent_id', name: 'parent_id'},
                {data: 'order', name: 'order'},
              
                {data: 'move', name: 'move'},
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false
            }
        ]
    });

  table.buttons()
         .container()
         .appendTo("#buttons");

    $('#parent').change(function(){
        var show_id = $(this).val();
        console.log(show_id); 
        table.draw();
    });

$('#datatable').on('click', '.move-up, .move-down', function() {
    var button = $(this);
    var row = button.closest('tr');
    var direction = button.hasClass('move-up') ? 'up' : 'down';
    var currentId = row.find('.editmenu').data('id');
    var currentOrder = parseInt(row.find('.editmenu').data('order'));

    $.ajax({
        url: '{{ route("backend.$module_name.update_order") }}',
        method: 'POST',
        data: {
            id: currentId,
            order: currentOrder,
            direction: direction,
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            if (response.success) {
                table.ajax.reload(null, false); 
                toastr.success('Order berhasil diperbarui', 'Sukses');
            } else {
                toastr.error('Gagal memperbarui order', 'Error');
            }
        },
        error: function(xhr) {
            toastr.error('Terjadi kesalahan', 'Error');
            console.error(xhr.responseText);
        }
    });
});


})(jQuery);
</script>
  

<script type="text/javascript">
jQuery.noConflict();
(function( $ ) {
$(document).on('click', '#Tambah, #Show, #Edit', function(e){
         e.preventDefault();
        if($(this).attr('id') == 'Tambah')
        {
            $('.modal-dialog').addClass('modal-lg');
            $('.modal-dialog').removeClass('modal-sm');
            $('#ModalHeader').html('<i class="bi bi-grid-fill"></i> &nbspTambah {{ Label_case($module_title) }}');
        }
        if($(this).attr('id') == 'Edit')
        {
            $('.modal-dialog').addClass('modal-lg');
            $('.modal-dialog').removeClass('modal-sm');
            $('#ModalHeader').html('<i class="bi bi-grid-fill"></i> &nbsp;Edit {{ Label_case($module_title) }}');
        } 
         if($(this).attr('id') == 'Show')
        {
            $('.modal-dialog').addClass('modal-lg');
            $('.modal-dialog').removeClass('modal-sm');
            $('#ModalHeader').html('<i class="bi bi-grid-fill"></i> &nbsp;Show {{ Label_case($module_title) }}');
        }
        $('#ModalContent').load($(this).attr('href'));
        $('#ModalGue').modal('show');
    });





})(jQuery);
</script>
@endpush