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

@push('styles')
    <style>
        @media (max-width: 768px) {
            .container-fluid {
                padding-left: 10px !important;
                padding-right: 10px !important;
            }

            .card-header h6 {
                font-size: 0.9rem;
            }

            .btn {
                padding: 0.4rem 0.6rem;
                font-size: 0.8rem;
            }

            .form-control,
            .form-select {
                font-size: 16px !important;
            }

            .badge {
                font-size: 0.65rem;
                padding: 0.3em 0.45em;
            }
        }

        @media (max-width: 576px) {
            .card-body {
                padding: 0.75rem;
            }

            .card-header {
                padding: 0.75rem 1rem;
            }
        }

        .select-all-checkbox {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }

        .bag-checkbox {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }

        .table tbody tr.selected-row {
            background-color: #e8f5e9 !important;
        }

        .action-bag-btn {
            width: 32px;
            height: 32px;
            padding: 0 !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
    </style>
@endpush

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => $title ?? 'Detail Approval Placement'])

    <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">
                        <button class="btn btn-secondary mb-0" onclick="window.location='{{ route('trspnd.index') }}'"><i
                                class="fas fa-circle-left me-1"></i><span class="font-weight-bold">Kembali</span></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">

        {{-- Approval Info Card --}}
        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header pb-0">
                        <h6 class="mb-0">
                            Detail Request Approval Placement
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <p class="text-sm text-bold text-uppercase text-muted mb-1">Requester</p>
                                <p class="font-weight-bold mb-3">
                                    {{ $approval->requester_firstname ?? '' }} {{ $approval->requester_lastname ?? '' }}
                                    <br><small class="text-muted">({{ $approval->requester_name ?? '-' }})</small>
                                </p>
                            </div>
                            <div class="col-md-3">
                                <p class="text-sm text-bold text-uppercase text-muted mb-1">Approver</p>
                                <p class="font-weight-bold mb-3">
                                    {{ $approval->approver_firstname ?? '' }} {{ $approval->approver_lastname ?? '' }}
                                    <br><small class="text-muted">({{ $approval->approver_name ?? '-' }})</small>
                                </p>
                            </div>
                            <div class="col-md-3">
                                <p class="text-sm text-bold text-uppercase text-muted mb-1">Layout Tujuan</p>
                                <p class="mb-3">
                                    <span class="badge bg-success">{{ $approval->to_layout_name ?? '-' }}</span>
                                </p>
                            </div>
                            <div class="col-md-3">
                                <p class="text-sm text-bold text-uppercase text-muted mb-1">Tanggal Request</p>
                                <p class="font-weight-bold mb-3">
                                    {{ \Carbon\Carbon::parse($approval->request_date)->format('d/m/Y H:i') }}
                                </p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <p class="text-sm text-bold text-uppercase text-muted mb-1">Total Bag</p>
                                <p class="font-weight-bold mb-0">
                                    <span class="badge bg-info text-white">{{ $approvals->count() }} Bag</span>
                                </p>
                            </div>
                            <div class="col-md-6">
                                <p class="text-sm text-bold text-uppercase text-muted mb-1">Status</p>
                                <p class="mb-0">
                                    <span class="badge bg-warning text-white">
                                        <i class="fas fa-clock me-1"></i>PENDING
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Bag List Table --}}
        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header pb-0">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6 class="mb-0">
                                Daftar Bag yang Menunggu Approval
                            </h6>
                            <div>
                                <span class="text-sm text-muted" id="selectedCount">0 bag dipilih</span>
                            </div>
                        </div>
                    </div>
                    <div class="card-body px-3 pt-3 pb-2">
                        <div class="table-responsive">
                            <table class="table table-s table-hover" id="approvalTable">
                                <thead class="thead-light" style="background-color: #ffc10726;">
                                    <tr>
                                        <th class="text-center align-middle checkbox-col no-sort">
                                            <input type="checkbox" class="select-all-checkbox" id="selectAll"
                                                title="Pilih Semua">
                                        </th>
                                        <th>No</th>
                                        <th class="text-center">Action</th>
                                        <th>No. Approval</th>
                                        <th>Bag ID</th>
                                        <th>Material</th>
                                        <th>SKU</th>
                                        <th>Berat</th>
                                        <th>Dari Layout</th>
                                        <th>Ke Layout</th>
                                        <th>Status Bag</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($approvals as $index => $item)
                                        <tr>
                                            <td class="text-center align-middle checkbox-col">
                                                <input type="checkbox" class="bag-checkbox"
                                                    value="{{ $item->approval_id }}" data-bag-id="{{ $item->bag_id }}">
                                            </td>

                                            <td class="text-center">{{ $index + 1 }}</td>

                                            <td class="text-center">
                                                <button type="button"
                                                    class="btn btn-sm btn-warning action-bag-btn mb-0 btn-edit-approval-bag"
                                                    title="Edit Layout Tujuan" data-approval-id="{{ $item->approval_id }}"
                                                    data-bag-id="{{ e($item->bag_id) }}"
                                                    data-barcode-value="{{ e($item->barcode_value ?? $item->bag_id) }}"
                                                    data-to-layout-id="{{ e($item->to_layout_id) }}"
                                                    data-to-layout-name="{{ e($item->to_layout_name ?? '-') }}"
                                                    data-bs-toggle="modal" data-bs-target="#editBagApprovalModal">
                                                    <i class="fas fa-pencil-alt"></i>
                                                </button>

                                                <button type="button" class="btn btn-sm btn-danger action-bag-btn mb-0"
                                                    title="Hapus Bag dari Approval"
                                                    onclick="removeOneApprovalBag('{{ $item->approval_id }}', '{{ e($item->barcode_value ?? $item->bag_id) }}')">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </td>

                                            <td>
                                                <span class="font-weight-bold text-s">{{ $item->approval_no }}</span>
                                            </td>
                                            <td>
                                                <span class="font-weight-bold">{{ $item->barcode_value ?? '-' }}</span>
                                                <br>
                                                <small class="text-muted">{{ $item->bag_id }}</small>
                                            </td>
                                            <td>{{ $item->nama_material ?? '-' }}</td>
                                            <td>{{ $item->sku_code ?? '-' }}</td>
                                            <td>{{ rtrim(rtrim(number_format((float) ($item->berat ?? 0), 2, ',', '.'), '0'), ',') }}
                                                kg</td>
                                            <td>
                                                <span class="badge badge-s bg-secondary">
                                                    {{ $item->from_layout_name ?? '-' }}
                                                </span>
                                            </td>
                                            <td>
                                                <span class="badge badge-s bg-success">
                                                    {{ $item->to_layout_name ?? '-' }}
                                                </span>
                                            </td>
                                            <td>
                                                <span class="badge badge-s bg-info text-white">
                                                    {{ $item->bag_status ?? '-' }}
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr class="table-light">
                                        <td colspan="7" class="text-end font-weight-bold">Total Berat:</td>
                                        <td class="font-weight-bold">
                                            {{ rtrim(rtrim(number_format((float) $approvals->sum('berat'), 2, ',', '.'), '0'), ',') }}
                                            kg
                                        </td>
                                        <td colspan="3"></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Action Buttons --}}
        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <label class="form-label text-s text-uppercase text-muted">Catatan Approval
                                    (opsional)</label>
                                <textarea class="form-control form-control-s    " id="approvalNotes" rows="2"
                                    placeholder="Tambahkan catatan approval..."></textarea>
                            </div>
                            <div class="col-md-4 d-flex align-items-end gap-2 mt-4">
                                {{-- Approve Form --}}
                                <form action="{{ route('trspnd.approval.approve') }}" method="POST" id="approveForm"
                                    class="flex-grow-1">
                                    @csrf
                                    <input type="hidden" name="approval_notes" id="approveNotes">
                                    <div id="approveIdsContainer"></div>
                                    <button type="button" class="btn btn-success btn-s w-100" id="btnApprove" disabled
                                        onclick="submitApprove()">
                                        <i class="fas fa-check-circle me-1"></i>
                                        Approve
                                    </button>
                                </form>

                                {{-- Reject Form --}}
                                <form action="{{ route('trspnd.approval.reject') }}" method="POST" id="rejectForm"
                                    class="flex-grow-1">
                                    @csrf
                                    <input type="hidden" name="approval_notes" id="rejectNotes">
                                    <div id="rejectIdsContainer"></div>
                                    <button type="button" class="btn btn-danger btn-s w-100" id="btnReject" disabled
                                        onclick="submitReject()">
                                        <i class="fas fa-times-circle me-1"></i>
                                        Reject
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="editBagApprovalModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <form action="{{ route('trspnd.approval.update-destination') }}" method="POST" class="modal-content"
                    id="editBagApprovalForm">
                    @csrf

                    <input type="hidden" name="approval_ids[]" id="editApprovalId">

                    <div class="modal-header">
                        <h5 class="modal-title">Edit Layout Tujuan Bag</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <div class="alert alert-success py-2">
                            Mengubah layout tujuan hanya untuk bag ini.
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Bag</label>
                            <input type="text" class="form-control" id="editBagLabel" readonly>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">
                                Layout Tujuan Baru <span class="text-danger">*</span>
                            </label>

                            <select name="to_layout_id" id="editToLayoutId" class="form-select" required>
                                <option value="">Pilih Layout Tujuan</option>

                                @foreach ($layouts as $layout)
                                    @php
                                        $occupiedBags = (int) ($layout->occupied_bags ?? 0);
                                        $pendingLayoutApprovals = (int) ($layout->pending_layout_approvals ?? 0);
                                        $hasBaris = trim((string) ($layout->baris ?? '')) !== '';

                                        // Hybrid:
                                        // layout dengan baris = slot detail, kalau sudah isi/pending disabled
                                        // layout tanpa baris = general, boleh banyak bag
                                        $isLayoutUsed = $hasBaris && ($occupiedBags > 0 || $pendingLayoutApprovals > 0);
                                    @endphp

                                    <option value="{{ $layout->id_layout }}" @disabled($isLayoutUsed)>
                                        {{ $layout->nama_layout }}{{ $hasBaris ? ' - BARIS ' . $layout->baris : '' }}

                                        @if ($layout->is_gray_area)
                                            (Gray Area)
                                        @elseif ($hasBaris && $pendingLayoutApprovals > 0)
                                            (Menunggu Approval)
                                        @elseif ($hasBaris && $occupiedBags > 0)
                                            (Terisi)
                                        @elseif (!$hasBaris && ($occupiedBags > 0 || $pendingLayoutApprovals > 0))
                                            (Isi: {{ $occupiedBags }}
                                            Bag{{ $pendingLayoutApprovals > 0 ? ', Pending: ' . $pendingLayoutApprovals : '' }})
                                        @endif
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary mb-0" data-bs-dismiss="modal">
                            Batal
                        </button>

                        <button type="button" class="btn btn-warning mb-0" onclick="submitEditOneApprovalBag()">
                            <i class="fas fa-save me-1"></i>
                            Simpan
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <form action="{{ route('trspnd.approval.remove-bags') }}" method="POST" id="removeOneApprovalForm">
            @csrf
            <input type="hidden" name="approval_ids[]" id="removeApprovalId">
            <input type="hidden" name="notes" id="removeApprovalNotes">
        </form>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            @if (session('success'))
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil',
                    text: '{{ session('success') }}',
                    confirmButtonColor: '#028284'
                });
            @endif

            @if ($errors->any())
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: '{{ $errors->first() }}',
                    confirmButtonColor: '#028284'
                });
            @endif

            $('#selectAll').on('change', function() {
                var isChecked = $(this).is(':checked');

                $('.bag-checkbox').prop('checked', isChecked);
                $('.bag-checkbox').closest('tr').toggleClass('selected-row', isChecked);

                updateSelectedCount();
            });

            $(document).on('change', '.bag-checkbox', function() {
                $(this).closest('tr').toggleClass('selected-row', $(this).is(':checked'));

                var totalCheckboxes = $('.bag-checkbox').length;
                var checkedCheckboxes = $('.bag-checkbox:checked').length;

                $('#selectAll').prop('checked', totalCheckboxes === checkedCheckboxes);
                $('#selectAll').prop(
                    'indeterminate',
                    checkedCheckboxes > 0 && checkedCheckboxes < totalCheckboxes
                );

                updateSelectedCount();
            });

            $(document).on('click', '.btn-edit-approval-bag', function() {
                const approvalId = $(this).attr('data-approval-id');
                const bagId = $(this).attr('data-bag-id');
                const barcodeValue = $(this).attr('data-barcode-value');
                const toLayoutId = $(this).attr('data-to-layout-id');
                const toLayoutName = $(this).attr('data-to-layout-name');

                $('#editApprovalId').val(approvalId);
                $('#editBagLabel').val(`${barcodeValue} / ${bagId}`);

                /*
                |--------------------------------------------------------------------------
                | Kalau layout tujuan sebelumnya disabled karena status pending/terisi,
                | enable dulu option itu supaya tetap bisa tampil sebagai selected.
                |--------------------------------------------------------------------------
                */
                const option = $('#editToLayoutId').find(`option[value="${toLayoutId}"]`);
                option.prop('disabled', false);

                $('#editToLayoutId').val(toLayoutId).trigger('change');
            });

            $('#editBagApprovalModal').on('shown.bs.modal', function() {
                if ($.fn.select2 && !$('#editToLayoutId').hasClass('select2-hidden-accessible')) {
                    $('#editToLayoutId').select2({
                        dropdownParent: $('#editBagApprovalModal'),
                        width: '100%',
                        allowClear: false,
                        placeholder: 'Pilih Layout Tujuan'
                    });
                }
            });

            $('#selectAll').prop('checked', true).trigger('change');
        });

        function updateSelectedCount() {
            var count = $('.bag-checkbox:checked').length;

            $('#selectedCount').text(count + ' bag dipilih');
            $('#approveCount').text(count);
            $('#rejectCount').text(count);

            var hasSelection = count > 0;

            $('#btnApprove').prop('disabled', !hasSelection);
            $('#btnReject').prop('disabled', !hasSelection);
        }

        function getSelectedIds() {
            var ids = [];

            $('.bag-checkbox:checked').each(function() {
                ids.push($(this).val());
            });

            return ids;
        }

        function fillHiddenIds(containerSelector, ids) {
            $(containerSelector).empty();

            ids.forEach(function(id) {
                $(containerSelector).append(
                    `<input type="hidden" name="approval_ids[]" value="${id}">`
                );
            });
        }

        function submitApprove() {
            var ids = getSelectedIds();

            if (ids.length === 0) {
                Swal.fire('Peringatan', 'Pilih minimal 1 bag untuk di-approve.', 'warning');
                return;
            }

            Swal.fire({
                title: 'Konfirmasi Approve',
                html: `Apakah Anda yakin ingin <strong>APPROVE</strong> ${ids.length} bag?<br><br>Bag akan dipindahkan ke layout tujuan.`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya, Approve',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#2dce89'
            }).then((result) => {
                if (result.isConfirmed) {
                    var notes = $('#approvalNotes').val();

                    $('#approveNotes').val(notes);

                    fillHiddenIds('#approveIdsContainer', ids);

                    $('#approveForm').submit();
                }
            });
        }

        function submitReject() {
            var ids = getSelectedIds();

            if (ids.length === 0) {
                Swal.fire('Peringatan', 'Pilih minimal 1 bag untuk ditolak.', 'warning');
                return;
            }

            Swal.fire({
                title: 'Konfirmasi Reject',
                html: `Apakah Anda yakin ingin <strong>REJECT</strong> ${ids.length} bag?<br><br>Request placement akan ditolak dan bag tetap di lokasi asal.`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Reject',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#f5365c'
            }).then((result) => {
                if (result.isConfirmed) {
                    var notes = $('#approvalNotes').val();

                    $('#rejectNotes').val(notes);

                    fillHiddenIds('#rejectIdsContainer', ids);

                    $('#rejectForm').submit();
                }
            });
        }

        function submitEditOneApprovalBag() {
            const approvalId = $('#editApprovalId').val();
            const toLayoutId = $('#editToLayoutId').val();

            if (!approvalId) {
                Swal.fire('Peringatan', 'Approval tidak ditemukan.', 'warning');
                return;
            }

            if (!toLayoutId) {
                Swal.fire('Peringatan', 'Pilih layout tujuan baru dulu.', 'warning');
                return;
            }

            Swal.fire({
                title: 'Edit Layout Tujuan',
                text: 'Ubah layout tujuan untuk bag ini?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Ubah',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#fb6340'
            }).then((result) => {
                if (result.isConfirmed) {
                    $('#editBagApprovalForm').submit();
                }
            });
        }

        function removeOneApprovalBag(approvalId, bagLabel) {
            if (!approvalId) {
                Swal.fire('Peringatan', 'Approval tidak ditemukan.', 'warning');
                return;
            }

            Swal.fire({
                title: 'Hapus Bag dari Approval',
                html: `Hapus bag <strong>${bagLabel}</strong> dari request approval?<br><br>Bag akan kembali bisa dipilih untuk perpindahan lain.`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Hapus',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#f5365c'
            }).then((result) => {
                if (result.isConfirmed) {
                    $('#removeApprovalId').val(approvalId);
                    $('#removeApprovalNotes').val('');

                    $('#removeOneApprovalForm').submit();
                }
            });
        }
    </script>
@endpush