{{-- resources/views/cashing-up/show.blade.php --}}
@extends('layouts.app')
@section('title', 'Shift ' . $shift->reference)
@section('page_title', $shift->reference)
@section('page_subtitle', 'Cash shift · ' . $shift->opened_at->format('d M Y'))

@section('content')

{{-- Action Bar --}}
<div class="d-flex align-items-center gap-2 mb-3 flex-wrap">
    <a href="{{ tenant_route('cashing-up.index') }}"
       class="btn btn-sm btn-outline-secondary">← Shifts</a>

    <span style="font-size:.75rem;font-weight:600;padding:5px 12px;border-radius:20px;
                 background:{{ $shift->status === 'open' ? '#d1fae5' : '#f1f5f9' }};
                 color:{{ $shift->status === 'open' ? '#065f46' : '#64748b' }};">
        {{ strtoupper($shift->status) }}
    </span>

    <div class="ms-auto d-flex gap-2">
        <a href="{{ tenant_route('cashing-up.print', ['shift' => $shift->id]) }}"
           target="_blank"
           class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-printer me-1"></i>Print
        </a>
    </div>
</div>

<div class="row g-3">

{{-- ═══ LEFT COLUMN ═══ --}}
<div class="col-xl-8">

    {{-- Summary Cards --}}
    <div class="row g-3 mb-3">
        <div class="col-sm-6 col-md-3">
            <div class="stat-card">
                <div class="stat-icon si-muted">
                    <i class="bi bi-safe"></i>
                </div>
                <div>
                    <div class="stat-value">
                        {{ $shift->currency }} {{ number_format($shift->opening_float, 2) }}
                    </div>
                    <div class="stat-label">Opening Float</div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div class="stat-card">
                <div class="stat-icon si-success">
                    <i class="bi bi-arrow-down-circle"></i>
                </div>
                <div>
                    <div class="stat-value">
                        {{ $shift->currency }} {{ number_format($totalCashIn, 2) }}
                    </div>
                    <div class="stat-label">Cash Received</div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div class="stat-card">
                <div class="stat-icon si-danger">
                    <i class="bi bi-arrow-up-circle"></i>
                </div>
                <div>
                    <div class="stat-value">
                        {{ $shift->currency }} {{ number_format($totalCashOut + $totalRefunds, 2) }}
                    </div>
                    <div class="stat-label">Cash Out / Refunds</div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div class="stat-card">
                <div class="stat-icon si-clay">
                    <i class="bi bi-cash-stack"></i>
                </div>
                <div>
                    <div class="stat-value">
                        {{ $shift->currency }} {{ number_format($expectedCash, 2) }}
                    </div>
                    <div class="stat-label">Expected Float</div>
                </div>
            </div>
        </div>
    </div>

    {{-- Cash Payments --}}
    <div class="card mb-3">
        <div class="card-header">
            <span class="card-title">
                <i class="bi bi-cash-coin me-2" style="color:var(--clay)"></i>
                Cash Payments Received
                <span style="font-size:.75rem;font-weight:400;color:var(--muted);margin-left:6px;">
                    {{ $cashPayments->count() }} payment{{ $cashPayments->count() !== 1 ? 's' : '' }}
                </span>
            </span>
            <span style="font-size:.85rem;font-weight:700;color:var(--success);">
                {{ $shift->currency }} {{ number_format($totalCashIn, 2) }}
            </span>
        </div>

        @if($cashPayments->isEmpty())
            <div class="card-body text-center py-4">
                <p class="text-muted mb-0" style="font-size:.8rem;">
                    No cash payments recorded during this shift
                </p>
            </div>
        @else
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Reference</th>
                            <th>Guest</th>
                            <th>Invoice</th>
                            <th>Amount</th>
                            <th>Time</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($cashPayments as $payment)
                            <tr>
                                <td style="font-size:.8rem;font-weight:600;color:var(--clay);">
                                    {{ $payment->reference }}
                                </td>
                                <td style="font-size:.8rem;">
                                    {{ $payment->guest?->first_name }}
                                    {{ $payment->guest?->last_name ?? '—' }}
                                </td>
                                <td style="font-size:.75rem;color:var(--muted);">
                                    @if($payment->invoice)
                                        <a href="{{ tenant_route('invoicing.invoices.show', ['invoice' => $payment->invoice_id]) }}"
                                           style="color:var(--clay);">
                                            {{ $payment->invoice->invoice_number }}
                                        </a>
                                    @else
                                        —
                                    @endif
                                </td>
                                <td style="font-size:.84rem;font-weight:700;color:var(--success);">
                                    {{ $payment->currency }}
                                    {{ number_format($payment->amount, 2) }}
                                </td>
                                <td style="font-size:.73rem;color:var(--muted);">
                                    {{ $payment->paid_at?->format('H:i') }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr style="background:var(--bg);">
                            <td colspan="3"
                                style="text-align:right;font-weight:700;
                                       font-size:.82rem;padding:10px 14px;">
                                Total Cash In
                            </td>
                            <td style="font-weight:700;color:var(--success);padding:10px 14px;">
                                {{ $shift->currency }} {{ number_format($totalCashIn, 2) }}
                            </td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        @endif
    </div>

    {{-- Manual Transactions --}}
    <div class="card">
        <div class="card-header">
            <span class="card-title">
                <i class="bi bi-arrow-left-right me-2" style="color:var(--clay)"></i>
                Manual Transactions
            </span>
            @if($shift->transactions->isNotEmpty())
                <span style="font-size:.75rem;color:var(--muted);">
                    {{ $shift->transactions->count() }} entries
                </span>
            @endif
        </div>

        @if($shift->transactions->isEmpty())
            <div class="card-body">
                <p class="text-muted mb-0" style="font-size:.8rem;">
                    No manual transactions recorded
                </p>
            </div>
        @else
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Type</th>
                            <th>Description</th>
                            <th>Reference</th>
                            <th>Amount</th>
                            <th>Time</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($shift->transactions as $txn)
                            @php
                                $tc = [
                                    'receipt'  => ['bg'=>'#d1fae5','color'=>'#065f46','label'=>'Receipt'],
                                    'refund'   => ['bg'=>'#fee2e2','color'=>'#991b1b','label'=>'Refund'],
                                    'float_in' => ['bg'=>'#dbeafe','color'=>'#1e40af','label'=>'Float In'],
                                    'float_out'=> ['bg'=>'#fef3c7','color'=>'#92400e','label'=>'Float Out'],
                                ][$txn->type] ?? ['bg'=>'#f1f5f9','color'=>'#475569','label'=>ucfirst($txn->type)];
                            @endphp
                            <tr>
                                <td>
                                    <span style="font-size:.7rem;font-weight:600;
                                                 padding:2px 8px;border-radius:20px;
                                                 background:{{ $tc['bg'] }};color:{{ $tc['color'] }};">
                                        {{ $tc['label'] }}
                                    </span>
                                </td>
                                <td style="font-size:.82rem;">{{ $txn->description }}</td>
                                <td style="font-size:.75rem;color:var(--muted);">
                                    {{ $txn->reference ?? '—' }}
                                </td>
                                <td style="font-size:.84rem;font-weight:600;
                                           color:{{ in_array($txn->type, ['float_out','refund']) ? 'var(--danger)' : 'var(--success)' }};">
                                    {{ in_array($txn->type, ['float_out','refund']) ? '-' : '+' }}
                                    {{ $shift->currency }}
                                    {{ number_format($txn->amount, 2) }}
                                </td>
                                <td style="font-size:.73rem;color:var(--muted);">
                                    {{ $txn->transacted_at?->format('H:i') }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif

        {{-- Add Transaction — open shifts only --}}
        @if($shift->status === 'open')
            <div style="padding:16px 18px;border-top:1px solid var(--border);">
                <div style="font-size:.72rem;font-weight:700;text-transform:uppercase;
                            letter-spacing:.08em;color:var(--muted);margin-bottom:10px;">
                    Record Manual Transaction
                </div>
                <form method="POST"
                      action="{{ tenant_route('cashing-up.transactions.store', ['shift' => $shift->id]) }}"
                      class="d-flex gap-2 flex-wrap align-items-end">
                    @csrf
                    <div>
                        <label class="form-label" style="font-size:.72rem;font-weight:600;">
                            Type
                        </label>
                        <select name="type" class="form-select form-select-sm" style="width:160px;">
                            <option value="float_out">Float Out (cash removed)</option>
                            <option value="float_in">Float In (cash added)</option>
                            <option value="refund">Refund paid out</option>
                        </select>
                    </div>
                    <div style="flex:1;min-width:180px;">
                        <label class="form-label" style="font-size:.72rem;font-weight:600;">
                            Description
                        </label>
                        <input type="text" name="description"
                               class="form-control form-control-sm"
                               placeholder="e.g. Petty cash, till replenishment"
                               required>
                    </div>
                    <div>
                        <label class="form-label" style="font-size:.72rem;font-weight:600;">
                            Amount
                        </label>
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">{{ $shift->currency }}</span>
                            <input type="number" name="amount"
                                   class="form-control" style="width:100px;"
                                   min="0.01" step="0.01" required>
                        </div>
                    </div>
                    <div>
                        <label class="form-label" style="font-size:.72rem;font-weight:600;">
                            Reference
                        </label>
                        <input type="text" name="reference"
                               class="form-control form-control-sm"
                               style="width:130px;" placeholder="Optional">
                    </div>
                    <button type="submit" class="btn btn-sm btn-outline-secondary">
                        Add
                    </button>
                </form>
            </div>
        @endif
    </div>

</div>

{{-- ═══ RIGHT COLUMN ═══ --}}
<div class="col-xl-4">

    {{-- Shift Info --}}
    <div class="card mb-3">
        <div class="card-header">
            <span class="card-title">Shift Info</span>
        </div>
        <div class="card-body">
            <div style="display:flex;flex-direction:column;gap:8px;font-size:.8rem;">
                <div style="display:flex;justify-content:space-between;">
                    <span style="color:var(--muted);">Reference</span>
                    <span class="fw-semibold" style="color:var(--clay);">{{ $shift->reference }}</span>
                </div>
                <div style="display:flex;justify-content:space-between;">
                    <span style="color:var(--muted);">Status</span>
                    <span class="fw-semibold">{{ ucfirst($shift->status) }}</span>
                </div>
                <div style="display:flex;justify-content:space-between;">
                    <span style="color:var(--muted);">Opened By</span>
                    <span>{{ $shift->openedBy?->name ?? '—' }}</span>
                </div>
                <div style="display:flex;justify-content:space-between;">
                    <span style="color:var(--muted);">Opened At</span>
                    <span>{{ $shift->opened_at->format('d M Y H:i') }}</span>
                </div>
                @if($shift->status === 'closed')
                    <div style="display:flex;justify-content:space-between;">
                        <span style="color:var(--muted);">Closed By</span>
                        <span>{{ $shift->closedBy?->name ?? '—' }}</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;">
                        <span style="color:var(--muted);">Closed At</span>
                        <span>{{ $shift->closed_at?->format('d M Y H:i') }}</span>
                    </div>
                @endif
                <div style="display:flex;justify-content:space-between;">
                    <span style="color:var(--muted);">Duration</span>
                    <span>
                        {{ $shift->opened_at->diffForHumans($shift->closed_at ?? now(), true) }}
                    </span>
                </div>
                <div style="display:flex;justify-content:space-between;">
                    <span style="color:var(--muted);">Currency</span>
                    <span>{{ $shift->currency }}</span>
                </div>
            </div>

            @if($shift->opening_notes)
                <div style="margin-top:12px;padding-top:12px;
                            border-top:1px solid var(--border);
                            font-size:.78rem;color:var(--muted);">
                    <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;
                                letter-spacing:.08em;margin-bottom:4px;">Opening Notes</div>
                    {{ $shift->opening_notes }}
                </div>
            @endif
        </div>
    </div>

    {{-- Reconciliation --}}
    <div class="card mb-3">
        <div class="card-header">
            <span class="card-title">
                <i class="bi bi-calculator me-2" style="color:var(--clay)"></i>
                Reconciliation
            </span>
        </div>
        <div class="card-body">
            <div style="display:flex;flex-direction:column;gap:0;font-size:.82rem;">

                <div style="display:flex;justify-content:space-between;
                            padding:7px 0;border-bottom:1px solid var(--border);">
                    <span style="color:var(--muted);">Opening Float</span>
                    <span>{{ $shift->currency }} {{ number_format($shift->opening_float, 2) }}</span>
                </div>

                <div style="display:flex;justify-content:space-between;
                            padding:7px 0;border-bottom:1px solid var(--border);">
                    <span style="color:var(--muted);">+ Cash Received</span>
                    <span style="color:var(--success);font-weight:600;">
                        {{ $shift->currency }} {{ number_format($totalCashIn, 2) }}
                    </span>
                </div>

                @if($totalCashOut > 0)
                    <div style="display:flex;justify-content:space-between;
                                padding:7px 0;border-bottom:1px solid var(--border);">
                        <span style="color:var(--muted);">− Float Out</span>
                        <span style="color:var(--danger);">
                            ({{ $shift->currency }} {{ number_format($totalCashOut, 2) }})
                        </span>
                    </div>
                @endif

                @if($totalRefunds > 0)
                    <div style="display:flex;justify-content:space-between;
                                padding:7px 0;border-bottom:1px solid var(--border);">
                        <span style="color:var(--muted);">− Refunds Paid</span>
                        <span style="color:var(--danger);">
                            ({{ $shift->currency }} {{ number_format($totalRefunds, 2) }})
                        </span>
                    </div>
                @endif

                <div style="display:flex;justify-content:space-between;
                            padding:10px 0;font-weight:800;font-size:.9rem;
                            border-top:2px solid var(--text);margin-top:2px;">
                    <span>Expected Float</span>
                    <span style="color:var(--clay);">
                        {{ $shift->currency }} {{ number_format($expectedCash, 2) }}
                    </span>
                </div>

                @if($shift->status === 'closed' && $shift->actual_cash !== null)
                    <div style="display:flex;justify-content:space-between;
                                padding:7px 0;border-top:1px solid var(--border);">
                        <span style="color:var(--muted);">Actual Cash</span>
                        <span class="fw-semibold">
                            {{ $shift->currency }} {{ number_format($shift->actual_cash, 2) }}
                        </span>
                    </div>

                    @php
                        $varianceColor = $shift->variance < 0
                            ? 'var(--danger)'
                            : ($shift->variance > 0 ? 'var(--success)' : 'var(--muted)');
                    @endphp
                    <div style="display:flex;justify-content:space-between;
                                padding:8px 0;border-top:1px solid var(--border);
                                font-weight:700;color:{{ $varianceColor }};">
                        <span>Variance</span>
                        <span>
                            {{ $shift->variance >= 0 ? '+' : '' }}{{ $shift->currency }}
                            {{ number_format($shift->variance, 2) }}
                            <span style="font-size:.68rem;font-weight:400;">
                                @if($shift->variance < 0) (short)
                                @elseif($shift->variance > 0) (over)
                                @else ✓ balanced
                                @endif
                            </span>
                        </span>
                    </div>

                    @if($shift->variance_explanation)
                        <div style="margin-top:8px;padding:8px 10px;background:var(--bg);
                                    border-radius:6px;font-size:.75rem;color:var(--muted);">
                            <strong>Explanation:</strong> {{ $shift->variance_explanation }}
                        </div>
                    @endif
                @endif

            </div>
        </div>
    </div>

    {{-- Breakdown by payment method (closed shifts) --}}
    @if($shift->status === 'closed')
        <div class="card mb-3">
            <div class="card-header">
                <span class="card-title">Payment Method Breakdown</span>
            </div>
            <div class="card-body">
                @php
                    $methods = [
                        'Cash'         => $shift->total_cash_received,
                        'Card'         => $shift->total_card_received,
                        'EcoCash'      => $shift->total_ecocash_received,
                        'InnBucks'     => $shift->total_innbucks_received,
                        'Bank Transfer'=> $shift->total_transfer_received,
                    ];
                    $grandTotal = array_sum($methods);
                @endphp
                @foreach($methods as $label => $amount)
                    @if($amount > 0)
                        <div style="display:flex;justify-content:space-between;
                                    padding:5px 0;border-bottom:1px solid var(--border);
                                    font-size:.8rem;">
                            <span style="color:var(--muted);">{{ $label }}</span>
                            <span class="fw-semibold">
                                {{ $shift->currency }} {{ number_format($amount, 2) }}
                            </span>
                        </div>
                    @endif
                @endforeach
                <div style="display:flex;justify-content:space-between;
                            padding:8px 0;font-weight:700;font-size:.85rem;
                            border-top:2px solid var(--text);margin-top:2px;">
                    <span>Total Received</span>
                    <span style="color:var(--clay);">
                        {{ $shift->currency }} {{ number_format($grandTotal, 2) }}
                    </span>
                </div>
            </div>
        </div>
    @endif

{{-- Close Shift --}}
@if($shift->status === 'open')
    <div class="card" style="border-left:3px solid var(--warning);">
        <div class="card-header">
            <span class="card-title">
                <i class="bi bi-lock me-2" style="color:var(--warning)"></i>
                Close Shift
            </span>
        </div>
        <div class="card-body">
            <form method="POST"
                  action="{{ tenant_route('cashing-up.close', ['shift' => $shift->id]) }}"
                  onsubmit="return confirm('Close this shift?')">
                @csrf

                <div class="mb-3">
                    <label class="form-label fw-semibold">
                        Actual Cash in Drawer
                        <span class="text-danger">*</span>
                    </label>
                    <div class="input-group">
                        <span class="input-group-text" style="font-size:.8rem;">
                            {{ $shift->currency }}
                        </span>
                        <input type="number"
                               name="actual_cash"
                               class="form-control @error('actual_cash') is-invalid @enderror"
                               value="{{ old('actual_cash', number_format($expectedCash, 2, '.', '')) }}"
                               min="0" step="0.01" required>
                        @error('actual_cash')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div style="font-size:.68rem;color:var(--muted);margin-top:3px;">
                        Expected: {{ $shift->currency }} {{ number_format($expectedCash, 2) }}
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Closing Notes</label>
                    <textarea name="closing_notes" rows="2"
                              class="form-control form-control-sm"
                              placeholder="Any discrepancies or notes...">{{ old('closing_notes') }}</textarea>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Variance Explanation</label>
                    <textarea name="variance_explanation" rows="2"
                              class="form-control form-control-sm"
                              placeholder="If actual differs from expected, explain why...">{{ old('variance_explanation') }}</textarea>
                </div>

                {{-- Open new shift toggle --}}
                <div class="mb-3 p-3"
                     style="background:var(--bg);border-radius:8px;
                            border:1px solid var(--border);">
                    <div class="form-check form-switch">
                        <input type="checkbox"
                               name="open_new_shift"
                               value="1"
                               id="openNewShift"
                               class="form-check-input"
                               checked>
                        <label class="form-check-label fw-semibold"
                               for="openNewShift"
                               style="font-size:.82rem;">
                            Open a new shift immediately
                        </label>
                    </div>
                    <div style="font-size:.72rem;color:var(--muted);margin-top:4px;">
                        The actual cash amount becomes the opening float for the next shift
                    </div>
                </div>

                <button type="submit"
                        class="btn btn-warning w-100 fw-semibold"
                        style="color:#000;">
                    <i class="bi bi-lock me-1"></i>Close Shift
                </button>
            </form>
        </div>
    </div>
@endif

    @if($shift->closing_notes)
        <div class="card mt-3">
            <div class="card-header">
                <span class="card-title">Closing Notes</span>
            </div>
            <div class="card-body">
                <p style="font-size:.82rem;color:var(--muted);margin:0;line-height:1.6;">
                    {{ $shift->closing_notes }}
                </p>
            </div>
        </div>
    @endif

</div>
</div>

@endsection