@extends('layouts.app')

@section('title', 'Cashier Shift / RCD')

@section('content')
    <div class="py-3">

        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4 class="mb-0"><i class="bi bi-calendar2-check me-2"></i>Cashier Shift / RCD</h4>
            <div class="d-flex gap-2">
                <a href="#" id="btnExport" class="btn btn-outline-secondary btn-sm"><i
                        class="bi bi-download me-1"></i>Export RCD</a>
                <a href="#" id="btnPrint" class="btn btn-outline-secondary btn-sm"><i
                        class="bi bi-printer me-1"></i>Print RCD</a>
            </div>
        </div>

        @php
            // -------- Static Mock Data (MVP) --------
            $user = 'cashier1@lgu.local';

            // Assigned OR series for this cashier
            $series = ['code' => '2025-A', 'start' => 1000, 'end' => 1999, 'next' => 1124];

            // Current shift (toggle status to 'CLOSED' to see state changes)
            $shift = [
                'status' => 'OPEN', // 'OPEN' | 'CLOSED'
                'opened_at' => '2025-10-18 08:00',
                'closed_at' => null,
                'begin_or' => '001120',
                'end_or' => null,
            ];

            // Issued ORs (this shift). Note: 'Voided' rows will be excluded from totals.
            $ors = [
                [
                    'or' => '001120',
                    'time' => '09:00',
                    'payor' => 'Dev Coffee Roasters',
                    'status' => 'Issued',
                    'gross' => 12750.0,
                    'cash' => 12750.0,
                    'check' => 0.0,
                    'in_deposit' => false,
                ],
                [
                    'or' => '001121',
                    'time' => '09:14',
                    'payor' => 'Byte Bakery',
                    'status' => 'Voided',
                    'gross' => 8200.0,
                    'cash' => 0.0,
                    'check' => 0.0,
                    'in_deposit' => false,
                ],
                [
                    'or' => '001122',
                    'time' => '09:30',
                    'payor' => 'Pixel Print Shop',
                    'status' => 'Adjusted',
                    'gross' => 9500.0,
                    'cash' => 9500.0,
                    'check' => 0.0,
                    'in_deposit' => false,
                ],
                [
                    'or' => '001123',
                    'time' => '10:05',
                    'payor' => 'OrangeShake',
                    'status' => 'Issued',
                    'gross' => 6400.0,
                    'cash' => 1400.0,
                    'check' => 5000.0,
                    'in_deposit' => true,
                ],
                // add more rows if you want to test totals/scroll
            ];

            // Compute simple totals & range (exclude Voids)
            $totals = ['gross' => 0.0, 'cash' => 0.0, 'check' => 0.0, 'count' => 0];
            $firstIssued = null;
            $lastIssued = null;

            foreach ($ors as $row) {
                if ($row['status'] !== 'Voided') {
                    $totals['gross'] += $row['gross'];
                    $totals['cash'] += $row['cash'];
                    $totals['check'] += $row['check'];
                    $totals['count']++;

                    // range derived from non-voided only (you can change to include all)
                    if ($firstIssued === null || strcmp($row['or'], $firstIssued) < 0) {
                        $firstIssued = $row['or'];
                    }
                    if ($lastIssued === null || strcmp($row['or'], $lastIssued) > 0) {
                        $lastIssued = $row['or'];
                    }
                }
            }

            // RCD draft (static). Online is Phase 2.
            $rcd = [
                'date' => '2025-10-18',
                'cashier' => $user,
                'cash' => $totals['cash'],
                'check' => $totals['check'],
                'online' => 0.0,
                'count' => $totals['count'],
                'first_or' => $firstIssued ?? '—',
                'last_or' => $lastIssued ?? '—',
                'deposit_ref' => null,
            ];
        @endphp

        <div class="row g-3">
            {{-- LEFT: Shift Status + RCD Summary --}}
            <div class="col-lg-5">

                <div class="card shadow-sm mb-3">
                    <div class="card-header bg-light fw-semibold">Shift Status</div>
                    <div class="card-body">

                        {{-- State banner --}}
                        @if ($shift['status'] === 'OPEN')
                            <div class="alert alert-success py-2 mb-3">
                                <i class="bi bi-unlock me-1"></i> Shift is <strong>OPEN</strong>: OR issuance allowed. RCD
                                is accumulating totals.
                            </div>
                        @else
                            <div class="alert alert-secondary py-2 mb-3">
                                <i class="bi bi-lock me-1"></i> Shift is <strong>CLOSED</strong>: Issuance locked. Review
                                and finalize RCD.
                            </div>
                        @endif

                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <div>
                                <div class="small text-muted">Cashier</div>
                                <div class="fw-semibold">{{ $user }}</div>
                            </div>
                            <span
                                class="badge {{ $shift['status'] === 'OPEN' ? 'bg-success' : 'bg-secondary' }}">{{ $shift['status'] }}</span>
                        </div>

                        <div class="row g-2">
                            <div class="col-6">
                                <label class="form-label">Opened At</label>
                                <input class="form-control" value="{{ $shift['opened_at'] }}" readonly>
                            </div>
                            <div class="col-6">
                                <label class="form-label">Closed At</label>
                                <input class="form-control" value="{{ $shift['closed_at'] ?? '—' }}" readonly>
                            </div>
                            <div class="col-6">
                                <label class="form-label">Beginning OR</label>
                                <input class="form-control" value="{{ $shift['begin_or'] }}" readonly>
                            </div>
                            <div class="col-6">
                                <label class="form-label">Ending OR</label>
                                <input class="form-control" value="{{ $shift['end_or'] ?? '—' }}" readonly>
                            </div>
                        </div>

                        <hr>

                        <div class="row g-2">
                            <div class="col-8">
                                <div class="small text-muted">Assigned Series</div>
                                <div class="fw-semibold">
                                    {{ $series['code'] }}
                                    ({{ str_pad($series['start'], 4, '0', STR_PAD_LEFT) }}–{{ str_pad($series['end'], 4, '0', STR_PAD_LEFT) }})
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="small text-muted">Next OR</div>
                                <div class="fw-bold">{{ str_pad($series['next'], 4, '0', STR_PAD_LEFT) }}</div>
                            </div>
                        </div>

                        <div class="d-grid gap-2 mt-3">
                            <button class="btn btn-outline-primary" id="btnOpenShift"
                                {{ $shift['status'] === 'OPEN' ? 'disabled' : '' }}>
                                <i class="bi bi-door-open me-1"></i> Open Shift
                            </button>
                            <button class="btn btn-danger" id="btnCloseShift"
                                {{ $shift['status'] === 'OPEN' ? '' : 'disabled' }}>
                                <i class="bi bi-door-closed me-1"></i> Close Shift
                            </button>
                        </div>

                        <div class="form-text mt-2">
                            Posting receipts is allowed only while the shift is OPEN.
                        </div>
                    </div>
                </div>

                <div class="card shadow-sm">
                    <div class="card-header bg-light fw-semibold">RCD Summary (Draft)</div>
                    <div class="card-body">
                        <div class="row g-2 mb-2">
                            <div class="col-6">
                                <div class="small text-muted">RCD Date</div>
                                <div class="fw-semibold">{{ $rcd['date'] }}</div>
                            </div>
                            <div class="col-6">
                                <div class="small text-muted">OR Range</div>
                                <div class="fw-semibold">{{ $rcd['first_or'] }} – {{ $rcd['last_or'] }}</div>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <tbody>
                                    <tr>
                                        <th>Count (Issued/Adjusted)</th>
                                        <td class="text-end">{{ $rcd['count'] }}</td>
                                    </tr>
                                    <tr>
                                        <th>Cash</th>
                                        <td class="text-end">{{ number_format($rcd['cash'], 2) }}</td>
                                    </tr>
                                    <tr>
                                        <th>Check</th>
                                        <td class="text-end">{{ number_format($rcd['check'], 2) }}</td>
                                    </tr>
                                    <tr>
                                        <th>Online</th>
                                        <td class="text-end">{{ number_format($rcd['online'], 2) }}</td>
                                    </tr>
                                    <tr class="table-secondary">
                                        <th>Total</th>
                                        <td class="text-end fw-semibold">
                                            {{ number_format($rcd['cash'] + $rcd['check'] + $rcd['online'], 2) }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>Deposit Ref</th>
                                        <td class="text-end">{{ $rcd['deposit_ref'] ?? '—' }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="d-grid gap-2">
                            <button class="btn btn-primary" id="btnFinalize"
                                {{ $shift['status'] === 'OPEN' ? 'disabled' : '' }}>
                                <i class="bi bi-file-earmark-text me-1"></i> Finalize RCD
                            </button>
                        </div>
                        <div class="form-text mt-2">
                            Finalizing locks new postings until a new shift is opened.
                        </div>
                    </div>
                </div>

            </div>

            {{-- RIGHT: Issued ORs --}}
            <div class="col-lg-7">
                <div class="card shadow-sm">
                    <div class="card-header bg-light fw-semibold">Issued ORs (This Shift)</div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-sm table-hover align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th class="bg-success text-white">OR No</th>
                                        <th class="bg-success text-white">Time</th>
                                        <th class="bg-success text-white">Payor</th>
                                        <th class="bg-success text-white">Status</th>
                                        <th class="bg-success text-white" class="text-end">Gross</th>
                                        <th class="bg-success text-white" class="text-end">Cash</th>
                                        <th class="bg-success text-white" class="text-end">Check</th>
                                        <th class="bg-success text-white" style="width:90px;"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($ors as $r)
                                        <tr
                                            class="@if ($r['status'] === 'Voided') table-danger @elseif($r['status'] === 'Adjusted') table-warning @endif">
                                            <td class="fw-semibold">
                                                {{ $r['or'] }}
                                                @if (!empty($r['in_deposit']))
                                                    <span class="badge bg-info ms-1">Deposited</span>
                                                @endif
                                            </td>
                                            <td>{{ $r['time'] }}</td>
                                            <td>{{ $r['payor'] }}</td>
                                            <td>
                                                @if ($r['status'] === 'Issued')
                                                    <span class="badge bg-success">Issued</span>
                                                @elseif($r['status'] === 'Voided')
                                                    <span class="badge bg-danger">Voided</span>
                                                @else
                                                    <span class="badge bg-warning text-dark">Adjusted</span>
                                                @endif
                                            </td>
                                            <td class="text-end">{{ number_format($r['gross'], 2) }}</td>
                                            <td class="text-end">{{ number_format($r['cash'], 2) }}</td>
                                            <td class="text-end">{{ number_format($r['check'], 2) }}</td>
                                            <td class="text-end">
                                                <div class="btn-group btn-group-sm">
                                                    <a href="#" class="btn btn-outline-secondary" title="View"><i
                                                            class="bi bi-eye"></i></a>
                                                    <a href="#" class="btn btn-outline-secondary" title="Print"><i
                                                            class="bi bi-printer"></i></a>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot class="table-secondary">
                                    <tr>
                                        <th colspan="4" class="text-end">Totals (excl. Voids)</th>
                                        <th class="text-end">{{ number_format($totals['gross'], 2) }}</th>
                                        <th class="text-end">{{ number_format($totals['cash'], 2) }}</th>
                                        <th class="text-end">{{ number_format($totals['check'], 2) }}</th>
                                        <th></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        <div class="small text-muted">
                            Totals include all <strong>non-voided</strong> ORs belonging to this shift. Voids remain visible
                            for audit but are excluded from RCD totals.
                        </div>
                    </div>
                </div>

                <div class="card shadow-sm mt-3">
                    <div class="card-header bg-light fw-semibold">Activity Log</div>
                    <div class="card-body">
                        <ul class="list-unstyled small mb-0" id="ulActivity">
                            <li><i class="bi bi-dot"></i> Shift opened by {{ $user }} at 08:00</li>
                            <li><i class="bi bi-dot"></i> OR 001120 issued at 09:00</li>
                            <li><i class="bi bi-dot"></i> OR 001121 voided at 09:16 (Supervisor: treasurer@lgu.local)</li>
                            <li><i class="bi bi-dot"></i> Draft RCD updated at 10:15</li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>

        {{-- Open Shift (static confirm) --}}
        <div class="modal fade" id="mdlOpen" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title"><i class="bi bi-door-open me-2"></i>Open Shift</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        Confirm opening a new shift for <strong>{{ $user }}</strong> with series
                        <strong>{{ $series['code'] }}</strong>?
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button id="btnConfirmOpen" class="btn btn-primary">Open Shift (static)</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Close Shift (static confirm) --}}
        <div class="modal fade" id="mdlClose" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title"><i class="bi bi-door-closed me-2"></i>Close Shift</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        Closing the shift will stop OR issuance. Proceed?
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button id="btnConfirmClose" class="btn btn-danger">Close Shift (static)</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Finalize RCD (static confirm) --}}
        <div class="modal fade" id="mdlFinalize" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title"><i class="bi bi-file-earmark-text me-2"></i>Finalize RCD</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <label class="form-label">Deposit Reference</label>
                        <input id="txtDepositRef" type="text" class="form-control"
                            placeholder="e.g. DEPOSIT-2025-10-18-01">
                        <div class="form-text">Required for finalization (static).</div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button id="btnConfirmFinalize" class="btn btn-primary">Finalize (static)</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Toasts --}}
        <div class="position-fixed bottom-0 end-0 p-3" style="z-index:9999">
            <div id="toastOk" class="toast align-items-center text-bg-success border-0" role="alert"
                aria-live="assertive" aria-atomic="true">
                <div class="d-flex">
                    <div class="toast-body">Done (static).</div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                        aria-label="Close"></button>
                </div>
            </div>
            <div id="toastWarn" class="toast align-items-center text-bg-warning border-0" role="alert"
                aria-live="assertive" aria-atomic="true">
                <div class="d-flex">
                    <div class="toast-body">Please check inputs.</div>
                    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast"
                        aria-label="Close"></button>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('scripts')
    <script>
        $(function() {

            function toastOk(msg) {
                if (msg) $('#toastOk .toast-body').text(msg);
                bootstrap.Toast.getOrCreateInstance('#toastOk').show();
            }

            function toastWarn(msg) {
                if (msg) $('#toastWarn .toast-body').text(msg);
                bootstrap.Toast.getOrCreateInstance('#toastWarn').show();
            }

            // Open / Close / Finalize (static dialogs)
            $('#btnOpenShift').on('click', function(e) {
                e.preventDefault();
                bootstrap.Modal.getOrCreateInstance('#mdlOpen').show();
            });
            $('#btnCloseShift').on('click', function(e) {
                e.preventDefault();
                bootstrap.Modal.getOrCreateInstance('#mdlClose').show();
            });
            $('#btnFinalize').on('click', function(e) {
                e.preventDefault();
                if ($(this).is(':disabled')) return;
                bootstrap.Modal.getOrCreateInstance('#mdlFinalize').show();
            });

            $('#btnConfirmOpen').on('click', function() {
                bootstrap.Modal.getOrCreateInstance('#mdlOpen').hide();
                toastOk('Shift opened (static demo).');
            });

            $('#btnConfirmClose').on('click', function() {
                bootstrap.Modal.getOrCreateInstance('#mdlClose').hide();
                toastOk('Shift closed (static demo).');
            });

            $('#btnConfirmFinalize').on('click', function() {
                var ref = ($('#txtDepositRef').val() || '').trim();
                if (!ref) {
                    toastWarn('Deposit reference is required.');
                    return;
                }
                bootstrap.Modal.getOrCreateInstance('#mdlFinalize').hide();
                toastOk('RCD finalized with deposit ref: ' + ref + ' (static demo).');
            });

            // Export / Print stubs
            $('#btnExport').on('click', function(e) {
                e.preventDefault();
                toastOk('Export RCD (static).');
            });
            $('#btnPrint').on('click', function(e) {
                e.preventDefault();
                toastOk('Print RCD (static).');
            });

        });
    </script>
@endpush