@extends('admin.layouts.container')
@section('css')
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/toastr.css') }}" />
@endsection
@section('content')
    <div class="side-title">
        <h3>{{$head ?? '' }}</h3>
    </div>

    <div class="border-item">
        <form class="form-row add_coupon_form" method="post" action="{{ $action }}" enctype="multipart/form-data">
            @if($coupon ?? ''  && $coupon->id)
                @method('PUT')
            @endif
            @csrf

            <div class="form-group col-lg-6">
                <label>{{ meta('coupon_type', getCurrentLocale()) ?? __('coupons.coupon_type') }}</label>
                <select name="type" class="form-control {{ $errors->has('coupon_type') ? 'is-invalid' : '' }}">
                    {{--                <option value="">{{ meta('coupon_type', getCurrentLocale()) ?? __('coupons.coupon_type') }}</option>--}}
                    <option {{($coupon->type ?? null) == 'admin' ? 'selected' : ''}} value="admin">{{__('coupons.coupon_course') }}</option>
                    <option {{($coupon->type ?? null) == 'products' ? 'selected' : ''}} value="products">{{__('coupons.coupon_product') }}</option>
                </select>
            </div>
            <div class="form-group col-lg-6 hide_in_product_coupon">
                <label>{{ meta('course_id', getCurrentLocale()) ?? __('coupons.course_id') }}</label>
                <select name="course_id" class="form-control {{ $errors->has('course_id') ? 'is-invalid' : '' }}">
                    <option value="">{{ meta('course_id', getCurrentLocale()) ?? __('coupons.course_id') }}</option>
                    @if(count($courses))
                        @foreach($courses as $course)
                            <option {{old('course_id', $coupon->course_id ?? null) == $course->id ? 'selected' : ''}} value="{{$course->id}}">{{$course->name}}</option>
                        @endforeach
                    @endif
                </select>
            </div>
            {{--            <div class="form-group col-lg-6 show_in_product_coupon d-none">--}}
            {{--                <label>{{ meta('category_id', getCurrentLocale()) ?? __('coupons.category_id') }}</label>--}}
            {{--                <select name="category_id" class="form-control {{ $errors->has('category_id') ? 'is-invalid' : '' }}">--}}
            {{--                    <option value="">{{ meta('category_id', getCurrentLocale()) ?? __('coupons.category_id') }}</option>--}}
            {{--                    @if(count($categories))--}}
            {{--                        @foreach($categories as $category)--}}
            {{--                            <option {{old('category_id', $coupon->category_id ?? null) == $category->id ? 'selected' : ''}} value="{{$category->id}}">{{$category->name}}</option>--}}
            {{--                        @endforeach--}}
            {{--                    @endif--}}
            {{--                </select>--}}
            {{--            </div>--}}
            <div class="form-group col-lg-6 product_container">
                <label>{{ __('coupons.select_products') }}</label>
                <select name="product_id" class="form-control {{ $errors->has('product_id') ? 'is-invalid' : '' }}">
                    {{--                    <option value="">{{ __('coupons.select_products') }}</option>--}}
                    {{--                    @if(count($products))--}}
                    {{--                        @if(count($products))--}}
                    @foreach($products as $product)
                        <option {{old('product_id', $coupon->product_id ?? null) == $product->id ? 'selected' : ''}} value="{{$product->id}}">{{$product->name}}</option>
                    @endforeach
                    {{--                        @endif--}}
                    {{--                    @endif--}}
                </select>
                {{--                <div class="row">--}}
                {{--                    @if(count($products))--}}
                {{--                        @foreach($products as $product)--}}
                {{--                            <div class="col-sm-3">--}}
                {{--                                <div class="custom-control custom-checkbox">--}}
                {{--                                    <input {{in_array($product->id, $couponProducts) ? 'checked' : ''}} type="checkbox"  value="{{$product->id}}" class="custom-control-input" id="product_{{$product->id}}" name="product_id[]">--}}
                {{--                                    <label class="custom-control-label" for="product_{{$product->id}}">{{$product->name}}</label>--}}
                {{--                                </div>--}}
                {{--                            </div>--}}
                {{--                        @endforeach--}}
                {{--                    @endif--}}
                {{--                </div>--}}
            </div>
            <div class="form-group col-lg-6">
                <label>{{ meta('name', getCurrentLocale()) ?? __('coupons.name') }}</label>
                <input type="text" class="form-control" name="name" placeholder="{{ meta('name', getCurrentLocale()) ?? __('coupons.name') }}" value="{{ $coupon->name ?? "" }}" >
            </div>
            <div class="form-group col-lg-6">
                <label>{{ meta('discount', getCurrentLocale()) ?? __('coupons.discount') }}</label>
                <input type="number" min="1" max="100" class="form-control" name="discount" placeholder="{{ meta('discount', getCurrentLocale()) ?? __('coupons.discount') }}" value='{{ $coupon->discount  ?? ""}}'/>
            </div>
            <div class="form-group col-lg-6">
                <label>{{ meta('start_date', getCurrentLocale()) ?? __('coupons.start_date') }}</label>
                <input type="date" class="form-control" name="start_date" placeholder="{{ meta('start_date', getCurrentLocale()) ?? __('coupons.start_date') }}" value='{{ $coupon->start_date ?? "" }}'/>
            </div>
            <div class="form-group col-lg-6">
                <label>{{ meta('end_date', getCurrentLocale()) ?? __('coupons.end_date') }}</label>
                <input type="date" class="form-control" name="end_date" placeholder="{{ meta('end_date', getCurrentLocale()) ?? __('coupons.end_date') }}" value='{{ $coupon->end_date ?? "" }}'/>
            </div>
            <div class="form-group col-lg-6">
                <label>{{ meta('available_users', getCurrentLocale()) ?? __('coupons.available_users') }}</label>
                <input type="number" class="form-control" name="available_users" placeholder="{{ meta('available_users', getCurrentLocale()) ?? __('coupons.available_users') }}" value='{{ $coupon->available_users ?? "" }}'/>
            </div>
            <div class="form-group col-lg-6">
                <label>{{ meta('code', getCurrentLocale()) ?? __('coupons.code') }}</label>
                <input type="text" class="form-control" name="code" placeholder="{{ meta('code', getCurrentLocale()) ?? __('coupons.code') }}" value='{{ $coupon->code ?? "" }}'/>
            </div>

            @if($coupon ?? ''  && $coupon->id)
                <div class="form-group col-lg-6">
                    <label>{{ __('coupons.used_count') }}</label>
                    <input readonly class="form-control bg-white" value='{{ $coupon->used_count ?? "" }}'/>
                </div>
                <div class="form-group col-lg-6">
                    <label>{{ __('coupons.remaining_coupon_used') }}</label>
                    <input readonly class="form-control bg-white" value='{{ $coupon->available_users - $coupon->used_count }}'/>
                </div>
            @endif


            <div class="text-center mt-5 col-12">
                <button class="butn add_coupon_button"><span>{{ __('dashboard.save') }}</span></button>
            </div>
        </form>
    </div>

@endsection

@section('inner_js')

    <script src="{{ asset('assets/web/js/lib/toastr.min.js') }}"></script>


    <script>
        let selectedOption = $('select[name="type"] option:selected').val(),
            getProductsRoute = "{{route('coupons.getProducts')}}";

        if (selectedOption === 'products') {
            $('.product_container').removeClass('d-none');
            $('.hide_in_product_coupon').addClass('d-none');
            $('.show_in_product_coupon').removeClass('d-none');
        } else {
            $('.product_container').addClass('d-none');
            // $('.product_container').html('');
            $('.hide_in_product_coupon').removeClass('d-none');
            $('.show_in_product_coupon').addClass('d-none');
        }

        $('select[name="type"]').change(function () {
            if ($(this).val() === 'products'){
                $('.hide_in_product_coupon').addClass('d-none');
                $('.product_container').removeClass('d-none');
                $('.show_in_product_coupon').removeClass('d-none');
                $('.hide_in_product_coupon select, .hide_in_product_coupon input').val('');
            } else {
                $('.product_container').addClass('d-none');
                $('.hide_in_product_coupon').removeClass('d-none');
                $('.show_in_product_coupon').addClass('d-none');
                $('.show_in_product_coupon select, .show_in_product_coupon input').val('')
            }
        });

        $('.add_coupon_button').click(async function (e) {
            e.preventDefault();

            let form = $('.add_coupon_form'),
                data = new FormData(form[0]),
                url = form.attr('action'),
                method = form.attr('method');

            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method
            });

            if (response.url){
                window.location.href = response.url;
            }

            if (response.errors){
                toasterError(response.errors);
            }


        });

        $('select[name="category_id"]').change(async function () {

            let url = getProductsRoute,
                data = {category_id: $(this).val()},
                method = 'get';
            const response=await ajax({
                url,
                data,
                dataType: 'html',
                method
            });

            if (response){
                let productContainer = $('.product_container');
                productContainer.removeClass('d-none');
                productContainer.html(response);
            }
        });

    </script>

@endsection