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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        <div class="row mt-4">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0 p-3">
                        <h6 class="mb-1">Dashboard</h6>
                        <p class="text-sm">Dashboard MSJOPB</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            @php
                $roles = $user_login->idroles;
            @endphp
            @if ($roles == 'urppic' || $roles == 'admins')
                <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                    <div class="card">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-uppercase font-weight-bold">Notification Outstanding
                                        </p>
                                        <h5 class="font-weight-bolder" style="color: red;">
                                            *{{ $jumlahNotifPPC }}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-primary shadow-primary text-center rounded-circle">
                                        <i class="fas fa-bell text-lg opacity-10"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-primary m-2" onclick="detailNotifPPC()">Detail</button>
                    </div>
                </div>
                {{-- <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                    <div class="card">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-uppercase font-weight-bold">Notification Update
                                        </p>
                                        <h5 class="font-weight-bolder" style="color: red;">
                                            *{{ $jumlahNotif }}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-primary shadow-primary text-center rounded-circle">
                                        <i class="fas fa-bell text-lg opacity-10"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-primary m-2">Detail</button>
                    </div>
                </div> --}}
            @elseif ($roles == 'market' || $roles == 'admins')
            @endif
        </div>

        <div class="row">
            <style>
                .custom-calendar {
                    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial
                }

                .custom-calendar .calendar {
                    width: 100%
                }

                .custom-calendar .cal-header {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 12px
                }

                .custom-calendar .month {
                    font-weight: 600;
                    font-size: 1.05rem
                }

                .custom-calendar .nav {
                    display: flex;
                    gap: 8px
                }

                .custom-calendar button.cc-btn {
                    background: transparent;
                    border: 1px solid transparent;
                    padding: 6px 10px;
                    border-radius: 8px;
                    cursor: pointer
                }

                .custom-calendar button.cc-btn:hover {
                    background: #f3f4f6
                }

                .custom-calendar .today-btn {
                    font-size: 0.85rem;
                    color: #028284;
                    border: 1px dashed rgba(59, 130, 246, 0.25);
                    padding: 6px 10px;
                    border-radius: 8px;
                    background: transparent;
                    cursor: pointer
                }

                .custom-calendar .weekdays {
                    display: grid;
                    grid-template-columns: repeat(7, 1fr);
                    text-align: center;
                    color: #6b7280;
                    font-size: 0.82rem;
                    padding: 8px 0;
                    border-bottom: 1px solid #eef2ff
                }

                .custom-calendar .days {
                    display: grid;
                    grid-template-columns: repeat(7, 1fr);
                    gap: 6px;
                    padding: 10px 0
                }

                .custom-calendar .day {
                    height: 44px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 8px;
                    cursor: pointer;
                    position: relative
                }

                .custom-calendar .muted {
                    color: #9ca3af
                }

                .custom-calendar .selected {
                    background: #028284;
                    color: white;
                    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.18)
                }

                .custom-calendar .today {
                    border: 1px solid rgba(59, 130, 246, 0.2);
                    font-weight: 600
                }

                .custom-calendar .holiday {
                    color: #dc2626;
                    font-weight: 600
                }

                .custom-calendar .holiday-dot::after {
                    content: "";
                    position: absolute;
                    bottom: 6px;
                    right: 8px;
                    width: 6px;
                    height: 6px;
                    background: #dc2626;
                    border-radius: 50%;
                }

                .custom-calendar .info {
                    margin-top: 12px;
                    padding: 10px;
                    border-radius: 8px;
                    background: linear-gradient(180deg, #ffffff, #fbfdff);
                    font-size: 0.95rem
                }

                .custom-calendar .flex {
                    display: flex;
                    gap: 8px;
                    align-items: center
                }

                .holiday-list {
                    margin-top: 14px;
                    padding: 10px;
                    background: #f9fafb;
                    border: 1px solid #e5e7eb;
                    border-radius: 8px;
                    font-size: 0.9rem
                }

                .holiday-list h4 {
                    margin: 0 0 8px 0;
                    font-size: 1rem;
                    color: #111827
                }

                .holiday-list ul {
                    margin: 0;
                    padding-left: 18px
                }

                .holiday-list li {
                    margin-bottom: 4px
                }
            </style>
            <div class="col-6 mt-3">
                <div class="card mb-4">
                    <div class="card-header pb-0 p-3">
                        <h5>Schedule Shipment</h5>
                    </div>
                    <div class="card-body">
                        <div class="custom-calendar">
                            <div class="calendar" role="application" aria-label="Kalender">
                                <div class="cal-header">
                                    <div class="flex">
                                        <div class="nav">
                                            <button class="cc-btn" id="prev" aria-label="Bulan sebelumnya">◀</button>
                                            <button class="cc-btn" id="next" aria-label="Bulan berikutnya">▶</button>
                                        </div>
                                        <div style="width:12px"></div>
                                        <div class="month" id="monthYear">Januari 2025</div>
                                    </div>
                                    <div class="flex">
                                        <button class="today-btn" id="goToday">Hari ini</button>
                                    </div>
                                </div>

                                <div class="weekdays" aria-hidden="true">
                                    <div>Ming</div>
                                    <div>Sen</div>
                                    <div>Sel</div>
                                    <div>Rab</div>
                                    <div>Kam</div>
                                    <div>Jum</div>
                                    <div>Sab</div>
                                </div>

                                <div class="days" id="daysGrid" role="grid" aria-label="Hari-hari dalam bulan">
                                </div>

                                <div class="holiday-list" id="holidayList">
                                    <h4>Libur Nasional</h4>
                                    <ul id="holidayItems"></ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="modalDetailSchedule" tabindex="-1" role="dialog"
        aria-labelledby="modalDetailScheduleCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-start" id="modalDetailScheduleLongTitle">Detail Schedule</h5>
                    <h5 class="modal-title text-end" id="modalDetailScheduleTanggal">Detail Schedule</h5>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table" id="tblDetailSchedule" style="width:100%; font-size: 14px;">
                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                <tr>
                                    <th>No</th>
                                    <th>Customer</th>
                                    <th>Stuffing Date</th>
                                    <th>Nomor SO</th>
                                    <th>Nomor PO</th>
                                    <th>Material</th>
                                    <th>GSM</th>
                                    <th>Width</th>
                                    <th>Length</th>
                                    <th>Weight</th>
                                    <th>Qty Order</th>
                                    <th>Shipment By</th>
                                    <th>Note Marketing</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Data AJAX akan dimasukkan di sini -->
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th colspan="9" style="text-align:right">Total Weight:</th>
                                    <th></th> <!-- Di sini akan diisi total weight -->
                                    <th colspan="3"></th>
                                </tr>
                            </tfoot>
                        </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 -->
    <div class="modal fade" id="modalDetailNotif" tabindex="-1" role="dialog"
        aria-labelledby="modalDetailMotifCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-start" id="modalDetailNotifLongTitle">Detail Notification</h5>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table" id="tblDetailNotif" style="width:100%; font-size: 14px; text-align: center;">
                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                <tr>
                                    <th>No</th>
                                    <th>Request By</th>
                                    <th>Request Date</th>
                                </tr>
                            </thead>
                            <tbody style="text-align: center;">
                                @php
                                    $idx = 1;
                                @endphp
                                @foreach ($notifmkt as $notifmkt)
                                    <tr>
                                        <td>{{ $idx }}</td>
                                        <td>{{ $notifmkt->request_by }}</td>
                                        <td>{{ $notifmkt->request_date }}</td>
                                    </tr>
                                    @php
                                        $idx++;
                                    @endphp
                                @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 -->
    <div class="modal fade" id="modalDetailNotifPPC" tabindex="-1" role="dialog"
        aria-labelledby="modalDetailMotifCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-start" id="modalDetailNotifPPCLongTitle">Detail Notification</h5>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table" id="tblDetailNotif"
                            style="width:100%; font-size: 14px; text-align: center;">
                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                <tr>
                                    <th>No</th>
                                    <th>Request Date</th>
                                    <th>Jumlah Item</th>
                                </tr>
                            </thead>
                            <tbody style="text-align: center;">
                                @php
                                    $idx = 1;
                                @endphp
                                @foreach ($notifppic as $notifppic)
                                    <tr>
                                        <td>{{ $idx }}</td>
                                        <td>{{ $notifppic->request_date }}</td>
                                        <td>{{ $notifppic->jumlah_item }}</td>
                                    </tr>
                                    @php
                                        $idx++;
                                    @endphp
                                @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>
@endsection

@push('js')
    <script src="./assets/js/plugins/chartjs.min.js"></script>
    <script>
        let tableDetailSchedule = $('#tblDetailSchedule').DataTable({
            columns: [{
                    title: "No"
                },
                {
                    title: "Customer"
                },
                {
                    title: "Stuffing Date"
                },
                {
                    title: "Nomor SO"
                },
                {
                    title: "Nomor PO"
                },
                {
                    title: "Material"
                },
                {
                    title: "GSM"
                },
                {
                    title: "Width"
                },
                {
                    title: "Length"
                },
                {
                    title: "Weight"
                },
                {
                    title: "Qty Order"
                },
                {
                    title: "Shipment By"
                },
                {
                    title: "Note Marketing"
                }
            ],
            paging: true,
            searching: true,
            ordering: false,
            lengthChange: false,
            autoWidth: false,
        });
        (function() {
            const daysGrid = document.getElementById('daysGrid');
            const monthYear = document.getElementById('monthYear');
            const prevBtn = document.getElementById('prev');
            const nextBtn = document.getElementById('next');
            const goToday = document.getElementById('goToday');
            const holidayItems = document.getElementById('holidayItems');

            // Ganti API ke api-harilibur.vercel.app
            const API_URL = 'https://api-harilibur.vercel.app/api';
            let holidayCache = {};

            // Ambil data libur nasional (is_national_holiday === true)
            async function getHolidays(year) {
                if (holidayCache[year]) return holidayCache[year];
                try {
                    const res = await fetch(`${API_URL}?year=${year}`);
                    const data = await res.json();

                    // Filter hanya yang status libur nasional = true
                    const nationalHolidays = data.filter(h => h.is_national_holiday === true);

                    // Ubah format tanggal ke YYYY-MM-DD agar sesuai dengan pencocokan di render()
                    const formatted = nationalHolidays.map(h => ({
                        date: h.holiday_date, // sudah format YYYY-MM-DD
                        name: h.holiday_name
                    }));

                    holidayCache[year] = formatted;
                    return formatted;
                } catch (e) {
                    console.error('Gagal ambil data libur:', e);
                    return [];
                }
            }

            let current = new Date();
            let selected = null;

            async function render() {
                daysGrid.innerHTML = '';
                holidayItems.innerHTML = '';

                const year = current.getFullYear();
                const month = current.getMonth();
                const monthNames = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus',
                    'September', 'Oktober', 'November', 'Desember'
                ];
                monthYear.textContent = `${monthNames[month]} ${year}`;

                const first = new Date(year, month, 1);
                const startDay = first.getDay();
                const daysInMonth = new Date(year, month + 1, 0).getDate();

                const prevDays = startDay;
                const prevMonthLast = new Date(year, month, 0).getDate();

                const holidays = await getHolidays(year);

                for (let i = prevMonthLast - prevDays + 1; i <= prevMonthLast; i++) {
                    const el = document.createElement('div');
                    el.className = 'day muted';
                    el.textContent = i;
                    el.setAttribute('aria-hidden', 'true');
                    daysGrid.appendChild(el);
                }

                const thisMonthHolidays = [];

                for (let d = 1; d <= daysInMonth; d++) {
                    const el = document.createElement('div');
                    el.className = 'day';
                    el.textContent = d;
                    el.setAttribute('role', 'button');
                    el.setAttribute('tabindex', '0');

                    const dateObj = new Date(year, month, d);
                    const now = new Date();

                    if (dateObj.toDateString() === now.toDateString()) {
                        el.classList.add('today');
                    }

                    if (selected && dateObj.toDateString() === selected.toDateString()) {
                        el.classList.add('selected');
                    }

                    // Tandai hari Minggu
                    if (dateObj.getDay() === 0) {
                        el.classList.add('holiday');
                    }

                    // Tandai libur nasional
                    const key = `${year}-${String(month+1).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
                    const holidayItem = holidays.find(h => h.date === key);
                    if (holidayItem) {
                        el.classList.add('holiday', 'holiday-dot');
                        el.title = holidayItem.name;
                        thisMonthHolidays.push({
                            date: key,
                            name: holidayItem.name
                        });
                    }

                    el.addEventListener('click', () => onSelect(dateObj, el, holidayItem));
                    el.addEventListener('keydown', (e) => {
                        if (e.key === 'Enter' || e.key === ' ') onSelect(dateObj, el, holidayItem);
                    });

                    daysGrid.appendChild(el);
                }

                const totalCells = daysGrid.children.length;
                const remainder = totalCells % 7;
                if (remainder !== 0) {
                    const need = 7 - remainder;
                    for (let k = 1; k <= need; k++) {
                        const el = document.createElement('div');
                        el.className = 'day muted';
                        el.textContent = k;
                        el.setAttribute('aria-hidden', 'true');
                        daysGrid.appendChild(el);
                    }
                }

                // Tampilkan daftar libur nasional bulan ini
                if (thisMonthHolidays.length > 0) {
                    thisMonthHolidays.forEach(h => {
                        const li = document.createElement('li');
                        const tanggal = new Date(h.date).toLocaleDateString('id-ID', {
                            day: 'numeric',
                            month: 'long',
                            year: 'numeric'
                        });
                        li.textContent = `${tanggal} – ${h.name}`;
                        holidayItems.appendChild(li);
                    });
                } else {
                    const li = document.createElement('li');
                    li.textContent = 'Tidak ada libur nasional bulan ini.';
                    holidayItems.appendChild(li);
                }
            }

            function onSelect(dateObj, el, holidayItem) {
                const prev = daysGrid.querySelector('.selected');
                if (prev) prev.classList.remove('selected');
                el.classList.add('selected');
                selected = dateObj;
                showInfo(dateObj, holidayItem);
            }

            function showInfo(dateObj, holidayItem) {
                const opts = {
                    weekday: 'long',
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                };
                const formatted = dateObj.toLocaleDateString('id-ID', opts);
                document.getElementById('modalDetailScheduleTanggal').textContent = formatted;
                const year = dateObj.getFullYear();
                const month = String(dateObj.getMonth() + 1).padStart(2, '0'); // bulan dari 0-11
                const day = String(dateObj.getDate()).padStart(2, '0');

                const newFormat = `${year}-${month}-${day}`;
                const roles = `{{ $user_login->idroles }}`;
                $.ajax({
                    url: "{{ URL::to('/') }}/get-data", // file tujuan di server
                    type: "POST",
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content'), // penting untuk laravel
                        tanggal: newFormat,
                        roles: roles
                    },
                    success: function(response) {
                        // Kosongkan tabel DataTables
                        tableDetailSchedule.clear();

                        // Cek apakah ada data
                        if (response.length > 0) {
                            // Format data untuk DataTables
                            const dataRows = response.map((item, index) => [
                                index + 1,
                                item.customer,
                                item.request_date,
                                item.nomor_so,
                                item.nomor_po,
                                item.material,
                                item.gsm,
                                item.length,
                                item.width,
                                item.weight,
                                item.qty_order,
                                item.shipment_by,
                                item.note_marketing
                            ]);

                            // Hitung total weight
                            const totalWeight = response.reduce((sum, item) => sum + parseFloat(item
                                .weight || 0), 0);

                            // Tambahkan ke DataTables
                            tableDetailSchedule.clear().rows.add(dataRows).draw();

                            // Tambahkan total ke footer (kolom ke-9, index 9)
                            $(tableDetailSchedule.column(9).footer()).html(totalWeight.toFixed(2));
                        } else {
                            // Jika tidak ada data, tetap tampilkan satu baris kosong
                            tableDetailSchedule.rows.add([
                                ["", "", "", "", "", "", "Tidak ada jadwal pada tanggal ini.", "",
                                    "", "", "", "", ""
                                ]
                            ]).draw();
                            $(tableDetailSchedule.column(9).footer()).html(0);
                        }

                        // Tampilkan modal
                        $('#modalDetailSchedule').modal('show');
                    },
                    error: function(xhr, status, error) {
                        $("#respon").text("Terjadi error: " + error);
                    }
                });
            }

            prevBtn.addEventListener('click', () => {
                current = new Date(current.getFullYear(), current.getMonth() - 1, 1);
                render();
            });
            nextBtn.addEventListener('click', () => {
                current = new Date(current.getFullYear(), current.getMonth() + 1, 1);
                render();
            });
            goToday.addEventListener('click', () => {
                current = new Date();
                render();
            });

            render();
            window._calendar = {
                render,
                currentState: () => ({
                    current,
                    selected
                })
            };
        })();
    </script>
    <script>
        function detailNotif() {
            $('#modalDetailNotif').modal('show');
        }

        function detailNotifPPC() {
            $('#modalDetailNotifPPC').modal('show');
        }
    </script>
@endpush