@extends('layouts.app')
@section('title', 'Cheque Formats')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item">Listing</li>
    <li class="breadcrumb-item active">Cheque Formats</li>
@endsection

@section('content')
@if(session('success'))
<div class="alert alert-success alert-dismissible d-flex gap-2 mb-3" style="font-size:13.5px">
    <i class="bi bi-check-circle flex-shrink-0"></i><div>{{ session('success') }}</div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
</div>
@endif

<div class="page-header flex-wrap gap-3">
    <div>
        <h1 class="page-title">Cheque Formats</h1>
        <p class="page-subtitle">Design layouts that match your bank's cheque leaf. Drag fields to position them.</p>
    </div>
    <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#newChequeFormatModal">
        <i class="bi bi-plus-lg me-1"></i>New Format
    </button>
</div>

<div class="card">
    <div class="card-header fw-semibold">Saved Formats</div>
    <div class="card-body p-0">
        @if($formats->isEmpty())
            <div class="text-center text-muted py-5 px-3">
                No formats yet. Create one to begin.
            </div>
        @else
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Name</th>
                            <th>Size (mm)</th>
                            <th class="text-end pe-3" style="width:140px">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($formats as $format)
                        <tr>
                            <td class="fw-semibold">{{ $format->name }}</td>
                            <td class="text-muted">{{ number_format($format->page_width_mm, 2) }} × {{ number_format($format->page_height_mm, 2) }}</td>
                            <td class="text-end pe-2">
                                <div class="d-flex justify-content-end gap-1">
                                    <a href="{{ route('banking.cheque-formats.design', $format) }}"
                                       class="btn btn-outline-primary btn-sm" title="Edit layout">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <form method="POST"
                                          action="{{ route('banking.cheque-formats.destroy', $format) }}"
                                          onsubmit="return confirm('Delete cheque format {{ $format->name }}?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-outline-danger btn-sm" title="Delete">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
</div>

<div class="modal fade" id="newChequeFormatModal" tabindex="-1" aria-labelledby="newChequeFormatModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" action="{{ route('banking.cheque-formats.store') }}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="newChequeFormatModalLabel">New Cheque Format</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-semibold" for="formatName">Name</label>
                        <input type="text" class="form-control" id="formatName" name="name"
                               value="{{ old('name') }}" required maxlength="100" placeholder="e.g. DBBL">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Quick size</label>
                        <div class="d-flex flex-wrap gap-2">
                            @foreach($sizePresets as $presetKey => $preset)
                            <button type="button"
                                    class="btn btn-outline-secondary btn-sm cheque-size-preset"
                                    data-width="{{ $preset['width'] }}"
                                    data-height="{{ $preset['height'] }}">
                                {{ $preset['label'] }}
                            </button>
                            @endforeach
                        </div>
                    </div>
                    <div class="row g-3">
                        <div class="col-6">
                            <label class="form-label fw-semibold" for="pageWidth">Page Width (mm)</label>
                            <input type="number" class="form-control" id="pageWidth" name="page_width_mm"
                                   value="{{ old('page_width_mm', '190.50') }}" step="0.01" min="50" max="400" required>
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold" for="pageHeight">Page Height (mm)</label>
                            <input type="number" class="form-control" id="pageHeight" name="page_height_mm"
                                   value="{{ old('page_height_mm', '88.90') }}" step="0.01" min="30" max="200" required>
                        </div>
                    </div>
                    <div class="form-text mt-2">
                        Typical cheque size: 180 × 80 mm. You can change values later in the designer.
                    </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 &amp; Design</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.querySelectorAll('.cheque-size-preset').forEach(function (button) {
    button.addEventListener('click', function () {
        document.getElementById('pageWidth').value = Number(button.dataset.width).toFixed(2);
        document.getElementById('pageHeight').value = Number(button.dataset.height).toFixed(2);
    });
});
@if($errors->any())
new bootstrap.Modal(document.getElementById('newChequeFormatModal')).show();
@endif
</script>
@endpush