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

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item">Transactions</li>
    <li class="breadcrumb-item active">Cheque Print</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
@if($errors->any())
<div class="alert alert-danger alert-dismissible mb-3">
    @foreach($errors->all() as $error)<div>{{ $error }}</div>@endforeach
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<div class="page-header flex-wrap gap-3">
    <div>
        <p class="text-uppercase text-primary fw-semibold mb-1" style="font-size:11px;letter-spacing:.08em">Transactions</p>
        <h1 class="page-title mb-1">Cheque Print</h1>
        <p class="page-subtitle mb-0">
            Posted Bank Payment and eligible Contra vouchers with a cheque number that have not been printed yet.
            Select vouchers, choose a format, load cheque leaves into your printer, then print.
        </p>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
            <div>
                <h2 class="h6 fw-semibold mb-1">Ready to Print</h2>
                <p class="text-muted mb-0" style="font-size:13px">Select cheques and a format, then click Print.</p>
            </div>
        </div>

        <form method="POST" action="{{ route('banking.cheque-print.print') }}" id="chequePrintForm" target="_blank">
            @csrf
            <div class="row g-3 align-items-end mb-3">
                <div class="col-12 col-md-5 col-lg-4">
                    <label class="form-label fw-semibold" for="chequeFormatId">Cheque Format</label>
                    <select name="cheque_format_id" id="chequeFormatId" class="form-select" required
                            {{ $formats->isEmpty() ? 'disabled' : '' }}>
                        @forelse($formats as $format)
                            <option value="{{ $format->id }}">{{ $format->name }}</option>
                        @empty
                            <option value="">No formats available</option>
                        @endforelse
                    </select>
                </div>
                <div class="col-12 col-md-auto">
                    <button type="submit" class="btn btn-primary" id="printChequesBtn"
                            {{ $queueItems->isEmpty() || $formats->isEmpty() ? 'disabled' : '' }}>
                        <i class="bi bi-printer me-1"></i>Print
                    </button>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-hover mb-0" id="chequeQueueTable">
                    <thead class="table-light">
                        <tr>
                            <th style="width:42px">
                                <input type="checkbox" class="form-check-input" id="selectAllQueue" aria-label="Select all">
                            </th>
                            <th>Date</th>
                            <th>Voucher #</th>
                            <th>Type</th>
                            <th>Payee</th>
                            <th>Cheque No</th>
                            <th>Cheque Date</th>
                            <th class="text-end">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($queueItems as $item)
                        <tr>
                            <td>
                                <input type="checkbox" class="form-check-input queue-checkbox"
                                       name="voucher_ids[]" value="{{ $item['id'] }}">
                            </td>
                            <td>{{ $item['voucher_date'] }}</td>
                            <td class="fw-semibold">{{ $item['voucher_number'] }}</td>
                            <td class="text-muted">{{ $item['type_label'] }}</td>
                            <td>{{ $item['payee'] }}</td>
                            <td>{{ $item['cheque_no'] }}</td>
                            <td>{{ $item['cheque_date'] }}</td>
                            <td class="text-end fw-semibold">{{ $item['amount'] }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted py-5">
                                No cheques are ready to print.
                                <div class="mt-2" style="font-size:13px">
                                    Save and <strong>post</strong> a Bank Payment or eligible Contra voucher with a
                                    <strong>Cheque No</strong>. Draft vouchers are not listed here.
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    const queueChecks = Array.from(document.querySelectorAll('.queue-checkbox'));
    const selectAllQueue = document.getElementById('selectAllQueue');
    const printForm = document.getElementById('chequePrintForm');

    function selectedQueueIds() {
        return queueChecks.filter(function (cb) { return cb.checked; }).map(function (cb) { return cb.value; });
    }

    if (selectAllQueue) {
        selectAllQueue.addEventListener('change', function () {
            queueChecks.forEach(function (cb) { cb.checked = selectAllQueue.checked; });
        });
    }

    if (printForm) {
        printForm.addEventListener('submit', function (event) {
            if (selectedQueueIds().length === 0) {
                event.preventDefault();
                alert('Select at least one cheque to print.');
            }
        });
    }
})();
</script>
@endpush