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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    {{-- Section First - Button Actions --}}
    <div class="section-first">
        <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">
                            {{-- check authorize add --}}
                            @if ($authorize->add == '1')
                                <button class="btn btn-primary mb-0" id="btn-add">
                                    <i class="fas fa-plus me-1"></i>
                                    <span class="font-weight-bold">ADD</span>
                                </button>
                            @endif
                            
                            <input type="hidden" id="auth-add" name="auth-add" value="{{ $authorize->add }}">
                            <input type="hidden" id="auth-edit" name="auth-edit" value="{{ $authorize->edit }}">
                            <input type="hidden" id="auth-delete" name="auth-delete" value="{{ $authorize->delete }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>

    {{-- Filter Section --}}
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <form>
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Filter {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            
                            {{-- alert --}}
                            @include('components.alert')
                            
                            <div class="row">
                                <!-- Tanggal Transaksi -->
                                <div class="col-lg-4">
                                    <div class="row mb-3">
                                        <div class="col-lg-4">
                                            <label for="inputdate" class="form-label">Date</label>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="input-group">
                                                <input type="date" class="form-control" id="start-date" name="start-date"
                                                    placeholder="Date From" max="2026-10-03">
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="input-group">
                                                <input type="date" class="form-control" id="end-date" name="end-date"
                                                    placeholder="Date To" max="2026-10-03">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-lg-1 d-flex justify-content-center">
                                    <div style="border-left: 2px solid #ddd; height: 50%;"></div>
                                </div>
                                
                                {{-- Code CPU --}}
                                <div class="col-lg-3">
                                    <div class="row mb-3">
                                        <div class="col-lg-4">
                                            <label for="code_cpu" class="form-label me-2" style="min-width: 150px;">Code CPU</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <div class="flex flex-col mb-2 input-group">
                                                <input type="text" id="code_cpu" name="code_cpu" class="form-control" 
                                                    placeholder="Input Code CPU" oninput="this.value = this.value.toUpperCase()">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <button type="submit" class="btn btn-primary mb-1 mt-3" id="search-form">
                                <i class="fa fa-magnifying-glass"></i> Search
                            </button>
                        </div>
                        <div class="card-footer align-items-center pt-0 pb-2">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- List Table Section --}}
    <div class="container-fluid py-4" id="listtable">
        <div class="row">
            <div class="col-md-12">
                <div class="card overflow-auto">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">List {{ $title_menu }}</p>
                        <hr class="horizontal dark mt-0">
                        
                        <div class="row">
                            <div class="table-responsive">
                                <table class="table table-hover" id="list_{{ $dmenu }}">
                                    <thead style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th scope="col">Action</th>
                                            <th scope="col">ID Transaksi</th>
                                            <th scope="col">Code</th>
                                            <th scope="col">Departement</th>
                                            <th scope="col">User</th>
                                            <th scope="col">Last Maintenance</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{-- Data will be loaded via AJAX --}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Tambah --}}
    <div class="modal fade" id="modalAdd" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageModalLabel">Tambah</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-8">
                            {{-- placeholder --}}
                        </div>
                        <div class="col-4">
                            <button type="button" class="btn btn-primary btn-search" data-bs-toggle="modal"
                                data-bs-target="#modalListMaster">
                                <i class="fas fa-search me-1"></i>Search
                            </button>
                        </div>
                    </div>
                    <p>
                    <div class="col-auto">
                        <button type="submit" id="submitButton" class="btn btn-primary mb-3" disabled>SUBMIT</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Report --}}
    <div class="modal fade" id="modalReport" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageModalLabel">Report</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form method="GET" action="#" id="report">
                        <div class="row">
                            <div class="col-8">
                                <input
                                    oninput="this.value = this.value.toUpperCase(); $('#rptmtn_view').attr('href','rptmtn/show/'+ $(this).val());"
                                    type="text" class="form-control" id="inputReport" name="submitCode"
                                    placeholder="Input Label CPU" readonly disabled>
                            </div>
                            <div class="col-4">
                                <button type="button" class="btn btn-primary btn-search" data-bs-toggle="modal"
                                    data-bs-target="#modalListMaster">
                                    <i class="fas fa-search me-1"></i>Search
                                </button>
                            </div>
                        </div>
                        <p>
                        <div class="col-auto">
                            <a href="rptmtn/show/id" id="rptmtn_view" target="_blank"
                                class="btn btn-primary mb-3">VIEW</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal List Master Data --}}
    <div class="modal fade" id="modalListMaster" 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">
                        <input type="hidden" name="tipe-filter" value="">
                        <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</th>
                                </tr>
                            </thead>
                            <tbody id="modal-body-content">
                                @foreach ($cpus as $cpu)
                                    <tr>
                                        <td scope="row">
                                            <span class="btn badge bg-success"
                                                onclick="selectCode('{{ $cpu->code }}')">
                                                <i class="fa fa-check-circle-o me-1"></i>
                                                Select
                                            </span>
                                        </td>
                                        <td>{{ $cpu->code }}</td>
                                        <td>{{ $cpu->dept_name }}</td>
                                        <td>{{ $cpu->user_name }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <form method="GET" action="{{ URL::to($url_menu . '/add') }}" id="myForm" hidden>
                            <input type="text" name="submitLabel" hidden>
                            <button type="submit" id="submitKode">Submit</button>
                            <a href="rptmtn/show/id" id="rptmtn_view" target="_blank" class="btn btn-primary mb-3" hidden></a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Unggah Gambar --}}
    <div class="modal fade" id="modalImage" tabindex="-1" aria-labelledby="image" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalImageTitle">Unggah Gambar</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="" method="POST" enctype="multipart/form-data" id="formUploadImage">
                        @csrf
                        <input type="hidden" id="maintenance_id" name="maintenance_id" value="">
                        <input type="hidden" id="date" name="date" value="">

                        <div class="mb-3">
                            <label class="form-label">File (Max. 6Mb):</label>
                            <input type="file" name="file" multiple
                                class="form-control @error('file') is-invalid @enderror">
                            @error('file')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label class="font-weight-bold">Note</label>
                            <input type="text"
                                class="form-control @error('note') is-invalid @enderror"
                                name="note" value="{{ old('note') }}"
                                placeholder="Input Note">
                            @error('note')
                                <div class="alert alert-danger mt-2">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <p>
                        <div class="col-auto">
                            <button type="submit" id="submitBtn" class="btn btn-primary mb-3">UPLOAD</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- JavaScript --}}
    <script>
        var authadd = document.getElementById('auth-add').value;
        var authedit = document.getElementById('auth-edit').value;
        var authdelete = document.getElementById('auth-delete').value;

        $('input[name="submitCode"]').val('');
        
        document.querySelectorAll('.btn-search').forEach(function(btn) {
            btn.addEventListener('click', function() {
                previousModalId = this.closest('.modal').id;
            });
        });

        $(document).ready(function() {
            // Initialize DataTable for Master Data Modal
            $('#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)"
                },
                responsive: true,
            });

            // Initialize Main DataTable
            $('#list_{{ $dmenu }}').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,
            });

            // Mendapatkan tanggal hari ini dalam waktu lokal
            var today = new Date();

            // Mendapatkan tanggal 1 bulan ini dalam waktu lokal
            var firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);

            // Format tanggal ke format YYYY-MM-DD
            var formattedToday = today.getFullYear() + '-' +
                String(today.getMonth() + 1).padStart(2, '0') + '-' +
                String(today.getDate()).padStart(2, '0');

            var formattedFirstDay = firstDayOfMonth.getFullYear() + '-' +
                String(firstDayOfMonth.getMonth() + 1).padStart(2, '0') + '-' +
                String(firstDayOfMonth.getDate()).padStart(2, '0');

            // Tetapkan nilai default pada input
            $("input[name='start-date']").val(formattedFirstDay);
            $("input[name='end-date']").val(formattedToday);

            // Load data pertama kali dengan default date
            searchMaintenance(formattedFirstDay, formattedToday);
        });

        // Button Add Click
        $('#btn-add').click(function() {
            $('input[name="tipe-filter"]').val('add');
            $('#modalListMaster').modal('show');
        });

        // Button Report Click
        $('#btn-report').click(function() {
            $('input[name="tipe-filter"]').val('report');
            $('#modalListMaster').modal('show');
        });

        // Search Form Submit
        $('#search-form').click(function(event) {
            event.preventDefault();
            searchMaintenance();
        });

        // Search Maintenance Function
        function searchMaintenance(startDate = null, endDate = null) {
            // Ambil nilai input dari form
            var code_cpu = $("input[name='code_cpu']").val();
            var sdate = startDate || $("input[name='start-date']").val();
            var edate = endDate || $("input[name='end-date']").val();

            // Validasi input
            if (code_cpu === '' && (sdate === '' || edate === '')) {
                Swal.fire({
                    title: 'Warning!',
                    text: 'Please fill out Code CPU or both Start Date and End Date!',
                    icon: 'error',
                    confirmButtonColor: '#3085d6'
                });
                return;
            } else if (sdate !== '' && edate !== '' && sdate > edate) {
                Swal.fire({
                    title: 'Warning!',
                    text: 'Start Date must be less than or equal to End Date',
                    icon: 'error',
                    confirmButtonColor: '#3085d6'
                });
                return;
            }

            // Tambahkan spinner dan nonaktifkan tombol
            $('#search-form').append(
                '<span class="spinner-border spinner-border-sm icon-load" role="status" aria-hidden="true"></span>'
            );
            $('#search-form').attr('disabled', true);

            // Buat filter
            var filter = {
                code_cpu: code_cpu,
                sdate: sdate,
                edate: edate
            };

            console.log('Searching with filter:', filter);

            // Kirim permintaan AJAX
            $.ajax({
                url: '{{ URL::to($url_menu) }}/search',
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: filter,
                success: function(response) {
                    console.log('Search response:', response);
                    // Tampilkan div tabel dan muat data
                    $('#listtable').removeAttr('hidden');
                    loadMaintenanceData(response.data);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error('Search error:', jqXHR);
                    if (jqXHR.status === 404) {
                        Swal.fire({
                            icon: 'error',
                            title: 'No Data Found',
                            text: jqXHR.responseJSON.message,
                            confirmButtonColor: '#d33'
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: 'Something went wrong!',
                            confirmButtonColor: '#d33'
                        });
                    }
                },
                complete: function() {
                    // Hapus spinner dan aktifkan tombol
                    $('#search-form').find('.icon-load').remove();
                    $('#search-form').attr('disabled', false);
                }
            });
        }

        // Load Maintenance Data to Table
        function loadMaintenanceData(data) {
            // Ambil instance DataTables
            const table = $('#list_{{ $dmenu }}').DataTable();
            table.clear(); // Hapus semua data di DataTables

            // Iterasi melalui data dan tambahkan baris ke tbody
            data.forEach(item => {
                // Build dropdown items
                let dropdownItems = '';
                
                // // View (always visible)
                // dropdownItems += `
                //     <li>
                //         <a class="dropdown-item" href="{{ url($url_menu . '/show/') }}/${encodeURIComponent(item.encrypted_id)}">
                //             <i class="fas fa-eye"></i> <span> View</span>
                //         </a>
                //     </li>
                // `;

                // Edit (if authorized)
                if (authedit === '1') {
                    dropdownItems += `
                        <li>
                            <a class="dropdown-item" href="{{ url($url_menu . '/edit/') }}/${encodeURIComponent(item.encrypted_id)}">
                                <i class="fas fa-edit"></i> <span> Edit</span>
                            </a>
                        </li>
                    `;
                }

                // Delete (if authorized and not msjit)
                if (authdelete === '1' && item.id !== 'msjit') {
                    dropdownItems += `
                        <li>
                            <a class="dropdown-item" href="#" 
                                onclick="deleteMaintenance(event, '${item.idtrans}', '${encodeURIComponent(item.encrypted_id)}')" 
                                style="cursor: pointer;">
                                <i class="fas fa-trash"></i> <span> Delete</span>
                            </a>
                        </li>
                    `;
                }

                // Upload
                dropdownItems += `
                    <li>
                        <a class="dropdown-item" href="#" 
                            onclick="add('${item.idtrans}', '${item.date}', '${item.code_cpu}')" 
                            style="cursor: pointer;">
                            <i class="fa fa-file-arrow-up"></i> <span> Unggah</span>
                        </a>
                    </li>
                `;

                // Row background color
                let rowStyle = item.isactive == '0' ? 'background-color:#ffe9ed;' : '';

                // Tambahkan baris ke DataTables
                table.row.add([
                    `<div class="btn-group dropright">
                        <button type="button" class="btn btn-primary" onclick="window.location='{{ url($url_menu . '/show/') }}/${encodeURIComponent(item.encrypted_id)}'">
                            <i class="fas fa-eye"></i> View
                        </button>
                        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <div class="dropdown-menu">
                            ${dropdownItems}
                        </div>
                    </div>`,
                    `<span style="${rowStyle}">${item.idtrans}</span>`,
                    `<span style="${rowStyle}">${item.code_cpu}</span>`,
                    `<span style="${rowStyle}">${item.dept_name}</span>`,
                    `<span style="${rowStyle}">${item.user_name}</span>`,
                    `<span style="${rowStyle}">${item.date}</span>`
                ]);
            });

            // Perbarui tampilan DataTables
            table.draw();
        }

        // Select Code Function
        function selectCode(code) {
            var tipe = $('input[name="tipe-filter"]').val();

            if (tipe == 'add') {
                $('input[name="submitLabel"]').val(code);
                $('#submitKode').click();
            } else if (tipe == 'report') {
                $('#rptmtn_view').attr('href', 'rptmtn/show/' + code);
                document.getElementById('rptmtn_view').click();
            }
            
            $('#modalListMaster').modal('hide');
        }

        // Delete Maintenance Function
        function deleteMaintenance(event, idtrans, encryptedId) {
            event.preventDefault();
            
            Swal.fire({
                title: 'Konfirmasi',
                text: `Apakah Anda Yakin Menghapus Data ${idtrans} ini?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Ya, Hapus!`,
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Create and submit form
                    var form = document.createElement('form');
                    form.method = 'POST';
                    form.action = '{{ url($url_menu) }}/' + decodeURIComponent(encryptedId);
                    
                    var csrfInput = document.createElement('input');
                    csrfInput.type = 'hidden';
                    csrfInput.name = '_token';
                    csrfInput.value = '{{ csrf_token() }}';
                    form.appendChild(csrfInput);
                    
                    var methodInput = document.createElement('input');
                    methodInput.type = 'hidden';
                    methodInput.name = '_method';
                    methodInput.value = 'DELETE';
                    form.appendChild(methodInput);
                    
                    document.body.appendChild(form);
                    form.submit();
                }
            });
        }

        // Add/Upload Image Function
        function add(mainIdtrans, mainDate, codeCpu) {
            document.getElementById('maintenance_id').value = mainIdtrans;
            document.getElementById('date').value = mainDate;
            
            $('#modalImageTitle').text('Unggah Gambar - ' + codeCpu);
            $('#formUploadImage').attr('action', '{{ url('/maintenance-image') }}/' + mainIdtrans);
            
            $('input[name="maintenance_id"]').val(mainIdtrans);
            $('input[name="date"]').val(mainDate);
            
            $('#modalImage').modal('show');
        }
    </script>
@endsection