@extends('patent::layouts.master')

@section('title', 'Create Annual Fee Deadline')

@section('content')
<div class="container-fluid px-4">
    <div class="card shadow rounded-4 border-0">
        <div class="card-header bg-primary text-white">
            <h4 class="mb-0">Create New Annual Fee Deadline</h4>
        </div>

        <div class="card-body">
            <form action="{{ route('patent.annual-fees.store') }}" method="POST">
                @csrf
                
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="patent_id" class="form-label">Patent <span class="text-danger">*</span></label>
                            <select name="patent_id" id="patent_id" class="form-select @error('patent_id') is-invalid @enderror" required>
                                <option value="">Select Patent</option>
                                @foreach($patents as $patent)
                                <option value="{{ $patent->id }}" {{ old('patent_id') == $patent->id ? 'selected' : '' }}>
                                    {{ $patent->aipt_ref }} - {{ Str::limit($patent->application_title, 50) }}
                                </option>
                                @endforeach
                            </select>
                            @error('patent_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="country_id" class="form-label">Country <span class="text-danger">*</span></label>
                            <select name="country_id" id="country_id" class="form-select @error('country_id') is-invalid @enderror" required>
                                <option value="">Select Country</option>
                                @foreach($countries as $country)
                                <option value="{{ $country->id }}" {{ old('country_id') == $country->id ? 'selected' : '' }}>
                                    {{ $country->name }}
                                </option>
                                @endforeach
                            </select>
                            @error('country_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="fee_year" class="form-label">Fee Year <span class="text-danger">*</span></label>
                            <input type="number" name="fee_year" id="fee_year" class="form-control @error('fee_year') is-invalid @enderror" 
                                   value="{{ old('fee_year') }}" min="1" required>
                            @error('fee_year')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="due_date" class="form-label">Due Date <span class="text-danger">*</span></label>
                            <input type="date" name="due_date" id="due_date" class="form-control @error('due_date') is-invalid @enderror" 
                                   value="{{ old('due_date') }}" required>
                            @error('due_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="currency" class="form-label">Currency <span class="text-danger">*</span></label>
                            <select name="currency" id="currency" class="form-select @error('currency') is-invalid @enderror" required>
                                <option value="USD" {{ old('currency') == 'USD' ? 'selected' : '' }}>USD</option>
                                <option value="EUR" {{ old('currency') == 'EUR' ? 'selected' : '' }}>EUR</option>
                                <option value="GBP" {{ old('currency') == 'GBP' ? 'selected' : '' }}>GBP</option>
                                <option value="JPY" {{ old('currency') == 'JPY' ? 'selected' : '' }}>JPY</option>
                                <option value="SAR" {{ old('currency') == 'SAR' ? 'selected' : '' }}>SAR</option>
                            </select>
                            @error('currency')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="fee_amount" class="form-label">Fee Amount <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text" id="currency_symbol">$</span>
                                <input type="number" name="fee_amount" id="fee_amount" class="form-control @error('fee_amount') is-invalid @enderror" 
                                       value="{{ old('fee_amount') }}" step="0.01" min="0" required>
                            </div>
                            @error('fee_amount')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="notes" class="form-label">Notes</label>
                            <textarea name="notes" id="notes" class="form-control @error('notes') is-invalid @enderror" 
                                      rows="3" placeholder="Additional notes about this deadline">{{ old('notes') }}</textarea>
                            @error('notes')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle"></i>
                            <strong>Note:</strong> This will create an annual fee deadline for the specified patent and country. 
                            The system will automatically track payment status and calculate late fees if applicable.
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-between">
                    <a href="{{ route('patent.annual-fees.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Back to List
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Create Deadline
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Update currency symbol when currency changes
    $('#currency').change(function() {
        const currency = $(this).val();
        const symbols = {
            'USD': '$',
            'EUR': '€',
            'GBP': '£',
            'JPY': '¥',
            'SAR': 'ر.س'
        };
        $('#currency_symbol').text(symbols[currency] || '$');
    });

    // Set initial currency symbol
    $('#currency').trigger('change');

    // Auto-fill fee year based on current year
    if (!$('#fee_year').val()) {
        $('#fee_year').val(new Date().getFullYear());
    }

    // Auto-fill due date to 6 months from now if not set
    if (!$('#due_date').val()) {
        const sixMonthsFromNow = new Date();
        sixMonthsFromNow.setMonth(sixMonthsFromNow.getMonth() + 6);
        $('#due_date').val(sixMonthsFromNow.toISOString().split('T')[0]);
    }
});
</script>
@endpush