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

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

    @php
        $st = strtolower($permintaan->status ?? '');
        $role = strtolower(auth()->user()->idroles ?? '');

        $badgeClass = match ($st) {
            'proposed' => 'badge badge-proposed',
            'approve' => 'badge bg-info',
            'on_progress', 'onprogress' => 'badge bg-primary',
            'completed' => 'badge bg-success',
            'reject' => 'badge bg-danger',
            'entry' => 'badge badge-draft',
            default => 'badge bg-secondary',
        };
    @endphp

    <div class="card shadow-sm border-0 mx-4 mb-3">
        <div class="card-body p-3">
            <div class="d-flex gap-2 align-items-center">
                <button type="button" class="btn btn-fixed btn-secondary mb-0"
                    onclick="window.location='{{ URL::to($url_menu) }}'">
                    <i class="fas fa-circle-left me-1"></i><span class="fw-bold">Kembali</span>
                </button>

                <div class="ms-auto">
                    <span class="{{ $badgeClass }} px-3 py-2">{{ strtoupper($permintaan->status ?? '-') }}</span>
                </div>
            </div>
        </div>
    </div>

    <form action="{{ url($url_menu . '/approve_admin/' . $idencrypt) }}" method="POST" id="form-approve-admin">
        @csrf
        <div class="container-fluid py-2">
            <div class="row">
                <div class="col-12">

                    <div class="card shadow-sm border-0">
                        <div class="card-body p-4">

                            <div class="text-uppercase text-muted small mb-2" style="letter-spacing:.06em;">
                                Informasi Pengajuan
                            </div>

                            <div class="row g-3 mb-3">
                                <div class="col-md-6">
                                    <label class="form-label mb-1 fw-semibold">ID</label>
                                    <input type="text" class="form-control" value="{{ $permintaan->id ?? '-' }}" readonly>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label mb-1 fw-semibold">Tanggal Permintaan</label>
                                    <input type="text" class="form-control" value="{{ $tanggal_permintaan ?? '-' }}"
                                        readonly>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label mb-1 fw-semibold">Departemen</label>
                                    <input type="text" class="form-control" value="{{ $departemen_nama ?? '-' }}"
                                        readonly>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label mb-1 fw-semibold">Status</label>
                                    <input type="text" class="form-control"
                                        value="{{ strtoupper($permintaan->status ?? '-') }}" readonly>
                                </div>
                            </div>

                            <hr class="horizontal dark my-3">

                            <div class="text-uppercase text-muted small mb-2" style="letter-spacing:.06em;">
                                Approver Head
                            </div>

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label mb-1 fw-semibold">Approver Head</label>
                                    <input type="text" class="form-control" value="{{ $approver_head_name ?? 'Pending' }}" readonly>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label mb-1 fw-semibold">Tanggal Approve Head</label>
                                    <input type="text" class="form-control" value="{{ $tanggal_approve_head ?? '-' }}" readonly>
                                </div>
                            </div>

                            <hr class="horizontal dark my-3">

                            <div class="text-uppercase text-muted small mb-2" style="letter-spacing:.06em;">
                                Jadwal Pengambilan
                            </div>

                            <div class="row g-3 mb-3">
                                <div class="col-md-6">
                                    <label class="form-label mb-1 fw-semibold">User</label>
                                    <input type="text" class="form-control" value="{{ $user_pengaju_name ?? '-' }}" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label mb-1 fw-semibold">Tanggal Ambil <span
                                            class="text-danger" id="label-required">*</span></label>
                                    <input type="datetime-local" class="form-control" name="tanggal_ambil"
                                        id="tanggal_ambil" value="{{ $tanggal_ambil }}">
                                    <div class="form-text" id="tanggal-ambil-note">Tentukan tanggal dan waktu pengambilan barang</div>
                                </div>
                            </div>

                            <hr class="horizontal dark my-3">

                            <div class="text-uppercase text-muted small mb-2" style="letter-spacing:.06em;">
                                Detail Item
                            </div>

                            <div class="table-responsive">
                                <table class="table align-middle table-hover" id="itemsTable">
                                    <thead style="background:#0a8f97; color:#fff;">
                                        <tr>
                                            <th style="width:120px;">Action</th>
                                            <th style="min-width:240px;">Nama Barang</th>
                                            <th style="min-width:200px;">Penerima</th>
                                            <th style="width:110px;">Qty Diminta</th>
                                            <th style="width:110px;">Stock</th>
                                            <th style="width:130px;">Qty Disetujui</th>
                                            <th style="min-width:240px;">Keterangan</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse(($items ?? []) as $idx => $it)
                                            <tr data-item-index="{{ $idx }}">
                                                <td>
                                                    <input type="hidden" name="items[{{ $idx }}][item_id]"
                                                        value="{{ $it->id }}">
                                                    <input type="hidden" name="items[{{ $idx }}][status]"
                                                        value="approved" class="item-status">

                                                    <button type="button"
                                                        class="btn btn-success mb-0 btn-approve-item"
                                                        data-index="{{ $idx }}" title="Approve">
                                                        <i class="fas fa-check"></i>
                                                    </button>
                                                    <button type="button"
                                                        class="btn btn-secondary mb-0 btn-reject-item"
                                                        data-index="{{ $idx }}" title="Reject">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control "
                                                        value="{{ $it->nama_barang ?? '-' }}" readonly>
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control "
                                                        value="{{ $it->penerima ?? '-' }}" readonly>
                                                </td>
                                                <td>
                                                    <input type="number" class="form-control "
                                                        value="{{ $it->qty_diminta ?? 0 }}" readonly>
                                                </td>
                                                <td>
                                                    <input type="number" class="form-control "
                                                        value="{{ $it->qty_stock ?? 0 }}" readonly>
                                                </td>
                                                <td>
                                                    @php
                                                        $maxDisetujui = min($it->qty_diminta ?? 0, $it->qty_stock ?? 0);
                                                    @endphp
                                                    <input type="number"
                                                        class="form-control qty-disetujui"
                                                        name="items[{{ $idx }}][qty_disetujui]"
                                                        value="{{ $maxDisetujui }}" min="0"
                                                        max="{{ $maxDisetujui }}"
                                                        data-max="{{ $maxDisetujui }}"
                                                        data-qty-diminta="{{ $it->qty_diminta ?? 0 }}"
                                                        data-qty-stock="{{ $it->qty_stock ?? 0 }}">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control "
                                                        value="{{ $it->keterangan ?? '-' }}" readonly>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="8" class="text-center text-muted">Tidak ada item.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>

                            <div class="text-uppercase text-muted small mb-2" style="letter-spacing:.06em;">
                                Catatan Admin
                            </div>

                            <div class="row g-3 mb-3">
                                <div class="col-12">
                                    <label class="form-label mb-1 fw-semibold">Catatan</label>
                                    <textarea class="form-control" name="catatan_admin" rows="3"
                                        placeholder="Catatan umum untuk permintaan ini (opsional)..."></textarea>
                                </div>
                            </div>

                            <div class="d-flex gap-2 justify-content-end mt-4">
                                <button type="button" class="btn btn-secondary"
                                    onclick="window.location='{{ URL::to($url_menu) }}'">
                                    <i class="fas fa-times me-1"></i> Batal
                                </button>
                                <button type="submit" class="btn btn-success">
                                    <i class="fas fa-check me-1"></i> Submit Approve
                                </button>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </form>
@endsection

<style>
    .btn-fixed {
        min-width: 110px;
        height: 41px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .badge-proposed {
        background: #6b7280;
        color: #fff;
    }

    .badge-entry {
        background: #ff9100;
        color: #fff;
    }

    #itemsTable th,
    #itemsTable td {
        border: 1px solid #dee2e6 !important;
    }

    .btn-approve-item.active {
        background-color: #19a974 !important;
        border-color: #19a974 !important;
    }

    .btn-reject-item.active {
        background-color: #dc3545 !important;
        border-color: #dc3545 !important;
        color: #fff !important;
    }
</style>

@push('js')
    <script>
        $(document).ready(function() {
            function checkAllRejected() {
                let allRejected = true;
                let hasItems = false;

                $('tr[data-item-index]').each(function() {
                    hasItems = true;
                    const status = $(this).find('.item-status').val();
                    if (status === 'approved') {
                        allRejected = false;
                        return false; 
                    }
                    });
                    
                if (hasItems && allRejected) {
                    $('#tanggal_ambil').removeAttr('required');
                    $('#label-required').hide();
                    $('#tanggal-ambil-note').text('Tidak wajib diisi karena semua item ditolak');
                } else {
                    $('#tanggal_ambil').attr('required', 'required');
                    $('#label-required').show();
                    $('#tanggal-ambil-note').text('Tentukan tanggal dan waktu pengambilan barang');
                }

                return allRejected && hasItems;
            }

            $(document).on('click', '.btn-approve-item', function() {
                const index = $(this).data('index');
                const row = $(`tr[data-item-index="${index}"]`);

                row.find('.item-status').val('approved');

                $(this).addClass('active').removeClass('btn-secondary').addClass('btn-success');
                row.find('.btn-reject-item').removeClass('active btn-danger').addClass('btn-secondary');

                const qtyInput = row.find('.qty-disetujui');
                const maxQty = qtyInput.data('max');
                qtyInput.val(maxQty).attr('max', maxQty).prop('readonly', false);

                qtyInput.off('input.limitQty').on('input.limitQty', function() {
                    const val  = parseInt($(this).val()) || 0;
                    const max  = parseInt($(this).data('max')) || 0;
                    const stock = parseInt($(this).data('qty-stock')) || 0;

                    if (val > max) {
                        $(this).val(max);
                        Swal.fire({
                            toast: true, position: 'top-end', icon: 'warning',
                            title: `Qty tidak boleh melebihi ${val > stock ? 'stok (' + stock + ')' : 'qty diminta (' + max + ')'}`,
                            showConfirmButton: false, timer: 2500
                        });
                    }
                });

                checkAllRejected();
            });

            $(document).on('click', '.btn-reject-item', function() {
                const index = $(this).data('index');
                const row = $(`tr[data-item-index="${index}"]`);

                row.find('.item-status').val('rejected');

                $(this).addClass('active').removeClass('btn-secondary').addClass('btn-danger');
                row.find('.btn-approve-item').removeClass('active btn-success').addClass('btn-secondary');

                row.find('.qty-disetujui').val(0).prop('readonly', true);

                checkAllRejected();
            });

            $('#form-approve-admin').on('submit', function(e) {
                e.preventDefault();
                
                let valid = true;
                let adaReject = false;
                let adaApprove = false;
                let errorMsg = [];

                $('tr[data-item-index]').each(function() {
                    const status = $(this).find('.item-status').val();
                    if (status === 'rejected') {
                        adaReject = true;
                    }
                    if (status === 'approved') {
                        adaApprove = true;
                    }
                });

                if (adaApprove && !$('#tanggal_ambil').val()) {
                    valid = false;
                    errorMsg.push('Tanggal Ambil harus diisi karena ada item yang disetujui');
                }

                const catatanAdmin = ($('textarea[name="catatan_admin"]').val() || '').trim();

                if (adaReject && !catatanAdmin) {
                    valid = false;
                    errorMsg.push('Ada item yang di-REJECT, maka Catatan Admin wajib diisi.');
                }

                if (!valid) {
                    Swal.fire({
                        title: 'Validasi Gagal',
                        html: errorMsg.join('<br>'),
                        icon: 'warning',
                        confirmButtonColor: '#028284'
                    });
                    return false;
                }

                let confirmText = '';
                if (!adaApprove && adaReject) {
                    confirmText = 'Semua item ditolak. Status akan langsung menjadi COMPLETED.';
                } else {
                    confirmText = 'Approve permintaan ini? Status akan berubah menjadi ON PROGRESS.';
                }

                Swal.fire({
                    title: 'Konfirmasi Approve',
                    text: confirmText,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Approve',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#19a974',
                    cancelButtonColor: '#6c757d'
                }).then((result) => {
                    if (result.isConfirmed) {
                        this.submit();
                    }
                });
            });

            checkAllRejected();
        });
    </script>
@endpush