@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="col-lg d-flex flex-wrap gap-2 align-items-center">
                                @if ($authorize->add == '1')
                                    <button class="btn btn-primary mb-0"
                                        onclick="window.location='{{ URL::to($url_menu . '/add') }}'">
                                        <i class="fas fa-plus me-1"></i><span class="font-weight-bold">Tambah</span>
                                    </button>
                                @endif
                                @if ($authorize->excel == '1')
                                    <button type="button" class="btn btn-secondary btn-sm mb-0 js-export-master"
                                        data-export-type="excel">
                                        <i class="fas fa-file-excel me-1 text-success"></i><span
                                            class="font-weight-bold">Excel</span>
                                    </button>
                                @endif
                                @if ($authorize->pdf == '1')
                                    <button type="button" class="btn btn-secondary btn-sm mb-0 js-export-master"
                                        data-export-type="pdf">
                                        <i class="fas fa-file-pdf me-1 text-danger"></i><span
                                            class="font-weight-bold">PDF</span>
                                    </button>
                                @endif
                                <div class="ms-auto d-flex align-items-center">
                                    <input type="text" name="search" class="form-control form-control-sm"
                                        placeholder="Cari data..." value="{{ $search ?? '' }}"
                                        id="search-input-{{ $dmenu }}" style="min-width: 260px;">
                                </div>
                            </div>
                        </div>
                        <div id="master-list-container-{{ $dmenu }}">
                            <div class="row px-4 py-2" style="min-height: 300px;">
                                <div class="table-responsive">
                                    <table class="table display" id="list_{{ $dmenu }}">
                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th width="110">Action</th>
                                                <th>No</th>
                                                @foreach ($table_header as $header)
                                                    <th>{{ $header->alias }}</th>
                                                @endforeach
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($table_detail as $detail)
                                                @php
                                                    $primaryValues = [];
                                                    foreach ($table_primary as $primaryField) {
                                                        $primaryValues[] = $detail->{$primaryField->field};
                                                    }
                                                    $primary = implode(':', $primaryValues);
                                                    $vcount = $table_detail->firstItem() + $loop->index;
                                                @endphp
                                                <tr
                                                    {{ $detail->isactive == '0' ? 'class=not style=background-color:#ffe9ed;' : '' }}>
                                                    <td class="text-sm font-weight-normal">
                                                        <div class="btn-group">
                                                            <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                                                title="View Data"
                                                                onclick="window.location='{{ url($url_menu . '/show' . '/' . encrypt($primary)) }}'">
                                                                <i class="fas fa-eye"></i><span class="font-weight-bold">
                                                                    View</span>
                                                            </button>
                                                            <button type="button"
                                                                class="btn btn-sm btn-primary mb-0 px-3 dropdown-toggle dropdown-toggle-split"
                                                                data-bs-toggle="dropdown" aria-expanded="false">
                                                                <span class="visually-hidden">Toggle Dropdown</span>
                                                            </button>
                                                            <ul class="dropdown-menu">
                                                                @if ($authorize->edit == '1' && $detail->isactive == 1)
                                                                    <li>
                                                                        <hr class="dropdown-divider">
                                                                    </li>
                                                                    <button type="button"
                                                                        class="btn btn-sm btn-warning mx-2 mb-0 w-90"
                                                                        title="Edit Data"
                                                                        onclick="window.location='{{ url($url_menu . '/edit' . '/' . encrypt($primary)) }}'">
                                                                        <i class="fas fa-edit"></i><span
                                                                            class="font-weight-bold"> Edit</span>
                                                                    </button>
                                                                @endif
                                                                @if ($authorize->delete == '1' && $primary != 'msjit')
                                                                    <form
                                                                        action="{{ url($url_menu . '/' . encrypt($primary)) }}"
                                                                        method="POST" style="display: inline">
                                                                        @csrf
                                                                        @method('DELETE')
                                                                        <li>
                                                                            <hr class="dropdown-divider">
                                                                        </li>
                                                                        <button type="submit"
                                                                            class="btn btn-sm btn-{{ $detail->isactive == '0' ? 'success' : 'danger' }} mx-2 mb-0 w-90"
                                                                            title="Hapus Data"
                                                                            onclick="return deleteData(event, '{{ $primary }}','{{ $detail->isactive == '0' ? 'Aktifkan' : 'Non Aktifkan' }}')">
                                                                            <i class="fas fa-random"></i><span
                                                                                class="font-weight-bold">
                                                                                {{ $detail->isactive == '0' ? 'Aktifkan' : 'Non Aktifkan' }}</span>
                                                                        </button>
                                                                    </form>
                                                                @endif
                                                                <li>
                                                                    <hr class="dropdown-divider">
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </td>
                                                    <td>{{ $vcount }}</td>
                                                    @foreach ($table_header as $field)
                                                        @php
                                                            $string = $field->field;
                                                        @endphp
                                                        @if ($field->type == 'enum')
                                                            @include('components.td_enum')
                                                        @elseif ($field->type == 'file')
                                                            @include('components.td_file')
                                                        @elseif($field->type == 'image')
                                                            @include('components.td_image')
                                                        @elseif($field->type == 'join')
                                                            @include('components.td_join')
                                                        @elseif ($field->type == 'currency')
                                                            @include('components.td_currency')
                                                        @elseif ($field->type == 'date')
                                                            @include('components.td_date')
                                                        @elseif ($field->type == 'number')
                                                            @include('components.td_number')
                                                        @else
                                                            <td
                                                                class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                                                @if ($field->link != '')
                                                                    <a target="_blank"
                                                                        href="{{ url($field->link . '/?id=' . encrypt($detail->$string)) }}">
                                                                        {{ $detail->$string }}&nbsp;&nbsp;
                                                                        <i aria-hidden="true"
                                                                            class="fas fa-external-link-alt"></i>
                                                                    </a>
                                                                @else
                                                                    {{ $detail->$string }}
                                                                @endif
                                                            </td>
                                                        @endif
                                                    @endforeach
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                                        <div>
                                            @if ($table_detail->count() > 0)
                                                Data {{ $table_detail->firstItem() }} - {{ $table_detail->lastItem() }}
                                                dari {{ $table_detail->total() }} data.
                                            @else
                                                Tidak ada data.
                                            @endif
                                        </div>
                                        <div>
                                            {{ $table_detail->appends(request()->query())->links('pagination::bootstrap-4') }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row px-4 py-2">
                                <div class="col-lg">
                                    <div class="nav-wrapper" id="noted">
                                        <code>Note : <i aria-hidden="true" style="color: #ffc2cd;"
                                                class="fas fa-circle"></i> Data not active</code>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                @include('js.' . $dmenu)
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    <script>
        $(document).ready(function() {
            const listUrl = @json(url($url_menu));
            const listContainer = '#master-list-container-{{ $dmenu }}';
            const searchInput = $('#search-input-{{ $dmenu }}');
            let searchTimeout;

            function bindRowClick() {
                $(`${listContainer} tbody tr`).off('click.master-row').on('click.master-row', function(e) {
                    if ($(e.target).closest('button, a, form, .dropdown-menu, .dropdown-toggle').length) {
                        return;
                    }

                    $(`${listContainer} tbody tr`).css('background-color', '');
                    $('.exp').css('background-color', '#ffe768');
                    $('.stock').css('background-color', '#f93c3c');
                    $('.not').css('background-color', '#ffe9ed');
                    $(this).css('background-color', '#f9f4ea');
                });
            }

            function refreshNote() {
                const noted = $('#noted');
                noted.html(
                    `<code>Note : <i aria-hidden="true" style="color: #ffc2cd;" class="fas fa-circle"></i> Data not active</code>`
                );

                if ($('*').hasClass('exp')) {
                    noted.html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                        class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
                        style="color: #ffe768;" class="fas fa-circle"></i> ` + $('#datenote').text() + ` )</code>`);
                }
                if ($('*').hasClass('stock')) {
                    noted.html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                        class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
                        style="color: #f93c3c;" class="fas fa-circle"></i> ` + $('#stocknote').text() + ` )</code>`);
                }
                if ($('*').hasClass('exp') && $('*').hasClass('stock')) {
                    noted.html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                        class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
                        style="color: #ffe768;" class="fas fa-circle"></i> ` + $('#datenote').text() + ` ),
                        ( <i aria-hidden="true" style="color: #f93c3c;" class="fas fa-circle"></i> ` + $('#stocknote').text() + ` )</code>`);
                }
            }

            function loadList(params, pushState = true) {
                const cursorPosition = searchInput[0].selectionStart ?? searchInput.val().length;

                $.ajax({
                    url: listUrl,
                    type: 'GET',
                    data: params,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    success: function(response) {
                        const rendered = $('<div>').html(response).find(listContainer).html();
                        $(listContainer).html(rendered);
                        bindRowClick();
                        refreshNote();
                        searchInput.val(params.search ?? '');
                        searchInput.focus();
                        searchInput[0].setSelectionRange(cursorPosition, cursorPosition);

                        if (pushState) {
                            const query = $.param(params);
                            const nextUrl = query ? `${listUrl}?${query}` : listUrl;
                            window.history.pushState(params, '', nextUrl);
                        }
                    }
                });
            }

            searchInput.on('input', function() {
                clearTimeout(searchTimeout);
                const params = {
                    search: $(this).val()
                };

                searchTimeout = setTimeout(() => {
                    loadList(params);
                }, 500);
            });

            $(document).on('click', `${listContainer} .pagination a`, function(e) {
                e.preventDefault();
                const url = new URL($(this).attr('href'));
                const params = Object.fromEntries(url.searchParams.entries());
                if (!params.search) {
                    params.search = searchInput.val();
                }
                loadList(params);
            });

            window.addEventListener('popstate', function() {
                const url = new URL(window.location.href);
                const params = Object.fromEntries(url.searchParams.entries());
                searchInput.val(params.search ?? '');
                loadList(params, false);
            });

            $('.js-export-master').on('click', function() {
                const exportType = $(this).data('export-type');
                const params = new URLSearchParams();
                params.set('export', exportType);
                if (searchInput.val()) {
                    params.set('search', searchInput.val());
                }
                window.location.href = `${listUrl}?${params.toString()}`;
            });

            bindRowClick();
            refreshNote();
        });

        function deleteData(event, name, msg) {
            event.preventDefault();
            Swal.fire({
                title: 'Konfirmasi',
                text: `Apakah Anda Yakin ${msg} Data ${name} ini?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Ya, ${msg}`,
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    event.target.closest('form').submit();
                }
            });
        }
    </script>
@endpush