@extends('layouts.app')

@section('content')
<div class="row">
    <div class="col-lg-8">
        <div class="card-custom">
            <div class="card-header-custom">
                <h3 class="mb-0">
                    <i class="fas fa-plus-circle mr-2"></i>
                    Create New Fee Challan
                </h3>
            </div>
            
            <div class="card-body-custom">
                <form action="{{ route('challans.store') }}" method="POST" id="challanForm">
                    @csrf
                    
                    <!-- Student Information Section -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h5 class="text-primary mb-3">
                                <i class="fas fa-user-graduate mr-2"></i>
                                Student Information
                            </h5>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="student_info" class="font-weight-bold">
                                    <i class="fas fa-user mr-1"></i>Name/Roll No
                                </label>
                                <input type="text" name="student_info" id="student_info" 
                                       class="form-control form-control-custom" 
                                       placeholder="Enter Student Name or Roll Number" 
                                       value="{{ old('student_info') }}" required>
                                @error('student_info')
                                    <div class="text-danger mt-1">
                                        <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="cnic" class="font-weight-bold">
                                    <i class="fas fa-id-card mr-1"></i>CNIC (13 digits)
                                </label>
                                <input type="text" name="cnic" id="cnic" 
                                       class="form-control form-control-custom" 
                                       placeholder="Enter 13-digit CNIC" 
                                       pattern="[0-9]{13}" title="13 digit CNIC without dashes" 
                                       value="{{ old('cnic') }}" required>
                                @error('cnic')
                                    <div class="text-danger mt-1">
                                        <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <!-- Fee Information Section -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h5 class="text-primary mb-3">
                                <i class="fas fa-dollar-sign mr-2"></i>
                                Fee Information
                            </h5>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="fee_type_id" class="font-weight-bold">
                                    <i class="fas fa-tag mr-1"></i>Fee Type
                                </label>
                                <div class="custom-select-container">
                                    <select name="fee_type_id" id="fee_type_id" 
                                            class="custom-select-field" required>
                                        <option value="">Select Fee Type</option>
                                        @foreach($feeTypes as $feeType)
                                            <option value="{{ $feeType->id }}" 
                                                    data-amount="{{ $feeType->fee_amount }}" 
                                                    {{ old('fee_type_id') == $feeType->id ? 'selected' : '' }}>
                                                {{ $feeType->name }} - Rs. {{ number_format($feeType->fee_amount) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                @error('fee_type_id')
                                    <div class="text-danger mt-1">
                                        <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="amount" class="font-weight-bold">
                                    <i class="fas fa-money-bill-wave mr-1"></i>Amount (PKR)
                                </label>
                                <input type="number" name="amount" id="amount" 
                                       class="form-control form-control-custom" 
                                       step="1" pattern="\d*" min="1" 
                                       value="{{ old('amount') }}" required>
                                @error('amount')
                                    <div class="text-danger mt-1">
                                        <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <!-- Contact Information Section -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h5 class="text-primary mb-3">
                                <i class="fas fa-phone mr-2"></i>
                                Contact Information
                            </h5>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="mobile_no" class="font-weight-bold">
                                    <i class="fas fa-mobile-alt mr-1"></i>Mobile Number
                                </label>
                                <input type="text" name="mobile_no" id="mobile_no" 
                                       class="form-control form-control-custom" 
                                       placeholder="03XX-XXXXXXX" 
                                       pattern="03[0-9]{9}" title="11 digit mobile starting with 03" 
                                       value="{{ old('mobile_no') }}" required>
                                @error('mobile_no')
                                    <div class="text-danger mt-1">
                                        <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="expiry_date" class="font-weight-bold">
                                    <i class="fas fa-calendar-alt mr-1"></i>Expiry Date
                                </label>
                                <input type="date" name="expiry_date" id="expiry_date" 
                                       class="form-control form-control-custom" 
                                       value="{{ old('expiry_date') }}" required>
                                @error('expiry_date')
                                    <div class="text-danger mt-1">
                                        <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <!-- Action Buttons -->
                    <div class="form-group text-center">
                        <button type="submit" class="btn btn-custom btn-success-custom mr-3">
                            <i class="fas fa-check-circle mr-2"></i>Create Challan
                        </button>
                        <a href="{{ route('challans.index') }}" class="btn btn-custom btn-secondary">
                            <i class="fas fa-times-circle mr-2"></i>Cancel
                        </a>
                    </div>

                    @if(session('success'))
                        <div class="alert alert-success alert-custom fade-in text-center mt-3">
                            <i class="fas fa-check-circle mr-2"></i>
                            {{ session('success') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif
                </form>
            </div>
        </div>
    </div>
    
    <!-- Recent Challans Sidebar -->
    <div class="col-lg-4">
        <div class="card-custom">
            <div class="card-header-custom">
                <h5 class="mb-0">
                    <i class="fas fa-history mr-2"></i>
                    Recent Challans
                </h5>
            </div>
            <div class="card-body-custom">
                @if($challans->count() > 0)
                    <div class="list-group list-group-flush">
                        @foreach($challans->take(5) as $challan)
                            <div class="list-group-item border-0 px-0">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <h6 class="mb-1 font-weight-bold">{{ $challan->student_info }}</h6>
                                        <p class="mb-1 text-muted">{{ $challan->feeType->name }}</p>
                                        <small class="text-success font-weight-bold">
                                            Rs. {{ number_format($challan->amount) }}
                                        </small>
                                    </div>
                                    <small class="text-muted">
                                        {{ $challan->created_at->format('M d') }}
                                    </small>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="text-center mt-3">
                        <a href="{{ route('challans.index') }}" class="btn btn-sm btn-outline-primary">
                            View All Challans
                        </a>
                    </div>
                @else
                    <div class="text-center text-muted py-4">
                        <i class="fas fa-inbox fa-2x mb-3"></i>
                        <p>No challans created yet</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const feeTypeSelect = document.getElementById('fee_type_id');
        const amountInput = document.getElementById('amount');
        const form = document.getElementById('challanForm');
        const cnicInput = document.getElementById('cnic');
        const mobileInput = document.getElementById('mobile_no');
        
        // Fee type change handler
        feeTypeSelect.addEventListener('change', function() {
            const selectedOption = this.options[this.selectedIndex];
            const amount = selectedOption.getAttribute('data-amount');
            
            // Force complete text display
            this.style.width = '100%';
            this.style.minWidth = '300px';
            this.style.maxWidth = 'none';
            this.style.textOverflow = 'initial';
            this.style.overflow = 'visible';
            this.style.whiteSpace = 'nowrap';
            this.style.display = 'block';
            this.style.color = '#333';
            this.style.backgroundColor = 'white';
            
            // Update amount field
            amountInput.value = amount ? parseInt(amount) : '';
        });

        // Force text display on page load
        window.addEventListener('load', function() {
            feeTypeSelect.style.width = '100%';
            feeTypeSelect.style.minWidth = '300px';
            feeTypeSelect.style.maxWidth = 'none';
            feeTypeSelect.style.textOverflow = 'initial';
            feeTypeSelect.style.overflow = 'visible';
            feeTypeSelect.style.whiteSpace = 'nowrap';
        });
        
        // Set default date to tomorrow if no old value exists
        @if(!old('expiry_date'))
            const tomorrow = new Date();
            tomorrow.setDate(tomorrow.getDate() + 1);
            document.getElementById('expiry_date').valueAsDate = tomorrow;
        @endif
        
        // CNIC validation - remove any non-numeric characters
        cnicInput.addEventListener('input', function() {
            this.value = this.value.replace(/\D/g, '');
        });
        
        // Mobile number validation - ensure starts with 03 and only numbers
        mobileInput.addEventListener('input', function() {
            this.value = this.value.replace(/\D/g, '');
            if (this.value.length > 0 && !this.value.startsWith('03')) {
                this.value = '03' + this.value.substring(2);
            }
        });
        
        // Form submission validation
        form.addEventListener('submit', function(e) {
            // Validate CNIC (exactly 13 digits)
            if (cnicInput.value.length !== 13) {
                alert('CNIC must be exactly 13 digits');
                cnicInput.focus();
                e.preventDefault();
                return;
            }
            
            // Validate Mobile (exactly 11 digits starting with 03)
            if (mobileInput.value.length !== 11 || !mobileInput.value.startsWith('03')) {
                alert('Mobile number must be exactly 11 digits starting with 03');
                mobileInput.focus();
                e.preventDefault();
                return;
            }
        });
    });
</script>
@endsection
@endsection