@extends('admin.layout.dashboard_master')

@section('content')
<main id="main" class="main">
    <div class="pagetitle">
        <h1>Create Voucher</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('american.plastic.admin.dashboard') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.vouchers.index') }}">Vouchers</a></li>
                <li class="breadcrumb-item active">Create</li>
            </ol>
        </nav>
    </div>

    <section class="section">
        <div class="row">
            <!-- Form Column -->
            <div class="col-lg-8">
                <div class="card shadow-sm border-0">
                    <div class="card-body">
                        <h5 class="card-title">Voucher Details</h5>

                        <form action="{{ route('admin.vouchers.store') }}" method="POST">
                            @csrf
                            <div class="row mb-3">
                                <label for="code" class="col-sm-3 col-form-label">Voucher Code</label>
                                <div class="col-sm-9">
                                    <input type="text" name="code" id="code" class="form-control @error('code') is-invalid @enderror" value="{{ old('code') }}" placeholder="e.g. SAVE10" required>
                                    @error('code')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label for="type" class="col-sm-3 col-form-label">Type</label>
                                <div class="col-sm-9">
                                    <select name="type" id="type" class="form-select @error('type') is-invalid @enderror" required>
                                        <option value="fixed" {{ old('type') == 'fixed' ? 'selected' : '' }}>Fixed Amount</option>
                                        <option value="percentage" {{ old('type') == 'percentage' ? 'selected' : '' }}>Percentage (%)</option>
                                    </select>
                                    @error('type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label for="value" class="col-sm-3 col-form-label">Value</label>
                                <div class="col-sm-9">
                                    <input type="number" step="0.01" name="value" id="value" class="form-control @error('value') is-invalid @enderror" value="{{ old('value') }}" required>
                                    <div id="value-helper" class="form-text text-muted mt-1">Enter the discount value.</div>
                                    @error('value')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label for="min_spend" class="col-sm-3 col-form-label">Minimum Spend</label>
                                <div class="col-sm-9">
                                    <input type="number" step="0.01" name="min_spend" id="min_spend" class="form-control @error('min_spend') is-invalid @enderror" value="{{ old('min_spend', 0) }}">
                                    @error('min_spend')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label for="expiry_date" class="col-sm-3 col-form-label">Expiry Date</label>
                                <div class="col-sm-9">
                                    <input type="date" name="expiry_date" id="expiry_date" class="form-control @error('expiry_date') is-invalid @enderror" value="{{ old('expiry_date') }}" required>
                                    @error('expiry_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="text-center mt-4">
                                <button type="submit" class="btn btn-primary px-4">Create Voucher</button>
                                <a href="{{ route('admin.vouchers.index') }}" class="btn btn-secondary px-4">Cancel</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Instructions Column -->
            <div class="col-lg-4">
                <div class="card shadow-sm border-0">
                    <div class="card-body">
                        <h5 class="card-title d-flex align-items-center">
                            <i class="bi bi-info-circle-fill text-primary me-2"></i>
                            Instructions
                        </h5>
                        <div class="instruction-content">
                            <p class="text-muted small">Follow these guidelines when creating a new voucher:</p>
                            <ul class="list-unstyled">
                                <li class="mb-3 d-flex align-items-start">
                                    <i class="bi bi-check-circle-fill text-success me-2 mt-1" style="font-size: 0.9rem;"></i>
                                    <div>
                                        <strong>Voucher Code:</strong>
                                        <p class="text-muted small mb-0">Must be unique (e.g. <code>SUMMER20</code>). Avoid special characters.</p>
                                    </div>
                                </li>
                                <li class="mb-3 d-flex align-items-start">
                                    <i class="bi bi-check-circle-fill text-success me-2 mt-1" style="font-size: 0.9rem;"></i>
                                    <div>
                                        <strong>Voucher Type:</strong>
                                        <p class="text-muted small mb-0">
                                            Select <strong>Fixed Amount</strong> for direct currency discounts, or <strong>Percentage</strong> for relative discounts.
                                        </p>
                                    </div>
                                </li>
                                <li class="mb-3 d-flex align-items-start">
                                    <i class="bi bi-check-circle-fill text-success me-2 mt-1" style="font-size: 0.9rem;"></i>
                                    <div>
                                        <strong>Voucher Value:</strong>
                                        <p class="text-muted small mb-0">
                                            If type is <em>Percentage</em>, the value must be between <strong>1% and 99%</strong>. Values greater than 99% are not allowed.
                                        </p>
                                    </div>
                                </li>
                                <li class="mb-3 d-flex align-items-start">
                                    <i class="bi bi-check-circle-fill text-success me-2 mt-1" style="font-size: 0.9rem;"></i>
                                    <div>
                                        <strong>Minimum Spend:</strong>
                                        <p class="text-muted small mb-0">The minimum order amount required. Set to 0 if there is no minimum spend restriction.</p>
                                    </div>
                                </li>
                                <li class="mb-3 d-flex align-items-start">
                                    <i class="bi bi-check-circle-fill text-success me-2 mt-1" style="font-size: 0.9rem;"></i>
                                    <div>
                                        <strong>Expiry Date:</strong>
                                        <p class="text-muted small mb-0">The expiration date must be set to a future date.</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const typeSelect = document.getElementById('type');
            const valueInput = document.getElementById('value');
            const valueHelper = document.getElementById('value-helper');

            function updateValueConstraints() {
                if (typeSelect.value === 'percentage') {
                    valueInput.setAttribute('max', '99');
                    valueInput.setAttribute('min', '1');
                    valueHelper.textContent = 'Maximum value allowed is 99% for percentage vouchers.';
                    valueHelper.className = 'form-text text-warning mt-1';
                } else {
                    valueInput.removeAttribute('max');
                    valueInput.setAttribute('min', '0.01');
                    valueHelper.textContent = 'Enter the fixed discount amount (e.g. 500).';
                    valueHelper.className = 'form-text text-muted mt-1';
                }
            }

            typeSelect.addEventListener('change', updateValueConstraints);
            updateValueConstraints();
        });
    </script>
</main>
@endsection