@extends('layouts.app')

@section('title', 'Create Cheque Book')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title">
                        <i class="fas fa-book"></i> Create New Cheque Book
                    </h3>
                    <a href="{{ route('cheque-books.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Back to List
                    </a>
                </div>
                
                <div class="card-body">
                    <form action="{{ route('cheque-books.store') }}" method="POST">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="bank_account_infos_id">Bank Account <span class="text-danger">*</span></label>
                                    <select class="form-control @error('bank_account_infos_id') is-invalid @enderror" 
                                            id="bank_account_infos_id" name="bank_account_infos_id" required>
                                        <option value="">Select Bank Account</option>
                                        @foreach($bankAccounts as $account)
                                            <option value="{{ $account->id }}" {{ old('bank_account_infos_id') == $account->id ? 'selected' : '' }}>
                                                {{ $account->account_name ?? 'N/A' }} - {{ $account->bank_name }} - {{ $account->account_number }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('bank_account_infos_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="book_number">Book Number</label>
                                    <input type="text" class="form-control @error('book_number') is-invalid @enderror" 
                                           id="book_number" name="book_number" 
                                           value="{{ old('book_number') }}" 
                                           placeholder="Enter book number (optional)">
                                    @error('book_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="start_number">Start Number <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control @error('start_number') is-invalid @enderror" 
                                           id="start_number" name="start_number" 
                                           value="{{ old('start_number') }}" 
                                           min="1" required>
                                    @error('start_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="end_number">End Number <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control @error('end_number') is-invalid @enderror" 
                                           id="end_number" name="end_number" 
                                           value="{{ old('end_number') }}" 
                                           min="1" required>
                                    @error('end_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted" id="totalLeaves"></small>
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="issued_date">Issued Date <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control @error('issued_date') is-invalid @enderror" 
                                           id="issued_date" name="issued_date" 
                                           value="{{ old('issued_date', date('Y-m-d')) }}" 
                                           required>
                                    @error('issued_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="received_by">Received By</label>
                                    <input type="text" class="form-control @error('received_by') is-invalid @enderror" 
                                           id="received_by" name="received_by" 
                                           value="{{ old('received_by') }}" 
                                           placeholder="Enter receiver name (optional)">
                                    @error('received_by')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="status">Status <span class="text-danger">*</span></label>
                                    <select class="form-control @error('status') is-invalid @enderror" 
                                            id="status" name="status" required>
                                        <option value="active" {{ old('status', 'active') == 'active' ? 'selected' : '' }}>Active</option>
                                        <option value="completed" {{ old('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                                        <option value="cancelled" {{ old('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Create Cheque Book
                            </button>
                            <a href="{{ route('cheque-books.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times"></i> Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const startNumber = document.getElementById('start_number');
    const endNumber = document.getElementById('end_number');
    const totalLeaves = document.getElementById('totalLeaves');
    
    function calculateTotalLeaves() {
        const start = parseInt(startNumber.value) || 0;
        const end = parseInt(endNumber.value) || 0;
        
        if (start > 0 && end > 0 && end >= start) {
            const total = (end - start) + 1;
            totalLeaves.textContent = `Total leaves: ${total}`;
            totalLeaves.style.color = '#28a745';
        } else if (start > 0 && end > 0 && end < start) {
            totalLeaves.textContent = 'End number must be greater than or equal to start number';
            totalLeaves.style.color = '#dc3545';
        } else {
            totalLeaves.textContent = '';
        }
    }
    
    startNumber.addEventListener('input', calculateTotalLeaves);
    endNumber.addEventListener('input', calculateTotalLeaves);
});
</script>
@endsection