@extends('../backend/layout/' . $layout)

@section('subhead')
    <title>Coupon</title>
@endsection

@section('subcontent')
    <div class="grid grid-cols-12 gap-6 mt-5">
        <div class="intro-y col-span-12">
            <div class="intro-y box">
                <div
                    class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                    <h2 class="font-medium text-base mr-auto">Add New Coupon</h2>
                </div>
                <div id="form-validation" class="p-5">
                    <div class="preview">
                        <form class="validate-form" id="myForm" enctype="multipart/form-data">
                            <div class="input-form mb-4">
                                <label for="crud-form-2" class="form-label">Coupon Code <span
                                        class="text-danger">*</span></label>
                                <div class="flex">
                                    <input id="coupon_code" class="form-control" type="text" name="coupon_code"
                                      required data-pristine-required-message="Please enter coupon code">
                                    <button type="button"
                                        class="font-semibold text-sm text-white rounded-none shadow-sm btn btn-primary text-white text-wrap shrink-0"
                                        id="generate">Generate Code</button>
                                </div>
                                <div id="error-coupon_code" class="form__input-error text-danger mt-1"></div>
                            </div>
                            <div class="input-form mb-4">
                                <label>Applies to:</label>
                                <div class="form-check mt-2">
                                    <input id="categories" class="form-check-input" type="radio" name="applies_to" value="categories" checked>
                                    <label class="form-check-label" for="categories">Specific categories</label>
                                </div>
                                <div class="form-check mt-2">
                                    <input id="products" class="form-check-input" type="radio" name="applies_to" value="products">
                                    <label class="form-check-label" for="products">Specific products</label>
                                </div>
                                <div class="form-check mt-2">
                                    <input id="customers" class="form-check-input" type="radio" name="applies_to" value="customers">
                                    <label class="form-check-label" for="products">Specific customers</label>
                                </div>
                            </div>
                            <div class="input-form mb-4" id="categories_section">
                                <select data-placeholder="Select categories" placeholder="Best movies and TV shows" name="eligible_categories[]"
                                    class="tom-select w-full" id="category_id" multiple>
                                    @foreach ($categories as $mainCategory)
                                    <option value="{{ $mainCategory->id }}">{{ $mainCategory->name }}</option>
                                    @if ($mainCategory->children)
                                        @foreach ($mainCategory->children as $subCategory)
                                            <option value="{{ $subCategory->id }}">{{ $mainCategory->name }}->{{ $subCategory->name }}</option>
                                            @if ($subCategory->children)
                                                @foreach ($subCategory->children as $childCategory)
                                                    <option value="{{ $childCategory->id }}">{{ $mainCategory->name }}->{{ $subCategory->name }}->{{ $childCategory->name }}</option>
                                                @endforeach
                                            @endif
                                        @endforeach
                                    @endif
                                    @endforeach
                                </select>
                                <span><strong>Note:</strong> If you do not select any category then the coupon will be applicable on all categories.</span>
                                <div id="error-category_id" class="form__input-error text-danger mt-1"></div>
                            </div>
                            <div class="input-form mb-4" id="products_section" style="display: none">
                                <select data-placeholder="Select products" class="tom-select w-full" id="product_id"
                                     name="eligible_products[]" multiple>
                                    @foreach ($products as $product)
                                        <option value="{{ $product->id }}">{{ $product->name }}</option>
                                    @endforeach
                                </select>
                                <span><strong>Note:</strong> If you do not select any product then the coupon will be applicable on all products.</span>
                                <div id="error-email" class="form__input-error text-danger mt-1"></div>
                            </div>
                            <div class="input-form mb-4" id="customers_section" style="display: none">
                                <select data-placeholder="Select customers" name="eligible_customers[]"
                                    class="tom-select w-full" id="user_id" multiple>
                                    @foreach ($customers as $customer)
                                        <option value="{{ $customer->id }}">{{ $customer->first_name }}
                                            {{ $customer->last_name }}</option>
                                    @endforeach
                                </select>
                                <span><strong>Note:</strong> If you do not select any customer then the coupon will be applicable on all customers.</span>
                                <div id="error-email" class="form__input-error text-danger mt-1"></div>
                            </div>
                            <div class="grid grid-cols-12 gap-4">
                                <div class="input-form mb-4 col-span-4">
                                    <label for="crud-form-3" class="form-label">Usage Limit</label>
                                    <div class="input-group">
                                        <input id="usage_limits" type="number" class="form-control" name="usage_limits" min="1"
                                        value="1" required>
                                        <div class="input-group-text">Times</div>
                                    </div>
                                    <div id="error-email" class="form__input-error text-danger mt-1"></div>
                                </div>
                                <div class="input-form mb-4 col-span-4">
                                    <label for="crud-form-4" class="form-label">Discount <span
                                            class="text-danger">*</span></label>
                                        <input id="discount" type="number" class="form-control" placeholder="100"
                                            name="discount" min="0" aria-describedby="input-form-2"
                                            required data-pristine-required-message="Please enter discount">
                                    <div id="error-discount" class="form__input-error text-danger mt-1"></div>
                                </div>
                                <div class="input-form mb-4 col-span-4">
                                    <label for="crud-form-4" class="form-label">Discount Type</label>
                                    <select name="discount_type" class="form-control">
                                        <option value="percentage">Percentage</option>
                                        <option value="amount">Amount</option>
                                    </select>
                                </div>
                            </div>
                            <div class="input-form mb-4">
                                <label for="crud-form-3" class="form-label">Status</label>
                                <select id="status" name="status" class="form-control form-select sm:mr-2"
                                    aria-label="Default select example" required>
                                    <option value="1" selected>Enable</option>
                                    <option value="0">Disable</option>
                                </select>
                                <div id="error-email" class="form__input-error text-danger mt-1"></div>
                            </div>
                            <div class="text-left mt-5">
                                <button type="submit" id="btn-submit" class="btn btn-primary w-24 clear-button">Submit</button>
                                <button type="reset" id="btn-clear" class="btn btn-outline-secondary w-24 mr-1">Reset</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset(mix('js/backend/pages/coupon/create.js')) }}"></script>
    <script src="{{ asset(mix('js/backend/pages/coupon/generate_coupon_code.js')) }}"></script>
    <script>
        const get_coupon_code = '{{ route('generate.code') }}';
        const store_coupon_route = '{{ route('coupon.store') }}';
        const couponIndexRoute = '{{ route('coupon.index') }}'
    </script>
@endsection