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

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


<div class="alert alert-info">
    <p class="text-info">Put all value of prices in <span class="fw-bold">AED</span> currency</p>
</div>
<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.packages.store') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group row mb-3">
                        <div class="col-6">
                            <label for="picture" class="form-label">Package Main Picture <span class="text-danger">*</span></label>
                            <input type="file" name="image" id="image" class="form-control @error('image') is-invalid @enderror" onchange="previewImage(event)">
                            @error('image')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-1">
                            <img src="{{ asset('default-images/package.webp') }}" id="package-img" width="100%" alt="">
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label class="form-label" for="product_id">Related 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">
                        @foreach(LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
                        <div class="col">
                            <label class="form-label" for="name_{{ $localeCode }}">Name <span class="text-capitalize">{{ $properties['native'] }}</span> <span class="text-danger">*</span></label>
                            <input dir="{{ $localeCode == "ar" ? 'rtl' : 'ltr' }}" class="form-control @error("name_$localeCode") is-invalid @enderror" type="text" id="name_{{ $localeCode }}" name="name_{{ $localeCode }}" value="{{ old('name_' . $localeCode) }}" required />
                            @error("name_$localeCode")
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        @endforeach
                    </div>
                    <div class="form-group row mb-3">
                        @foreach(LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
                        <div class="col">
                            <label class="form-label" for="description_{{ $localeCode }}">Description <span class="text-capitalize">{{ $properties['native'] }}</span> <span class="text-danger">*</span></label>
                            <input dir="{{ $localeCode == "ar" ? 'rtl' : 'ltr' }}" class="form-control @error("description_$localeCode") is-invalid @enderror" type="text" id="description_{{ $localeCode }}" name="description_{{ $localeCode }}" value="{{ old('description_' . $localeCode) }}" required />
                            @error("description_$localeCode")
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        @endforeach
                    </div>
                    <div class="form-group row mb-3">
                        @foreach(LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
                            <div class="col">
                                <label class="form-label" for="package_details_{{ $localeCode }}">
                                    Package details <span class="text-capitalize">{{ $properties['native'] }}</span>
                                    <span class="text-danger">*</span>
                                </label>
                                <textarea dir="{{ $localeCode == 'ar' ? 'rtl' : 'ltr' }}"
                                          class="form-control @error('package_details_{{ $localeCode }}') is-invalid @enderror"
                                          id="package_details_{{ $localeCode }}"
                                          name="package_details_{{ $localeCode }}"
                                          required>{{ old('package_details_' . $localeCode) }}</textarea>
                                @error("package_details_{{ $localeCode }}")
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        @endforeach
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label class="form-label" for="quantity">Quantity <span class="text-danger">*</span></label>
                            <input class="form-control @error("quantity") is-invalid @enderror" type="number" min="0" id="quantity" name="quantity" value="{{ old('quantity', 0) }}" required />
                            @error("quantity")
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col">
                            <label class="form-label" for="purchase_price">Purchase price <span class="text-danger">*</span></label>
                            <input class="form-control @error("purchase_price") is-invalid @enderror" type="number" min="0" id="purchase_price" name="purchase_price" value="{{ old('purchase_price') }}" required />
                            @error("purchase_price")
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label class="form-label" for="sale_price">Sale price <span class="text-danger">*</span></label>
                            <input class="form-control @error("sale_price") is-invalid @enderror" type="number" min="0" id="sale_price" name="sale_price" value="{{ old('sale_price') }}" required />
                            @error("sale_price")
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col">
                            <label class="form-label" for="tax">Tax <span class="text-danger">*</span></label>
                            <input class="form-control @error("tax") is-invalid @enderror" type="number" min="0" id="tax" name="tax" value="{{ old('tax') }}" required />
                            @error("tax")
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col">
                            <label class="form-label" for="points_awarded">Points awarded <span class="text-danger">*</span></label>
                            <input class="form-control @error("points_awarded") is-invalid @enderror" type="number" min="0" id="points_awarded" name="points_awarded" value="{{ old('points_awarded') }}" required />
                            @error("points_awarded")
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label class="form-label" for="published">Published</label>
                            <div class='form-check form-switch'>
                                <input class='form-check-input @error('published') is-invalid @enderror' type='checkbox' id='published' name="published" style="width: 50px; height: 30px;" @checked((bool)old('published')===true) />
                            </div>
                            @error("published")
                            <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('package-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