@extends('layouts.app')

@section('content')
@php
    // Blind close: cashiers must count the drawer without seeing what the system expects
    $isAdmin = auth()->user()->hasRole('admin') || auth()->user()->hasRole('super_admin');
    // One switch in Loss Prevention settings: when on, everyone must count the drawer and non-admins can't see the expected cash
    $countRequired = \App\Models\IntegrityEvent::cashCountRequired();
    $blind = $countRequired && !$isAdmin;
    $money = fn ($v, $prefix = 'MWK ') => $blind ? '••••••' : $prefix . number_format($v, 2);
@endphp
<style>
    :root {
        --brand-blue: #0d6efd;
        --brand-green: #28a745;
        --brand-danger: #dc3545;
        --glass-bg: rgba(255, 255, 255, 0.9);
    }

    .close-register-container {
        max-width: 1000px;
        margin: 2rem auto;
        animation: fadeIn 0.5s ease-out;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .stat-card {
        border: none;
        border-radius: 15px;
        transition: transform 0.3s ease, shadow 0.3s ease;
        overflow: hidden;
        background: white;
    }

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    }

    .stat-icon {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .summary-table {
        border-collapse: separate;
        border-spacing: 0 8px;
    }

    .summary-table tr {
        background: #f8f9fa;
        border-radius: 10px;
        transition: background 0.2s;
    }

    .summary-table tr:hover {
        background: #f1f3f5;
    }

    .summary-table td, .summary-table th {
        padding: 1rem;
        border: none;
    }

    .summary-table tr td:first-child {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .summary-table tr td:last-child {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .method-badge {
        font-weight: 600;
        color: #495057;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .btn-close-register {
        background: var(--brand-danger);
        border: none;
        padding: 1rem;
        font-size: 1.1rem;
        border-radius: 12px;
        transition: all 0.3s;
    }

    .btn-close-register:hover {
        background: #bd2130;
        transform: scale(1.02);
        box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);
    }

    /* Print styles */
    @media print {
        @page { margin: 0; }
        body * {
            visibility: hidden;
        }
        body {
            background: white;
            margin: 0;
            padding: 0;
        }
        .close-register-container, .navbar, .sidebar {
            display: none !important;
        }
        #printable-receipt, #printable-receipt * {
            visibility: visible;
        }
        #printable-receipt {
            position: absolute;
            left: 0;
            top: 0;
            width: 320px !important;
            margin: 0;
            padding: 20px 10px;
            font-family: monospace;
            font-size: 14px;
            line-height: 1.4;
            color: #000;
        }
        .receipt-table { width: 100%; border-collapse: collapse; }
        .receipt-table td, .receipt-table th { padding: 4px 0; }
    }
    
    /* Hide receipt on screen */
    @media screen {
        #printable-receipt {
            display: none;
        }
    }
</style>

<div class="close-register-container px-3">
    <!-- Header Section -->
    <div class="d-flex justify-content-between align-items-end mb-4">
        <div>
            <h2 class="fw-bold text-dark mb-1">Close Register</h2>
            <p class="text-muted mb-0">Review sales and finalize the session of <span class="fw-bold">{{ $register->user->name ?? auth()->user()->name }}</span>
                @if((int) $register->user_id !== (int) auth()->id())
                    <span class="badge bg-warning text-dark ms-1">Closing as super admin</span>
                @endif
            </p>
        </div>
        <button onclick="window.print()" class="btn btn-primary shadow-sm px-4 py-2 rounded-pill fw-bold">
            <i class="bi bi-printer me-2"></i> Print Z-Report
        </button>
    </div>

    <!-- Quick Stats Grid (figures from App\Services\ZReportService, the same as the emailed Z report) -->
    <div class="row g-3 mb-4">
        <div class="col-md-4">
            <div class="card stat-card shadow-sm h-100">
                <div class="card-body">
                    <div class="stat-icon bg-primary text-white">
                        <i class="bi bi-wallet2"></i>
                    </div>
                    <div class="text-muted small fw-bold text-uppercase">Opening Cash</div>
                    <div class="h3 fw-bold mb-0">MWK {{ number_format($report['opening_cash'], 2) }}</div>
                    <div class="text-muted mt-2 small">Started at {{ $register->opened_at->format('H:i') }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card stat-card shadow-sm h-100">
                <div class="card-body">
                    <div class="stat-icon bg-success text-white">
                        <i class="bi bi-cart-check"></i>
                    </div>
                    <div class="text-muted small fw-bold text-uppercase">Total Sales</div>
                    <div class="h3 fw-bold mb-0">{{ $money($report['gross_sales']) }}</div>
                    <div class="text-success mt-2 small">
                        <i class="bi bi-arrow-up-short"></i> {{ $report['sales_count'] }} Transactions
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card stat-card shadow-sm h-100">
                <div class="card-body">
                    <div class="stat-icon bg-info text-white">
                        <i class="bi bi-clock"></i>
                    </div>
                    <div class="text-muted small fw-bold text-uppercase">Time Open</div>
                    <div class="h3 fw-bold mb-0">{{ $report['duration'] }}</div>
                    <div class="text-muted mt-2 small">{{ $register->opened_at->format('d M Y') }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <!-- Detailed Breakdown -->
        <div class="col-lg-7">
            <div class="card shadow-sm border-0 rounded-4 overflow-hidden">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="fw-bold mb-0">Sales Breakdown</h5>
                </div>
                <div class="card-body">
                    <table class="table summary-table mb-0">
                        <thead>
                            <tr class="text-muted small text-uppercase">
                                <th>Method</th>
                                <th class="text-center">Count</th>
                                <th class="text-end">Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($report['payments'] as $payment)
                                <tr>
                                    <td>
                                        <div class="method-badge">
                                            <span>{{ $payment['label'] }}</span>
                                            @if($payment['split_count'])
                                                <span class="badge bg-light text-muted border fw-normal">incl. {{ $payment['split_count'] }} split</span>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="text-center fw-bold">{{ $payment['count'] }}</td>
                                    <td class="text-end fw-bold">{{ $money($payment['amount']) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3" class="text-center py-5">
                                        <i class="bi bi-inbox fs-1 text-muted d-block mb-2"></i>
                                        <span class="text-muted">No sales recorded for this session.</span>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                        @if($report['sales_count'])
                        <tfoot>
                            <tr>
                                <td class="fw-bold">Total Sales</td>
                                <td class="text-center fw-bold">{{ $report['sales_count'] }}</td>
                                <td class="text-end fw-bold">{{ $money($report['gross_sales']) }}</td>
                            </tr>
                        </tfoot>
                        @endif
                    </table>
                    @if($report['split_sales']->count())
                        <div class="small text-muted mt-2">
                            {{ $report['split_sales']->count() }} split sale(s) are counted once in Total Sales and shown under each method they were paid with.
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Closing Actions -->
        <div class="col-lg-5">
            <div class="card shadow-sm border-0 rounded-4 bg-light mb-4">
                <div class="card-body p-4">
                    <h5 class="fw-bold mb-4">Expected Balance</h5>

                    <div class="d-flex justify-content-between mb-3 border-bottom pb-3">
                        <span class="text-muted">Opening Cash</span>
                        <span class="fw-bold">MWK {{ number_format($report['opening_cash'], 2) }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-3 border-bottom pb-3">
                        <span class="text-muted">Cash received (incl. cash part of split sales)</span>
                        <span class="fw-bold">{{ $money($report['cash_sales']) }}</span>
                    </div>
                    @if($report['cash_paid_out'] > 0)
                    <div class="d-flex justify-content-between mb-3 border-bottom pb-3">
                        <span class="text-muted">Paid out of the drawer (expenses)</span>
                        <span class="fw-bold text-danger">-{{ $money($report['cash_paid_out']) }}</span>
                    </div>
                    @endif
                    <div class="d-flex justify-content-between p-3 bg-white rounded-3 shadow-sm mb-4">
                        <span class="fw-bold text-dark fs-5">Expected in Drawer</span>
                        <span class="fw-bold text-primary fs-5">{{ $money($report['expected_cash']) }}</span>
                    </div>

                    <div class="alert alert-warning border-0 shadow-sm small mb-0">
                        <i class="bi bi-info-circle-fill me-2"></i>
                        @if($countRequired)
                            Count all the cash in your drawer. You will enter the amount when you close the register. The full Z report prints after closing.
                        @else
                            Confirm the amount in your drawer matches the expected total before closing.
                        @endif
                    </div>
                </div>
            </div>

            <div class="d-grid gap-2">
                <button type="button" class="btn btn-close-register text-white w-100 fw-bold" data-bs-toggle="modal" data-bs-target="#confirmCloseModal">
                    <i class="bi bi-check2-circle me-2"></i> Confirm & Close Register
                </button>
                <a href="{{ route('pos.new') }}" class="btn btn-outline-secondary border-0 py-2">
                    <i class="bi bi-arrow-left me-2"></i> Back to POS
                </a>
            </div>
        </div>
    </div>
</div>

<!-- HIDDEN RECEIPT FOR PRINTING ONLY (Z-REPORT before closing; the final one prints after closing) -->
<div id="printable-receipt">
    @include('pos.register.partials.z-receipt', ['report' => $report, 'money' => $money, 'final' => false])
</div>

<!-- Confirm Close Register Modal -->
<div class="modal fade" id="confirmCloseModal" tabindex="-1" aria-labelledby="confirmCloseModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-4">
            <div class="modal-header border-0 pb-0">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('register.update', $register->id) }}" method="POST" class="m-0">
                @csrf
                @method('PATCH')
                <div class="modal-body text-center py-4">
                    <div class="text-danger mb-3" style="font-size: 3.5rem;">
                        <i class="bi bi-exclamation-triangle-fill"></i>
                    </div>
                    <h4 class="fw-bold text-dark mb-2">Close Register?</h4>
                    <p class="text-muted px-3 mb-3">This will end your session and finalize all sales records for this shift.</p>

                    @if($countRequired)
                    <div class="text-start px-3">
                        <label for="countedCash" class="form-label fw-semibold">Cash counted in drawer (MWK) <span class="text-danger">*</span></label>
                        <input type="number" step="1" min="0" name="counted_cash" id="countedCash"
                               class="form-control form-control-lg @error('counted_cash') is-invalid @enderror"
                               value="{{ old('counted_cash') }}" placeholder="0" required>
                        @error('counted_cash')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        @if(session('count_looks_like_sales_total'))
                            {{-- Shown after the warning: a genuine count that happens to match can still be submitted --}}
                            <div class="form-check mt-2 p-2 ps-5 rounded-3 bg-warning-subtle">
                                <input class="form-check-input" type="checkbox" name="confirm_counted" value="1" id="confirmCounted">
                                <label class="form-check-label small fw-semibold" for="confirmCounted">
                                    I counted the notes and coins in the drawer and this amount is correct
                                </label>
                            </div>
                        @endif
                        <div class="form-text">Include the opening float. Count <strong>only notes and coins</strong>: Airtel Money, Mpamba, card and bank payments are not in the drawer. Do not copy a figure from the screen.</div>
                    </div>
                    @endif

                    <div id="offlinePendingWarning" class="alert alert-warning alert-persistent text-start mx-3 mt-3 mb-0 d-none" role="alert">
                        <i class="bi bi-cloud-upload me-1"></i>
                        <strong><span id="offlinePendingCount">0</span> sale(s) made while offline</strong> are still saved on this
                        device and not yet uploaded. The register can be closed once they are uploaded, so they are
                        included in the Z report.
                        <div class="mt-2">
                            <button type="button" class="btn btn-sm btn-outline-dark" id="offlineSyncNow">Upload now</button>
                            <span class="small text-muted ms-2" id="offlineSyncStatus"></span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 d-flex justify-content-center gap-2 pb-4 pt-0">
                    <button type="button" class="btn btn-light px-4 py-2 rounded-pill fw-semibold" data-bs-dismiss="modal">
                        No, Cancel
                    </button>
                    <button type="submit" id="closeRegisterSubmit" class="btn btn-danger px-4 py-2 rounded-pill fw-semibold">
                        Yes, Close Register
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Sales made offline on this device must be uploaded before the shift is closed --}}
<meta name="pos-user" content="{{ auth()->id() }}">
<script src="{{ asset('js/pos/offline.js') }}?v={{ filemtime(public_path('js/pos/offline.js')) }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var warning = document.getElementById('offlinePendingWarning');
        var submit = document.getElementById('closeRegisterSubmit');
        var status = document.getElementById('offlineSyncStatus');

        function refreshGuard() {
            var pending = POSOffline.pendingCount();
            submit.disabled = pending > 0;
            if (!warning.isConnected) return;
            document.getElementById('offlinePendingCount').textContent = pending;
            warning.classList.toggle('d-none', pending === 0);
            status.textContent = pending && POSOffline.state.lastError ? POSOffline.state.lastError : '';
        }

        document.getElementById('offlineSyncNow').addEventListener('click', function () {
            status.textContent = 'Uploading…';
            POSOffline.sync().then(refreshGuard);
        });
        document.getElementById('confirmCloseModal').addEventListener('show.bs.modal', function () {
            POSOffline.sync().then(refreshGuard);
        });

        refreshGuard();
        setInterval(refreshGuard, 3000);
    });
</script>
@if($errors->has('counted_cash'))
<script>
    // Re-open the close dialog so the cashier can enter the counted cash
    document.addEventListener('DOMContentLoaded', function () {
        new bootstrap.Modal(document.getElementById('confirmCloseModal')).show();
    });
</script>
@endif
@endsection