<x-admin-app-layout>
    <div class="white-box">
        <x-admin::page-header title="{{ __('Platform Fees') }}" :buttons="$buttons" />
        <x-admin::table :columns="$columns" :data="$platform_fees" />
    </div>
    <x-admin::modal modalId="create_platform_fee" title="Add new Range Platform Fee">
        <form class="form-submit-add" method="POST">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 xxl:gap-6">
                <div class="col-span-2">
                    <x-admin::label for="fee_type">Select Fee Type</x-admin::label>
                    <x-admin::select-option id="fee_type" name="fee_type">
                        @foreach (['sell', 'rental'] as $fee_type)
                            <option value="{{ $fee_type }}" class="capitalize">{{ ucfirst($fee_type) }}</option>
                        @endforeach
                    </x-admin::select-option>
                    <x-admin::input-error :errors="$errors" name="fee_type" />
                </div>
                <x-admin::number-input-group name="starting_range" label="Starting Range" placeholder="500" />
                <x-admin::number-input-group name="ending_range" label="Ending Range" placeholder="2000" />
                <div>
                    <x-admin::label for="fee_type">Select Type</x-admin::label>
                    <x-admin::select-option id="type" name="type">
                        @foreach (['fixed', 'percentage'] as $type)
                            <option value="{{ $type }}" class="capitalize">{{ ucfirst($type) }}</option>
                        @endforeach
                    </x-admin::select-option>
                    <x-admin::input-error :errors="$errors" name="type" />
                </div>
                <x-admin::number-input-group name="fee" label="Fee" placeholder="200" />
            </div>
            <div class="flex items-center justify-end mt-4">
                <x-admin::primary-button type="submit">
                    {{ __('Save') }}
                </x-admin::primary-button>
            </div>
        </form>
    </x-admin::modal>
    <x-admin::modal modalId="edit_platform_fee" title="Edit A Fee">
        <form class="form-submit-edit" method="POST">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 xxl:gap-6">
                <div class="col-span-2">
                    <x-admin::label for="fee_type">Select Fee Type</x-admin::label>
                    <x-admin::select-option name="fee_type">
                        @foreach (['sell', 'rental'] as $fee_type)
                            <option value="{{ $fee_type }}" class="capitalize">{{ ucfirst($fee_type) }}</option>
                        @endforeach
                    </x-admin::select-option>
                    <x-admin::input-error :errors="$errors" name="fee_type" />
                </div>
                <x-admin::number-input-group name="starting_range" label="Starting Range" placeholder="500" />
                <x-admin::number-input-group name="ending_range" label="Ending Range" placeholder="2000" />
                <div>
                    <x-admin::label for="fee_type">Select Type</x-admin::label>
                    <x-admin::select-option name="type">
                        @foreach (['fixed', 'percentage'] as $type)
                            <option value="{{ $type }}" class="capitalize">{{ ucfirst($type) }}</option>
                        @endforeach
                    </x-admin::select-option>
                    <x-admin::input-error :errors="$errors" name="type" />
                </div>
                <x-admin::number-input-group name="fee" label="Fee" placeholder="200" />
            </div>
            <div class="flex items-center justify-end mt-4">
                <x-admin::primary-button>
                    {{ __('Save') }}
                </x-admin::primary-button>
            </div>
        </form>
    </x-admin::modal>
    @push('scripts')
        @vite('resources/admin/js/finance/platform-fees.js')
    @endpush
</x-admin-app-layout>
