@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        @if ($authorize->add == '1')
                            <button class="btn btn-primary mb-0" id="rpkita-execute">
                                <i class="fas fa-bolt me-1"></i>
                                <span class="font-weight-bold">Execute</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-lg-6">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form">
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Filter {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">

                            <div class="row mb-3">
                                <div class="col-lg-4">
                                    <label for="category" class="form-label">Kategori <code>*</code></label>
                                </div>
                                <div class="col-lg-8">
                                    <select class="form-select form-select-sm" name="report-filter-kategori" id="category" required>
                                        <option value="ALL">ALL</option>
                                        <option value="CPU">CPU</option>
                                        <option value="LCD">Monitor</option>
                                        <option value="PRN">Printer</option>
                                        <option value="SCN">Scanner</option>
                                        <option value="SWT">Switch</option>
                                        <option value="OTH">Others</option>
                                    </select>
                                </div>
                            </div>

                            <!-- Code Filter -->
                                                        <!-- Code Filter (Dynamic) -->
                            <div class="row mb-3 d-none" id="fld-code">
                                <div class="col-lg-4">
                                    <label for="code" class="form-label">Code</label>
                                </div>
                                <div class="col-lg-8">
                                    <div class="input-group">
                                        <input type="text" id="code" name="report-filter-code" class="form-control" readonly 
                                               style="background-color:  #fff; border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; padding-left: 0.75rem;">
                                        <span class="input-group-text bg-primary text-white" style="cursor: pointer; border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem;" onclick="searchItems()">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <!-- User Filter (for CPU, LCD) -->
                            <div class="row mb-3 d-none" id="fld-user">
                                <div class="col-lg-4">
                                    <label for="user" class="form-label">User Saat Ini</label>
                                </div>
                                <div class="col-lg-8">
                                    <div class="input-group">
                                        <input type="hidden" id="user_id" name="report-filter-user-id">
                                        <input type="text" id="user_name" name="report-filter-user-name" class="form-control" readonly 
                                               style="background-color:  #fff; border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; padding-left: 0.75rem;">
                                        <span class="input-group-text bg-primary text-white" style="cursor: pointer; border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem;" data-bs-toggle="modal" data-bs-target="#modalUser">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <!-- Location Filter Modal (for PRN, SCN, SWT) -->
                            <div class="row mb-3 d-none" id="fld-location-modal">
                                <div class="col-lg-4">
                                    <label for="location" class="form-label">Lokasi Saat Ini</label>
                                </div>
                                <div class="col-lg-8">
                                    <div class="input-group">
                                        <input type="hidden" id="location_id" name="report-filter-location-id">
                                        <input type="text" id="location_name" name="report-filter-location-name" class="form-control" readonly 
                                               style="background-color: #fff; border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; padding-left: 0.75rem;">
                                        <span class="input-group-text bg-primary text-white" style="cursor: pointer; border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem;" data-bs-toggle="modal" data-bs-target="#modalLocation">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <!-- Location Filter Text (for OTH) -->
                            <div class="row mb-3 d-none" id="fld-location-text">
                                <div class="col-lg-4">
                                    <label for="location_text" class="form-label">Lokasi Saat Ini</label>
                                </div>
                                <div class="col-lg-8">
                                    <input type="text" id="location_text" name="report-filter-location-text" class="form-control" placeholder="Ketik lokasi...  ">
                                </div>
                            </div>

                            <!-- Department Filter -->
                            <div class="row mb-3">
                                <div class="col-lg-4">
                                    <label for="dept" class="form-label">Department</label>
                                </div>
                                <div class="col-lg-8">
                                    <select name="report-filter-dept" id="dept" class="form-select">
                                        <option value="">ALL</option>
                                        @foreach ($dept as $d)
                                            <option value="{{ $d->value }}">{{ $d->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <!-- Start Date Filter -->
                            <div class="row mb-3">
                                <div class="col-lg-4">
                                    <label for="sdate" class="form-label">Start Date</label>
                                </div>
                                <div class="col-lg-8">
                                    <input type="date" name="report-filter-sdate" id="sdate" class="form-control">
                                </div>
                            </div>

                            <!-- End Date Filter -->
                            <div class="row mb-3">
                                <div class="col-lg-4">
                                    <label for="edate" class="form-label">End Date</label>
                                </div>
                                <div class="col-lg-8">
                                    <input type="date" name="report-filter-edate" id="edate" class="form-control">
                                </div>
                            </div>

                            <hr class="horizontal dark">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Code -->
    <div class="modal fade" id="codeModal" tabindex="-1" aria-labelledby="codeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="codeModalLabel">Master Data</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table id="myTableMaster" class="table table-bordered table-striped" style="width: 100%">
                            <thead style="background-color:  #daecff;">
                                <tr>
                                    <th scope="col">Action</th>
                                    <th scope="col">Kode</th>
                                    <th scope="col">Departement</th>
                                    <th scope="col">User/Location</th>
                                </tr>
                            </thead>
                            <tbody id="modal-body-content">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal User -->
    <div class="modal fade bd-example-modal-lg" id="modalUser" tabindex="-1" aria-labelledby="modalUserLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalUserLabel">List User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="tableModalWrapper" class="table-responsive">
                        <table id="tableUser" class="table table-bordered table-striped">
                            <thead style="background-color:  #daecff;">
                                <tr>
                                    <th>Action</th>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Departemen</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($user as $u)
                                    <tr>
                                        <td>
                                            <span class="btn badge bg-primary" onclick="selectUser('{{ $u->id }}', '{{ $u->user }}')">
                                                <i class="bi bi-check-circle me-1"></i> Select
                                            </span>
                                        </td>
                                        <td>{{ $u->id }}</td>
                                        <td>{{ $u->user }}</td>
                                        <td>{{ $u->deptname }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Location -->
    <div class="modal fade bd-example-modal-lg" id="modalLocation" tabindex="-1" aria-labelledby="modalLocationLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLocationLabel">List Location</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="tableModalWrapper" class="table-responsive">
                        <table id="tableLocation" class="table table-bordered table-striped">
                            <thead style="background-color: #daecff;">
                                <tr>
                                    <th>Action</th>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Departemen</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($location as $loc)
                                    <tr>
                                        <td>
                                            <span class="btn badge bg-primary" onclick="selectLocation('{{ $loc->id }}', '{{ $loc->name }}')">
                                                <i class="bi bi-check-circle me-1"></i> Select
                                            </span>
                                        </td>
                                        <td>{{ $loc->id }}</td>
                                        <td>{{ $loc->name }}</td>
                                        <td>{{ $loc->deptname }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>


    <script>
        $(document).ready(function() {
            // Initialize DataTables
            $('#tableUser').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty":  "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                "ordering": false,
                responsive: true,
            });

            $('#tableLocation').DataTable({
                "language":  {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy":  true,
                "ordering": false,
                responsive: true,
            });

            // Category change handler
            $('#category').on('change', function() {
                toggleFields();
                clearAllFilters();
            });

            // Initial toggle
            toggleFields();

            // Execute button click handler
            $('#rpkita-execute').click(function(e) {
                e.preventDefault();

                // Validate kategori
                const kategori = $('[name="report-filter-kategori"]').val();
                if (!kategori) {
                    Swal.fire({
                        icon:  'warning',
                        title: 'Validation Error',
                        text: 'Please select a category! ',
                    });
                    return;
                }

                // Validate date range
                const startDate = $('[name="report-filter-sdate"]').val();
                const endDate = $('[name="report-filter-edate"]').val();

                if (startDate && endDate && new Date(startDate) > new Date(endDate)) {
                    Swal. fire({
                        icon: 'warning',
                        title: 'Validation Error',
                        text: 'Start date must be less than or equal to end date!',
                    });
                    return;
                }

                // Submit form
                document.getElementById('{{ $dmenu }}-form').submit();
            });
        });

        function toggleFields() {
            const category = $('#category').val().toUpperCase();

            // Hide all dynamic fields first
            $('#fld-code').addClass('d-none');
            $('#fld-user').addClass('d-none');
            $('#fld-location-modal').addClass('d-none');
            $('#fld-location-text').addClass('d-none');

            if (category === 'ALL' || category === '') {
                // All hidden for ALL
                return;
            }

            // Show code field for all categories except ALL
            $('#fld-code').removeClass('d-none');

            if (category === 'CPU' || category === 'LCD') {
                // Show user field for CPU and LCD
                $('#fld-user').removeClass('d-none');
            } else if (category === 'PRN' || category === 'SCN' || category === 'SWT') {
                // Show location modal for PRN, SCN, SWT
                $('#fld-location-modal').removeClass('d-none');
            } else if (category === 'OTH') {
                // Show location text input for OTH
                $('#fld-location-text').removeClass('d-none');
            }
        }

        function clearAllFilters() {
            $('#code').val('');
            $('#user_id').val('');
            $('#user_name').val('');
            $('#location_id').val('');
            $('#location_name').val('');
            $('#location_text').val('');
        }

        function clearCode() {
            $('#code').val('');
        }

        function clearUser() {
            $('#user_id').val('');
            $('#user_name').val('');
        }

        function clearLocation() {
            $('#location_id').val('');
            $('#location_name').val('');
        }

        // Search items for code modal
        var listCode = [];

        function searchItems() {
            var category = $('#category').val();
            
            if (! category || category === 'ALL') {
                Swal.fire({
                    title: 'Kategori Belum Dipilih! ',
                    text: 'Harap memilih kategori terlebih dahulu.',
                    icon:  'warning',
                    confirmButtonText: 'OK'
                });
                return;
            }

            $. ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                url: '{{ URL::to('/') }}/search-asset',
                type:  'GET',
                data:  { category: category },
                success: function(response) {
                    listCode = [];
                    
                    for (const r of response) {
                        const userId = r.user || r.user_id || '';
                        const userName = r.user_name || r.userName || '';
                        const locationId = r.location || r.location_id || '';
                        const locationName = r.location_name || r.locationName || '';
                        const deptName = r. dept_name || r. deptName || '';

                        const actionHtml = `<button type="button" class="btn badge bg-success select-btn"
                            data-code="${r.code || ''}"
                            onclick="selectCode('${r.code || ''}')">
                            <i class="fa fa-check-circle-o me-1"></i> Select
                        </button>`;

                        listCode.push({
                            ACTION: actionHtml,
                            CODE: r.code,
                            DEPT: deptName,
                            KOL3: (userName || locationName || '-')
                        });
                    }

                    if ($. fn.DataTable. isDataTable('#myTableMaster')) {
                        $('#myTableMaster').DataTable().destroy();
                    }

                    $('#myTableMaster').DataTable({
                        "language": {
                            "search": "Cari :",
                            "lengthMenu": "Tampilkan _MENU_ baris",
                            "zeroRecords": "Maaf - Data tidak ada",
                            "info": "Halaman _PAGE_ dari _PAGES_",
                            "infoEmpty":  "Tidak ada data",
                            "infoFiltered":  "(pencarian dari _MAX_ data)"
                        },
                        "destroy": true,
                        responsive: true,
                        "data": listCode,
                        "columns": [
                            { data: 'ACTION' },
                            { data: 'CODE' },
                            { data: 'DEPT' },
                            { data:  'KOL3' }
                        ]
                    });

                    $('#codeModal').modal('show');
                },
                error: function(xhr) {
                    console.error('AJAX request error:', xhr.responseText);
                    Swal.fire({
                        title: 'Warning! ',
                        text: 'Data tidak ditemukan.',
                        icon:  'warning',
                        confirmButtonText: 'OK'
                    });
                }
            });
        }

        function selectCode(code) {
            $('#code').val(code);
            $('#codeModal').modal('hide');
        }

        function selectUser(id, name) {
            $('#user_id').val(id);
            $('#user_name').val(name);
            $('#modalUser').modal('hide');
        }

        function selectLocation(id, name) {
            $('#location_id').val(id);
            $('#location_name').val(name);
            $('#modalLocation').modal('hide');
        }
    </script>
@endsection