@extends('layouts.app')
@section('title', 'Invoice '.$invoice->id.' — EasyHR Billing')
@section('content')
    <style>
        @include('invoices.document-css')
        .invoice-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
        .g-sheet { background: #fff; border: 1px solid #e6ebf2; padding: 28px 32px 18px; min-width: 0; }
        .mark-paid { width: 100%; }
        @media (max-width: 1050px) {
            .invoice-layout { grid-template-columns: 1fr; }
            .mark-paid { max-width: 360px; }
        }
    </style>
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
        <h1 class="page-title">Invoice #{{ $invoice->id }}</h1>
        <div class="d-flex gap-2 flex-wrap justify-content-end">
            <form method="POST" action="{{ route('invoices.sync', $invoice) }}">
                @csrf
                <button class="btn btn-outline-primary" type="submit">Sync to Company Site</button>
            </form>
            <a class="btn btn-outline-secondary" href="{{ route('invoices.pdf', $invoice) }}">Download PDF</a>
            @if ($invoice->status === 'unpaid')
                <form method="POST" action="{{ route('invoices.regenerate', $invoice) }}" onsubmit="return confirm('Regenerate this unpaid invoice from the current active users and fees?')">
                    @csrf
                    <button class="btn btn-outline-primary" type="submit">Regenerate</button>
                </form>
                <form method="POST" action="{{ route('invoices.destroy', $invoice) }}" onsubmit="return confirm('Delete this unpaid invoice?')">
                    @csrf
                    @method('DELETE')
                    <button class="btn btn-outline-danger" type="submit">Delete</button>
                </form>
            @endif
        </div>
    </div>

    @if ($invoice->sync_error)
        <div class="alert alert-warning">Not synced to the company site: {{ $invoice->sync_error }}</div>
    @endif

    <div class="invoice-layout">
        <div class="g-sheet">
            @include('invoices.sheet')
        </div>
        @if ($invoice->status === 'unpaid')
            <form method="POST" action="{{ route('invoices.paid', $invoice) }}" class="card card-body mark-paid">
                @csrf
                <h2 class="h6">Mark Paid</h2>
                <div class="mb-2">
                    <label class="form-label" for="paid_at">Paid At</label>
                    <input id="paid_at" name="paid_at" type="datetime-local" class="form-control" value="{{ old('paid_at', now('Asia/Dhaka')->format('Y-m-d\TH:i')) }}" required>
                    @error('paid_at')<div class="text-danger small">{{ $message }}</div>@enderror
                </div>
                <div class="mb-2">
                    <label class="form-label" for="payment_note">Note</label>
                    <textarea id="payment_note" name="payment_note" class="form-control" rows="2">{{ old('payment_note') }}</textarea>
                </div>
                <button class="btn btn-success" type="submit">Mark Paid</button>
            </form>
        @endif
    </div>

    @if ($invoice->carriedTo)
        <div class="text-muted small mt-3">
            Carried To <a href="{{ route('invoices.show', $invoice->carriedTo) }}">Invoice #{{ $invoice->carried_to_invoice_id }}</a>
        </div>
    @endif
@endsection