@extends('components.dashboard.layout.layout')

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">
                <x-page-title
                    title="Create Referral Setting"
                    description="Set the referrer discount, referred person discount, and discount calculation type.">
                    <a href="{{ route('referralsettings.index') }}" class="asset-btn asset-btn--secondary">
                        Back to Referrals
                    </a>
                </x-page-title>

                <form method="POST" action="{{ route('referralsettings.store') }}">
                    @csrf

                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <strong>Please review the following errors:</strong>
                            <ul class="mb-0 mt-2">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <div class="card border-0 shadow-sm rounded-4">
                        <div class="card-body">
                            <div class="asset-form-grid">
                                <div class="asset-col-6">
                                    <x-forms.labels.basic>Discount Type <span class="text-danger">*</span></x-forms.labels.basic>
                                    <x-forms.select.basic class="asset-select select2" name="discount_type" required style="width: 100%;">
                                        <option value="">Select Discount Type</option>
                                        <option value="percentage" @selected(old('discount_type') == 'percentage')>Percentage</option>
                                        <option value="fixed" @selected(old('discount_type') == 'fixed')>Fixed Amount</option>
                                    </x-forms.select.basic>
                                </div>

                                <div class="asset-col-6">
                                    <x-forms.input-label.basic name="referrer_discount" required value="{{ old('referrer_discount') }}" type="number" min="0" step="0.01">
                                        Referrer Discount <span class="text-danger">*</span>
                                    </x-forms.input-label.basic>
                                </div>

                                <div class="asset-col-6">
                                    <x-forms.input-label.basic name="referred_discount" required value="{{ old('referred_discount') }}" type="number" min="0" step="0.01">
                                        Referred Person Discount <span class="text-danger">*</span>
                                    </x-forms.input-label.basic>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end gap-2 mt-4">
                        <a href="{{ route('referralsettings.index') }}" class="asset-btn asset-btn--secondary">Cancel</a>
                        <button type="submit" class="asset-btn asset-btn--primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function () {
            $('.select2').select2({
                placeholder: "Select option",
                allowClear: true,
                width: '100%'
            });
        });
    </script>
@endpush