@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" style="height: 100px">
                        <div class="card-body">
                            {{-- Form pencarian --}}
                            <form method="GET" action="{{ url()->current() }}" id="searchForm">
                                <div class="input-group mb-3">
                                    <input type="text" name="search" id="searchInput"
                                        class="form-control form-control-lg" style="height: 49px;"
                                        placeholder="Cari Sparepart..." aria-label="Cari" aria-describedby="button-addon2">
                                    <button class="btn btn-primary btn-lg" type="submit" id="button-addon2">Cari</button>
                                </div>
                            </form>
                        </div>
                    </div>

                    {{-- Tampilkan hasil pencarian jika ada --}}
                    @if (request()->has('search') && request()->input('search') != '')
                        <div class="card mt-3">
                            <div class="card-body">
                                @if ($table_detail->isEmpty())
                                    <p class="text-center">Data tidak ditemukan untuk pencarian
                                        "{{ request()->input('search') }}".
                                    </p>
                                @else
                                    <div class="table-responsive">
                                        <table class="table display" id="list_{{ $dmenu }}">
                                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th>No</th>
                                                    @foreach ($table_header as $header)
                                                        <th>{{ $header->alias }}</th>
                                                    @endforeach
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {{-- retrieve table detail --}}
                                                @foreach ($table_detail as $detail)
                                                    @php
                                                        $primary = '';
                                                        foreach ($table_primary as $p) {
                                                            $primary == ''
                                                                ? ($primary = $detail->{$p->field})
                                                                : ($primary = $primary . ':' . $detail->{$p->field});
                                                        }
                                                        $vcount = $loop->iteration;
                                                    @endphp
                                                    <tr>
                                                        <td>{{ $vcount }}</td>
                                                        @foreach ($table_header as $field)
                                                            @if ($field->type == 'image')
                                                                <td>
                                                                    <span class="my-2 text-xs">
                                                                        <img src="{{ asset('/storage' . '/' . $detail->{$field->field}) }}"
                                                                            alt="image" style="height: 35px;"
                                                                            data-bs-toggle="modal"
                                                                            data-bs-target="#imageModal{{ $field->field }}{{ $vcount }}">
                                                                    </span>
                                                                    <!-- Modal Gambar -->
                                                                    <div class="modal fade"
                                                                        id="imageModal{{ $field->field }}{{ $vcount }}"
                                                                        tabindex="-1" role="dialog"
                                                                        aria-labelledby="imageModalLabel{{ $field->field }}{{ $vcount }}"
                                                                        aria-hidden="true">
                                                                        <div class="modal-dialog modal-dialog-centered"
                                                                            role="document">
                                                                            <div class="modal-content">
                                                                                <div class="modal-header">
                                                                                    <h5 class="modal-title"
                                                                                        id="imageModalLabel{{ $field->field }}{{ $vcount }}">
                                                                                        Preview Image
                                                                                    </h5>
                                                                                    <button type="button" class="btn-close"
                                                                                        data-bs-dismiss="modal"
                                                                                        aria-label="Close">
                                                                                        <span
                                                                                            aria-hidden="true">&times;</span>
                                                                                    </button>
                                                                                </div>
                                                                                <div class="modal-body">
                                                                                    <img src="{{ asset('/storage' . '/' . $detail->{$field->field}) }}"
                                                                                        id="preview" alt="image"
                                                                                        class="w-100 border-radius-lg shadow-sm">
                                                                                </div>
                                                                                <div class="modal-footer"></div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                            @elseif($field->type == 'file')
                                                                <td
                                                                    class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                                                    @if ($detail->{$field->field})
                                                                        <a target="_blank"
                                                                            class="btn btn-sm btn-outline-success mb-0 py-1 px-2"
                                                                            href="{{ asset('/storage' . '/' . $detail->{$field->field}) }}">
                                                                            <i aria-hidden="true"
                                                                                class="fas fa-file-lines text-lg"></i>
                                                                            {{ $field->alias }}</a>
                                                                    @endif
                                                                </td>
                                                            @elseif($field->type == 'enum')
                                                                @php
                                                                    $data_query = DB::select($field->query);
                                                                    $data_query = array_values((array) $data_query[0]);
                                                                    
                                                                @endphp
                                                                <td>{{ $data_query[1] }}</td>
                                                            @else
                                                                <td>{{ $detail->{$field->field} }}</td>
                                                            @endif
                                                        @endforeach
                                                        <td>
                                                            {{-- button view --}}
                                                            <button type="button"
                                                                onclick="filterTableByDate({{ $primary }})"
                                                                class="btn btn-sm btn-primary mb-0" title="View Data"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#viewHistoricalModal{{ $primary }}">
                                                                <i class="fas fa-eye"></i><span class="font-weight-bold">
                                                                    View
                                                                    Historical</span>
                                                            </button>

                                                            {{-- Modal View Historical --}}
                                                            <div class="modal fade"
                                                                id="viewHistoricalModal{{ $primary }}" tabindex="-1"
                                                                aria-labelledby="viewHistoricalLabel" aria-hidden="true">
                                                                <div class="modal-dialog modal-lg">
                                                                    <div class="modal-content">
                                                                        <div class="modal-header">
                                                                            <h5 class="modal-title"
                                                                                id="viewHistoricalLabel">
                                                                                Historical Maintenance:
                                                                                {{ $detail->nama_sparepart }}
                                                                            </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-md-4">
                                                                                    <label for="startDate">Start
                                                                                        Date</label>
                                                                                    <input type="date"
                                                                                        id="startDate{{ $primary }}"
                                                                                        class="form-control"
                                                                                        style="height: 46%;">
                                                                                </div>
                                                                                <div class="col-md-4">
                                                                                    <label for="endDate">End Date</label>
                                                                                    <input type="date"
                                                                                        id="endDate{{ $primary }}"
                                                                                        class="form-control"
                                                                                        style="height: 46%;">
                                                                                </div>
                                                                                <div class="col-md-4"
                                                                                    style="margin-top: 32px;">
                                                                                    <button
                                                                                        id="filterDateBtn{{ $primary }}"
                                                                                        class="btn btn-primary">Filter</button>
                                                                                    <button
                                                                                        id="clearFilterBtn{{ $primary }}"
                                                                                        class="btn btn-secondary">Clear
                                                                                        Filter</button>
                                                                                </div>
                                                                            </div>
                                                                            <div id="maintenanceData{{ $primary }}">
                                                                            </div>
                                                                        </div>
                                                                        <div class="row px-3 py-2">
                                                                            <div class="col-lg">
                                                                                <div class="nav-wrapper" id="noted">
                                                                                    <code>Note : <i aria-hidden="true"
                                                                                            style="color: #ffcccc; border: 0.5px solid grey; border-radius: 50%; display: inline-block;"
                                                                                            class="fas fa-circle"></i>
                                                                                        Maintenance belum dimulai</code>
                                                                                    <code>, <i aria-hidden="true"
                                                                                            style="color: #ffffcc; border: 0.5px solid grey; border-radius: 50%; display: inline-block;"
                                                                                            class="fas fa-circle"></i>
                                                                                        Maintenance sedang berjalan</code>
                                                                                    <code>, <i aria-hidden="true"
                                                                                            style="color: #f9f9f9; border: 0.5px solid grey; border-radius: 50%; display: inline-block;"
                                                                                            class="fas fa-circle"></i>
                                                                                        Maintenance selesai</code>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            {{-- button edit --}}
                                                            @if ($authorize->edit == '1')
                                                                <button type="button" class="btn btn-sm btn-warning mb-0"
                                                                    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

                                                            {{-- button delete --}}
                                                            @if ($authorize->delete == '1' && $primary != 'msjit')
                                                                <form
                                                                    action="{{ url($url_menu . '/' . encrypt($primary)) }}"
                                                                    method="POST" style="display: inline">
                                                                    @csrf
                                                                    @method('DELETE')
                                                                    <button type="submit"
                                                                        class="btn btn-sm btn-danger mb-0"
                                                                        title="Hapus Data"
                                                                        onclick="return confirm('Yakin ingin menghapus data ini?')">
                                                                        <i class="fas fa-trash"></i><span
                                                                            class="font-weight-bold">
                                                                            Hapus</span>
                                                                    </button>
                                                                </form>
                                                            @endif
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Alert for Empty Search -->
    <div class="modal fade" id="emptySearchModal" tabindex="-1" aria-labelledby="emptySearchModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content text-center">
                <div class="modal-body">
                    <div class="my-3">
                        <i class="fas fa-times-circle fa-5x text-danger"></i>
                    </div>
                    <h3 class="modal-title" id="emptySearchModalLabel">Error!</h3>
                    <p>Input pencarian tidak boleh kosong.</p>
                    <button type="button" class="btn btn-primary mt-3" data-bs-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Alert for Invalid Date Range -->
    <div class="modal fade" id="invalidDateModal" tabindex="-1" aria-labelledby="invalidDateModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content text-center">
                <div class="modal-body">
                    <div class="my-3">
                        <i class="fas fa-times-circle fa-5x text-danger"></i>
                    </div>
                    <h3 class="modal-title" id="invalidDateModalLabel">Error!</h3>
                    <p>End Date tidak boleh lebih kecil dari Start Date.</p>
                    <button type="button" class="btn btn-primary mt-3" data-bs-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('js')
    <script>
        $(document).ready(function() {
            //set table into datatables
            var dataTable;

            // Fungsi untuk inisialisasi DataTables
            function initializeDataTable(selector) {
                if ($.fn.DataTable.isDataTable(selector)) {
                    $(selector).DataTable().destroy(); // Hancurkan DataTable yang sudah ada
                }

                dataTable = $(selector).DataTable({
                    "language": {
                        "search": "Cari :",
                        "lengthMenu": "Tampilkan _MENU_ baris",
                        "zeroRecords": "Maaf - Data tidak ada",
                        "info": "Data _START_ - _END_ dari _TOTAL_",
                        "infoEmpty": "Tidak ada data",
                        "infoFiltered": "(pencarian dari _MAX_ data)"
                    },
                    responsive: true,
                    destroy: true,
                    dom: 'Brtip',
                    buttons: [
                        @if ($authorize->excel == '1')
                            {
                                extend: 'excelHtml5',
                                text: '<i class="fas fa-file-excel me-1 text-lg text-success"> </i><span class="font-weight-bold"> Excel',
                                autoFilter: true,
                                sheetName: 'Exported data',
                                exportOptions: {
                                    columns: ':visible:not(:last-child)'
                                },
                            },
                        @endif
                        @if ($authorize->pdf == '1')
                            {
                                extend: 'pdfHtml5',
                                text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"> </i><span class="font-weight-bold"> PDF',
                                exportOptions: {
                                    columns: ':visible:not(:last-child)'
                                },
                            },
                        @endif
                        @if ($authorize->print == '1')
                            {
                                extend: 'print',
                                text: '<i class="fas fa-print me-1 text-lg text-info"> </i><span class="font-weight-bold"> Print',
                                exportOptions: {
                                    columns: ':visible:not(:last-child)'
                                },
                            }
                        @endif
                    ]
                });
            }

            // Panggil fungsi untuk inisialisasi DataTables pada table utama
            initializeDataTable('#list_{{ $dmenu }}');

            // Event listener untuk modal View Historical
            $(document).on('show.bs.modal', function(e) {
                var modal = $(e.target); // Ambil elemen modal
                var modalId = modal.attr('id'); // Ambil ID modal
                var primary = modalId.replace('viewHistoricalModal', ''); // Ekstrak primary ID dari modal

                $.ajax({
                    url: "{{ url($url_menu) . '/ajax' }}",
                    type: "GET",
                    dataType: "JSON",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        id: primary,
                    },
                    success: function(data) {
                        var maintenanceDiv = $('#maintenanceData' + primary);
                        maintenanceDiv.empty(); // Kosongkan konten lama

                        // Buat tabel untuk menampilkan data historis
                        var table = `
                    <div style="overflow-x: auto; width: 100%;">
                        <table class="table display" id="maintenanceTable${primary}">
                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                <tr>
                                    <th>No</th>
                                    <th>Tanggal Kejadian</th>
                                    <th>Permasalahan</th>
                                    <th>Start Pengerjaan</th>
                                    <th>Finish Pengerjaan</th>
                                    <th>Tindakan</th>
                                    <th>Hasil Tindakan</th>
                                    <th>Part Digunakan</th>
                                </tr>
                            </thead>
                            <tbody>`;

                        // Loop through data and create table rows
                        data.forEach(function(item, index) {
                            var row = `
                        <tr data-start-pengerjaan="${ item.start_pengerjaan || '' }" data-finish="${ item.finish || '' }">
                            <td>${index + 1}</td>
                            <td>${item.tanggal_kejadian}</td>
                            <td>${item.permasalahan || '-'}</td>
                            <td>${item.start_pengerjaan || '-'}</td>
                            <td>${item.finish || '-'}</td>
                            <td>${item.tindakan || '-'}</td>
                            <td>${item.hasil_tindakan || '-'}</td>
                            <td>${item.part_digunakan || '-'}</td>
                        </tr>`;
                            table += row;
                        });

                        table += `</tbody></table></div>`;
                        maintenanceDiv.append(table); // Tampilkan tabel di dalam modal

                        // Inisialisasi ulang DataTables pada tabel di dalam modal
                        initializeDataTable('#maintenanceTable' + primary);

                        // Pengaturan warna berdasarkan kondisi start_pengerjaan dan finish
                        $('#maintenanceTable' + primary + ' tbody tr').each(function() {
                            let $row = $(this);
                            let startPengerjaan = $row.data('start-pengerjaan');
                            let finish = $row.data('finish');

                            if (startPengerjaan === '') {
                                $row.css('background-color', '#ffcccc'); // Warna merah
                                $row.attr('data-original-color',
                                    '#ffcccc'); // Simpan warna asli
                            }

                            if (startPengerjaan !== '' && finish === '') {
                                $row.css('background-color', '#ffffcc'); // Warna kuning
                                $row.attr('data-original-color',
                                    '#ffffcc'); // Simpan warna asli
                            }
                        });

                        // Nonaktifkan perubahan warna saat baris di-hover untuk baris dengan warna khusus
                        $('#maintenanceTable' + primary + ' tbody tr').hover(
                            function() {
                                let $row = $(this);
                                let originalColor = $row.attr('data-original-color');
                                // Jika ada warna asli yang tersimpan, pertahankan
                                if (originalColor) {
                                    $row.css('background-color', originalColor);
                                }
                            },
                            function() {
                                let $row = $(this);
                                let originalColor = $row.attr('data-original-color');
                                // Kembalikan ke warna asli setelah hover selesai
                                if (originalColor) {
                                    $row.css('background-color', originalColor);
                                }
                            }
                        );

                        // Tetap pertahankan warna khusus ketika baris diklik, dan hilangkan warna dari baris lain
                        $('#maintenanceTable' + primary + ' tbody tr').on('click', function() {
                            let $clickedRow = $(this);
                            let originalColor = $clickedRow.attr('data-original-color');

                            // Reset semua baris ke warna asli mereka
                            $('#maintenanceTable' + primary + ' tbody tr').each(
                                function() {
                                    let $row = $(this);
                                    let rowOriginalColor = $row.attr(
                                        'data-original-color');
                                    if (rowOriginalColor) {
                                        $row.css('background-color',
                                            rowOriginalColor
                                        ); // Kembali ke warna asli
                                    } else {
                                        $row.css('background-color',
                                            ''
                                        ); // Default warna jika tidak ada warna asli
                                    }
                                });

                            // Terapkan warna asli pada baris yang diklik
                            if (originalColor) {
                                $clickedRow.css('background-color', originalColor);
                            }
                        });

                        // Filter berdasarkan tanggal start dan end
                        $('#filterDateBtn' + primary).click(function() {

                            let startDate = $('#startDate' + primary).val();
                            let endDate = $('#endDate' + primary).val();

                            console.log(startDate, endDate);

                            if (new Date(startDate) > new Date(endDate)) {
                                $('#invalidDateModal').modal(
                                    'show'); // Tampilkan modal error
                                $('#startDate' + primary).val(''); // Kosongkan tanggal
                                $('#endDate' + primary).val(''); // Kosongkan tanggal
                                return; // Hentikan eksekusi filter
                            }

                            filterTableByDate(primary, startDate, endDate);
                        });
                        // Tombol untuk reset filter
                        $('#clearFilterBtn' + primary).click(function() {
                            $('#startDate' + primary).val('');
                            $('#endDate' + primary).val('');
                            filterTableByDate(primary, '',
                                ''); // Reset tabel ke keadaan semula
                        });
                        filterTableByDate(primary);
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error("Gagal mengambil data historis");
                    }
                });
            });

            function filterTableByDate(primary, startDate = '', endDate = '') {
                let table = $('#maintenanceTable' + primary).DataTable();

                // Get the current date
                let currentDate = new Date();

                // Calculate the first and last day of the current month
                let firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).toISOString()
                    .split('T')[0];
                let lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0)
                    .toISOString().split('T')[0];

                // If no startDate or endDate is provided, default to the current month
                if (startDate === '') startDate = firstDayOfMonth;
                if (endDate === '') endDate = lastDayOfMonth;

                // Filter the table based on the provided dates
                $.fn.dataTable.ext.search.push(
                    function(settings, data, dataIndex) {
                        let date = data[1]; // Assuming Tanggal Kejadian is the second column (index 1)
                        if ((startDate === '' && endDate === '') ||
                            (startDate === '' && date <= endDate) ||
                            (endDate === '' && date >= startDate) ||
                            (date >= startDate && date <= endDate)) {
                            return true;
                        }
                        return false;
                    }
                );

                table.draw();
                $.fn.dataTable.ext.search.pop(); // Remove the filter after it has been applied
            }

            //set color button datatables
            $('.dt-button').addClass('btn btn-secondary');
            $('.dt-button').removeClass('dt-button');

            // Cek input pencarian kosong
            $('#searchForm').on('submit', function(e) {
                var searchInput = $('#searchInput').val().trim();
                if (searchInput === "") {
                    e.preventDefault(); // Mencegah pengiriman form
                    $('#emptySearchModal').modal('show'); // Tampilkan modal alert
                }
            });
        });
    </script>
@endpush