@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 mb-2 mx-1">
                    <div class="card" style="min-height: 650px;">
                        <div class="card-header">
                            <div class="d-flex align-items-center">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                                
                                {{-- button download word --}}
                                <button class="btn btn-success btn-sm mb-0 ms-2" 
                                        style="padding: 4px 10px; line-height: 1.2; border-radius: 4px;"
                                        data-bs-toggle="tooltip" 
                                        data-bs-placement="top" 
                                        title="Instruksi Kerja Porsi Catering"
                                        onclick="window.open('https://drive.google.com/file/d/13CiG3Y8OHH0d0Q52ul1GCI6MkO5yTuw5/view?usp=drive_link', '_blank')">
                                    <i class="fas fa-info-circle"></i>
                                </button>
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            {{-- Ganti tombol tambah yang lama dengan yang baru --}}
                            <div class="col-12 mb-3">
                                <button type="button" class="btn btn-primary mb-0" data-bs-toggle="modal"
                                    data-bs-target="#menuPlanModal">
                                    <i class="fas fa-plus me-1"></i>
                                    <span class="font-weight-bold">Tambah Porsi Menu Plan</span>
                                </button>
                            </div>

                            {{-- Tambahkan modal sebelum tag </div> terakhir --}}
                            <div class="modal fade" id="menuPlanModal" tabindex="-1">
                                <div class="modal-dialog modal-dialog-scrollable modal-xl modal-fullscreen-sm-down">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Pilih Menu Plan</h5>
                                            <button type="button" class="btn" data-bs-dismiss="modal" aria-label="Close"
                                                style="position: absolute; right: 1rem; top: 1rem;">
                                                <i class="fas fa-times text-dark fs-4"></i>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="table-responsive">
                                                <table class="table table-bordered align-items-center mb-0" id="tabel-menu-plan">
                                                    <thead class="thead-light">
                                                        <tr>
                                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Hari</th>
                                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Tanggal</th>
                                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Catering</th>
                                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">Shift</th>
                                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Menu 1</th>
                                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Menu 2</th>
                                                            <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Aksi</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($plan as $group)
                                                            @php 
                                                                $firstItem = true;
                                                                $encryptedIds = collect($group['id_menu_plans'])
                                                                    ->map(fn($id) => encrypt($id))
                                                                    ->implode('|||');
                                                            @endphp

                                                            @foreach ($group['items'] as $pl)
                                                                {{-- Baris pertama grup diberi garis atas yang lebih tebal --}}
                                                                <tr style="{{ $firstItem ? 'border-top: 3px solid #adb5bd !important;' : 'border: none !important;' }}">
                                                                    <td class="align-middle text-sm text-center">{{ $group['hari'] }}</td>
                                                                    <td class="align-middle text-sm text-center text-nowrap">{{ date('d-m-Y', strtotime($group['tanggal'])) }}</td>
                                                                    <td class="align-middle text-sm font-weight-bold text-dark">{{ $pl->catering_name }}</td>
                                                                    <td class="align-middle text-sm font-weight-bold text-dark">{{ $group['shift'] }}</td>
                                                                    <td class="align-middle text-sm">{{ $pl->menu1_name }}</td>
                                                                    <td class="align-middle text-sm">{{ $pl->menu2_name ?? '-' }}</td>
                                                                    <td class="align-middle text-center">
                                                                        @if($firstItem)
                                                                            <button type="button" class="btn btn-sm btn-primary mb-0"
                                                                                onclick="selectMenuPlan('{{ $encryptedIds }}')">
                                                                                <i class="fas fa-plus me-1"></i> Pilih
                                                                            </button>
                                                                            @php $firstItem = false; @endphp
                                                                        @endif
                                                                    </td>
                                                                </tr>
                                                            @endforeach
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <div id="list_trplan_wrapper" class="dataTables_wrapper no-footer">
                                    <table class="table display" id="tabel-transaksi">
                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th>No</th>
                                                <th>Id Menu Plan</th>
                                                <th>Hari</th>
                                                <th>Tanggal</th>
                                                <th>Catering</th>
                                                <th>Shift</th>
                                                <th>Qty. Satpam</th>
                                                <th>Qty. Office</th>
                                                <th>Qty. Produksi</th>
                                                <th>Qty. Mess</th>
                                                <th>Total Qty</th>
                                                <th>Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($plans as $pl)
                                                @php
                                                    $total =
                                                        ($pl->total_porsi_satpam ?? 0) +
                                                        ($pl->total_porsi_produksi ?? 0) +
                                                        ($pl->total_porsi_office ?? 0) +
                                                        ($pl->total_porsi_mess ?? 0);

                                                    $message =
                                                        "*List Porsi Catering PT. Multi Spunindo Jaya, Tbk.*\n" .
                                                        "\n" .
                                                        "*Hari/Tanggal:*  {$pl->hari}, " .
                                                        date('d-m-Y', strtotime($pl->tanggal)) .
                                                        " (Shift {$pl->shift})\n" .
                                                        "*Catering :* $pl->catering_name\n" .
                                                        "\n" .
                                                        "*Qty Satpam :* $pl->total_porsi_satpam\n" .
                                                        "*Qty Office:* $pl->total_porsi_office\n" .
                                                        "*Qty Produksi:* $pl->total_porsi_produksi\n" .
                                                        "*Qty Mess:* $pl->total_porsi_mess\n" .
                                                        "\n" .
                                                        "*Total Keseluruhan:* $total\n" .
                                                        "\n" .
                                                        "*Ttd,*\n" .
                                                        "*Satpam PT. MSJ.*\n";

                                                    // $waLink = 'https://wa.me/?text=' . urlencode($message);
                                                    $waLink = urlencode($message);
                                                @endphp
                                                <tr>
                                                    <td>{{ $loop->iteration }}</td>
                                                    <td>{{ $pl->id_menu_plan }}</td>
                                                    <td>{{ $pl->hari }}</td>
                                                    <td>{{ $pl->tanggal }}</td>
                                                    <td>{{ $pl->catering_name }}</td>
                                                    <td style="text-align: center">{{ $pl->shift }}</td>
                                                    <td style="text-align: center">{{ $pl->total_porsi_satpam }}</td>
                                                    <td style="text-align: center">{{ $pl->total_porsi_office }}</td>
                                                    <td style="text-align: center">{{ $pl->total_porsi_produksi }}</td>
                                                    <td style="text-align: center">{{ $pl->total_porsi_mess }}</td>

                                                    <td style="text-align: center">
                                                        {{ ($pl->total_porsi_satpam ?? 0) + ($pl->total_porsi_produksi ?? 0) + ($pl->total_porsi_office ?? 0) + ($pl->total_porsi_mess ?? 0) }}
                                                    </td>

                                                    <td class="text-sm font-weight-normal">
                                                        <div class="btn-group dropright">
                                                            <button type="button" class="btn btn-primary btn-sm"
                                                                onclick="window.location='{{ url($url_menu . '/show/' . encrypt($pl->id_menu_plan)) }}'">
                                                                <i class="fas fa-eye"></i> View
                                                            </button>
                                                            <button type="button"
                                                                class="btn btn-primary btn-sm dropdown-toggle dropdown-toggle-split"
                                                                data-bs-toggle="dropdown" aria-expanded="false">
                                                                <span class="sr-only">Toggle Dropdown</span>
                                                            </button>
                                                            <div class="dropdown-menu">
                                                                @if ($authorize->edit == '1' && $pl->isactive == 1)
                                                                    <a class="dropdown-item"
                                                                        onclick="window.location='{{ url($url_menu . '/edit/' . encrypt($pl->id_menu_plan)) }}'"
                                                                        style="cursor: pointer;">
                                                                        <i class="fas fa-pen-to-square"></i>
                                                                        <span>Edit</span>
                                                                    </a>
                                                                @endif
                                                                <button class="dropdown-item" href="" target="_blank"
                                                                    onclick="sendWhatsApp('{{ $waLink }}')">
                                                                    <i class="fas fa-paper-plane"></i>
                                                                    <span>Send WA</span>
                                                                </button>
                                                                @if ($authorize->delete == '1' && $pl->id_menu_plan != 'msjit')
                                                                    <form
                                                                        action="{{ url($url_menu . '/' . encrypt($pl->id_menu_plan)) }}"
                                                                        method="POST" style="display: inline">
                                                                        @csrf
                                                                        @method('DELETE')
                                                                        <a class="dropdown-item"
                                                                            onclick="confirmDelete(event, '{{ $pl->id_menu_plan }}', this)"
                                                                            style="cursor: pointer;">
                                                                            <i class="fas fa-trash"></i> <span>Hapus</span>
                                                                        </a>
                                                                    </form>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <style>
    /* Hilangkan border default dari tabel dan cell */
    #tabel-menu-plan, 
    #tabel-menu-plan th, 
    #tabel-menu-plan td, 
    #tabel-menu-plan tr {
        border: none !important;
        border-width: 0 !important;
        box-shadow: none !important;
    }

    /* Pastikan border-collapse tetap collapse agar border-top pada TR bisa muncul */
    #tabel-menu-plan {
        border-collapse: collapse !important;
    }

    /* Opsional: Tetap beri garis bawah pada Header jika diinginkan */
    #tabel-menu-plan thead th {
        border-bottom: 2px solid #adb5bd !important;
    }
</style>
    <script>
        $(document).ready(function() {
            $('#tabel-transaksi').DataTable({
                "languange": {
                    "search": "Cari:",
                    "lengthMenu": "Tampilkan _MENU_ data",
                    "zeroRecords": "Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Data tidak ditemukan",
                    "infoFiltered": "(pencarian dari _MAX_ data)",
                },
                "destroy": true,
                "ordering": true,
                responsive: true,
            });

            $('#tabel-menu-plan').DataTable({
                "languange": {
                    "search": "Cari:",
                    "lengthMenu": "Tampilkan _MENU_ data",
                    "zeroRecords": "Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Data tidak ditemukan",
                    "infoFiltered": "(pencarian dari _MAX_ data)",
                },
                "destroy": true,
                "ordering": false,
                responsive: true,
            });
        });


        function confirmDelete(event, id, element) {
            event.preventDefault();
            Swal.fire({
                title: 'Konfirmasi Hapus',
                text: `Apakah anda yakin ingin menghapus porsi catering dengan Id Menu Plan ${id}?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, Hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    element.closest('form').submit();
                }
            });
            return false;
        }

        function sendWhatsApp(message) {
            // const encoded = encodeURIComponent(message);
            const isMobile = /Android|iPhone|iPad/i.test(navigator.userAgent);
            const url = `https://wa.me/?text=${message}`;
            window.open(url, '_blank');
        }
    </script>
    <script>
    function selectMenuPlan(encryptedIds) {
        // Encode URL untuk menghindari masalah dengan karakter khusus
        var encodedIds = encodeURIComponent(encryptedIds);
        window.location.href = '{{ url($url_menu . '/add') }}/' + encodedIds;
    }
    </script>
@endsection