@extends('garage.layouts.app')

@section('title', 'Simple ledgers')

@section('content')
<div class="container-fluid px-2 px-lg-3 py-3">
    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
        <div>
            <h1 class="h4 mb-0"><i class="bi bi-journal-text me-2 text-primary"></i>Simple ledgers</h1>
            <p class="text-muted small mb-0">Ledgers with type <code>simple</code></p>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#createSimpleLedgerModal">
                <i class="bi bi-plus-lg me-1"></i>Add Simple Ledger
            </button>
            <a href="{{ route('garage.vouchers.index') }}" class="btn btn-sm btn-outline-secondary">Vouchers</a>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success py-2 small">{{ session('success') }}</div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger py-2 small">
            <ul class="mb-0 ps-3">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        </div>
    @endif

    <form method="GET" action="{{ route('garage.ledgers.simple') }}" class="row g-2 mb-3">
        <div class="col-auto flex-grow-1" style="min-width:14rem;">
            <input type="search" name="q" value="{{ $q }}" class="form-control form-control-sm" placeholder="Search name or code…">
        </div>
        <div class="col-auto">
            <button type="submit" class="btn btn-sm btn-outline-primary">Search</button>
            <a href="{{ route('garage.ledgers.simple') }}" class="btn btn-sm btn-outline-secondary">Clear</a>
        </div>
    </form>

    <div class="table-responsive border rounded bg-white">
        <table class="table table-sm table-hover mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th>Name</th>
                    <th>Code</th>
                    <th>Description</th>
                    <th>Status</th>
                    <th class="text-nowrap"></th>
                </tr>
            </thead>
            <tbody>
                @forelse($ledgers as $l)
                    <tr>
                        <td class="fw-semibold">
                            <a href="{{ route('garage.ledger-reports.ledger', $l->id) }}" class="text-decoration-none">{{ $l->name }}</a>
                        </td>
                        <td class="font-monospace small">{{ $l->code }}</td>
                        <td class="small text-muted">{{ $l->description ?? '—' }}</td>
                        <td>
                            @if($l->is_active)
                                <span class="badge bg-success-subtle text-success border border-success-subtle">Active</span>
                            @else
                                <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">Inactive</span>
                            @endif
                        </td>
                        <td class="text-end">
                            <a href="{{ route('garage.ledger-reports.ledger', $l->id) }}" class="btn btn-sm btn-outline-primary">Statement</a>
                            <a href="{{ route('garage.vouchers.index', ['search' => $l->code]) }}" class="btn btn-sm btn-outline-secondary">Find vouchers</a>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="text-center text-muted py-4">No simple ledgers found.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($ledgers->hasPages())
        <div class="mt-3">{{ $ledgers->links() }}</div>
    @endif
</div>

<div class="modal fade" id="createSimpleLedgerModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" action="{{ route('garage.ledgers.simple.store') }}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Create Simple Ledger</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-2">
                        <label class="form-label small text-muted">Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control" value="{{ old('name') }}" required>
                    </div>
                    <div class="mb-2">
                        <label class="form-label small text-muted">Code (optional, auto if empty)</label>
                        <input type="text" name="code" class="form-control" value="{{ old('code') }}" placeholder="e.g. EXP-001">
                    </div>
                    <div class="mb-2">
                        <label class="form-label small text-muted">Description</label>
                        <textarea name="description" class="form-control" rows="2">{{ old('description') }}</textarea>
                    </div>
                    <div class="row g-2">
                        <div class="col-6">
                            <label class="form-label small text-muted">Opening balance</label>
                            <input type="number" step="0.01" min="0" name="opening_balance" class="form-control" value="{{ old('opening_balance', 0) }}">
                        </div>
                        <div class="col-6">
                            <label class="form-label small text-muted">Balance type</label>
                            <select name="opening_balance_type" class="form-select">
                                <option value="debit" @selected(old('opening_balance_type','debit')==='debit')>Debit</option>
                                <option value="credit" @selected(old('opening_balance_type')==='credit')>Credit</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-check mt-3">
                        <input type="checkbox" class="form-check-input" id="simpleLedgerActive" name="is_active" value="1" {{ old('is_active', 1) ? 'checked' : '' }}>
                        <label class="form-check-label" for="simpleLedgerActive">Active</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Create</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection