@extends('backend.layouts.app')
@section('title', $title)
@section('content')

<x-back-button :route="route('admin.countries.index')">Back to gifts</x-back-button>

<div class="row">
    <div class="col">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    {{ $title }}
                </h5>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.gifts.store') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label class="form-label" for="product_id">Product <span class="text-danger">*</span></label>
                            <select class="form-control form-select select2 @error("product_id") is-invalid @enderror" id="product_id" name="product_id" data-toggle="select2" required>
                            </select>
                            @error("product_id")
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label class="form-label" for="eligibility_amount">Eligibility Amount <span class="text-danger">*</span></label>
                            <input type="number" class="form-control @error('eligibility_amount') is-invalid @enderror" id="eligibility_amount" min="0" name="eligibility_amount" required>
                            <small class="text-info">add value in <span class="fw-bold">AED</span> currency</small>
                            @error('eligibility_amount')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <button type="submit" class="btn btn-primary" onclick="loadingBtn(this)">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    function previewImage(event) {
        const output = document.getElementById('category-img');
        output.src = URL.createObjectURL(event.target.files[0]);
    }

</script>

<script>
    $(document).ready(function() {
        $('#product_id').select2({
            ajax: {
                url: "{{ route('admin.products.search') }}",
                dataType: 'json',
                delay: 100,
                data: function(params) {
                    return {
                        q: params.term // search term
                    };
                },
                processResults: function(data) {
                    return {
                        results: $.map(data, function(item) {
                            return {
                                id: item.id,
                                text: item.name.en
                            };
                        })
                    };
                },
                cache: true
            },
            minimumInputLength: 3,
            placeholder: 'Search for a product',
            allowClear: true
        });
    });
</script>
@endsection