{{-- resources/views/taxes/create.blade.php --}}
@extends('layouts.app')

@section('title', 'Add Tax Rate')
@section('header', 'Create New Tax Rate')

@section('content')
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">
            <i class="fas fa-plus-circle text-primary me-2"></i>Add New Tax Rate
        </h5>
    </div>
    <div class="card-body">
        <form action="{{ route('taxes.store') }}" method="POST" id="taxForm">
            @csrf
            
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="name" class="form-label">Tax Name <span class="text-danger">*</span></label>
                    <input type="text" 
                           class="form-control @error('name') is-invalid @enderror" 
                           id="name" 
                           name="name" 
                           value="{{ old('name') }}" 
                           required 
                           autofocus
                           placeholder="e.g., VAT, GST, Service Tax">
                    @error('name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <small class="text-muted">Example: VAT 10%, GST 18%, Service Charge</small>
                </div>
                
                <div class="col-md-3 mb-3">
                    <label for="type" class="form-label">Tax Type <span class="text-danger">*</span></label>
                    <select class="form-control @error('type') is-invalid @enderror" id="type" name="type" required>
                        <option value="percentage" {{ old('type') == 'percentage' ? 'selected' : '' }}>Percentage (%)</option>
                        <option value="fixed" {{ old('type') == 'fixed' ? 'selected' : '' }}>Fixed Amount ($)</option>
                    </select>
                    @error('type')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                
                <div class="col-md-3 mb-3">
                    <label for="rate" class="form-label">Tax Rate <span class="text-danger">*</span></label>
                    <div class="input-group">
                        <input type="number" 
                               class="form-control @error('rate') is-invalid @enderror" 
                               id="rate" 
                               name="rate" 
                               value="{{ old('rate') }}" 
                               step="0.01"
                               required
                               placeholder="0.00">
                        <span class="input-group-text" id="rate-symbol">%</span>
                    </div>
                    @error('rate')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                
                <div class="col-md-12 mb-3">
                    <label for="description" class="form-label">Description</label>
                    <textarea class="form-control @error('description') is-invalid @enderror" 
                              id="description" 
                              name="description" 
                              rows="3" 
                              placeholder="Describe when this tax applies...">{{ old('description') }}</textarea>
                    @error('description')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                
                <div class="col-md-6 mb-3">
                    <div class="form-check">
                        <input class="form-check-input" 
                               type="checkbox" 
                               name="is_active" 
                               id="is_active" 
                               value="1" 
                               {{ old('is_active', true) ? 'checked' : '' }}>
                        <label class="form-check-label" for="is_active">
                            <i class="fas fa-check-circle text-success me-1"></i> Active
                        </label>
                        <div class="form-text">Inactive taxes won't appear in POS</div>
                    </div>
                </div>
                
                <div class="col-md-6 mb-3">
                    <div class="form-check">
                        <input class="form-check-input" 
                               type="checkbox" 
                               name="is_default" 
                               id="is_default" 
                               value="1" 
                               {{ old('is_default') ? 'checked' : '' }}>
                        <label class="form-check-label" for="is_default">
                            <i class="fas fa-star text-warning me-1"></i> Set as Default
                        </label>
                        <div class="form-text">This tax will be automatically selected in POS</div>
                    </div>
                </div>
            </div>
            
            <div class="mt-3">
                <button type="submit" class="btn btn-primary" id="submitBtn">
                    <i class="fas fa-save"></i> Create Tax Rate
                </button>
                <a href="{{ route('taxes.index') }}" class="btn btn-secondary">
                    <i class="fas fa-times"></i> Cancel
                </a>
            </div>
        </form>
    </div>
</div>

<div class="card mt-3">
    <div class="card-header">
        <h6 class="mb-0"><i class="fas fa-chart-line text-info"></i> Tax Calculation Examples</h6>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <div class="border rounded p-3 mb-2 bg-light">
                    <strong><i class="fas fa-percent text-primary"></i> Percentage Tax (e.g., 10% VAT)</strong>
                    <hr>
                    <small>Subtotal: $100.00</small><br>
                    <small>Tax: $100.00 × 10% = $10.00</small><br>
                    <strong>Total: $110.00</strong>
                </div>
            </div>
            <div class="col-md-6">
                <div class="border rounded p-3 mb-2 bg-light">
                    <strong><i class="fas fa-dollar-sign text-success"></i> Fixed Tax (e.g., $5 Service Fee)</strong>
                    <hr>
                    <small>Subtotal: $100.00</small><br>
                    <small>Tax: $5.00</small><br>
                    <strong>Total: $105.00</strong>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Change rate symbol based on tax type
    $('#type').change(function() {
        if($(this).val() === 'percentage') {
            $('#rate-symbol').text('%');
            $('#rate').attr('max', 100);
            $('#rate').attr('step', 0.01);
            $('#rate').attr('placeholder', 'Enter percentage (e.g., 10 for 10%)');
        } else {
            $('#rate-symbol').text('$');
            $('#rate').removeAttr('max');
            $('#rate').attr('step', 0.01);
            $('#rate').attr('placeholder', 'Enter fixed amount (e.g., 5.00)');
        }
    });
    
    // Form validation
    $('#taxForm').on('submit', function(e) {
        const name = $('#name').val().trim();
        const rate = $('#rate').val();
        const type = $('#type').val();
        
        if(name === '') {
            e.preventDefault();
            Swal.fire('Error', 'Please enter tax name', 'error');
            return false;
        }
        
        if(rate === '' || rate <= 0) {
            e.preventDefault();
            Swal.fire('Error', 'Please enter a valid tax rate', 'error');
            return false;
        }
        
        if(type === 'percentage' && rate > 100) {
            e.preventDefault();
            Swal.fire('Error', 'Percentage rate cannot exceed 100%', 'error');
            return false;
        }
        
        $('#submitBtn').html('<i class="fas fa-spinner fa-spin"></i> Creating...').prop('disabled', true);
    });
    
    // Trigger on page load
    $('#type').trigger('change');
</script>
@endpush
@endsection