@extends('layouts.app')

@section('page-title', 'Record Rent Payment')

@section('content')
<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header border-0 pb-0">
                <h4 class="card-title mb-0">Record Rent Payment</h4>
            </div>
            <div class="card-body">
                <form action="{{ route('rent-payments.store') }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label required">Gym</label>
                            <select name="gym_id" class="form-select @error('gym_id') is-invalid @enderror" required>
                                <option value="">Select Gym</option>
                                @foreach($gyms as $gym)
                                    <option value="{{ $gym->id }}" {{ (old('gym_id', $selectedGym?->id) == $gym->id) ? 'selected' : '' }}>
                                        {{ $gym->name }} - Rs {{ number_format($gym->rent_amount, 2) }}/month
                                    </option>
                                @endforeach
                            </select>
                            @error('gym_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label required">Amount</label>
                            <input type="number" name="amount" class="form-control @error('amount') is-invalid @enderror" 
                                   placeholder="Enter Amount" value="{{ old('amount', $selectedGym?->rent_amount) }}" 
                                   step="0.01" min="0" required>
                            @error('amount')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label required">Payment Date</label>
                            <input type="date" name="payment_date" id="payment_date_field" class="form-control @error('payment_date') is-invalid @enderror" 
                                   value="{{ old('payment_date', date('Y-m-d')) }}" required readonly>
                            <small class="form-text text-muted">Next payment due date will be automatically set to 1 month from this date</small>
                            @error('payment_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Notes</label>
                            <textarea name="notes" class="form-control @error('notes') is-invalid @enderror" rows="3" placeholder="Optional notes">{{ old('notes') }}</textarea>
                            @error('notes')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="card-footer justify-content-end">
                        <a href="{{ route('rent-payments.index') }}" class="btn btn-danger light">Cancel</a>
                        <button type="submit" class="btn btn-primary">Record Payment</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const dateInput = document.getElementById('payment_date_field');
    if (dateInput) {
        // Remove readonly on direct click to allow date picker
        dateInput.addEventListener('mousedown', function(e) {
            if (this.readOnly) {
                this.readOnly = false;
                // Small delay to ensure readonly is removed before focus
                setTimeout(() => {
                    this.focus();
                    if (this.showPicker) {
                        this.showPicker();
                    }
                }, 10);
            }
        });
        
        // Make readonly again after date is selected or field loses focus
        dateInput.addEventListener('change', function() {
            this.readOnly = true;
        });
        
        dateInput.addEventListener('blur', function() {
            this.readOnly = true;
        });
        
        // Allow keyboard input (Enter key) to open picker
        dateInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' || e.key === ' ') {
                this.readOnly = false;
                if (this.showPicker) {
                    this.showPicker();
                }
            }
        });
    }
});
</script>
@endpush