@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-3">
                    <label>{{ meta('status', $lang) ?? __('coupons.status') }}</label>
                    <select name="status" class="form-control {{ $errors->has('status') ? 'is-invalid' : '' }}">
                        <option {{($coupon->status ?? null) == 1 ? 'selected' : ''}} value="1">{{__('coupons.active') }}</option>
                        <option {{($coupon->status ?? null) == 0 ? 'selected' : ''}} value="0">{{__('coupons.not_active') }}</option>
                    </select>
                </div>
{{--                <div class="form-group col-lg-3">--}}
{{--                    <label>{{ meta('service_type', $lang) ?? __('coupons.service_type') }}</label>--}}
{{--                    <select name="service_type" class="form-control {{ $errors->has('service_type') ? 'is-invalid' : '' }}">--}}
{{--                        <option {{($coupon->service_type ?? null) == 'all' ? 'selected' : ''}} value="all">{{__('coupons.all') }}</option>--}}
{{--                        <option {{($coupon->service_type ?? null) == 'consulting' ? 'selected' : ''}} value="consulting">{{__('coupons.consulting') }}</option>--}}
{{--                        <option {{($coupon->service_type ?? null) == 'documentation' ? 'selected' : ''}} value="documentation">{{__('coupons.documentation') }}</option>--}}
{{--                    </select>--}}
{{--                </div>--}}
                <div class="form-group col-lg-3">
                    <label>{{ meta('discount_type', $lang) ?? __('coupons.discount_type') }}</label>
                    <select name="discount_type" class="form-control {{ $errors->has('discount_type') ? 'is-invalid' : '' }}">
                        <option {{($coupon->discount_type ?? null) == 'value' ? 'selected' : ''}} value="value">{{__('coupons.value') }}</option>
                        <option {{($coupon->discount_type ?? null) == 'percentage' ? 'selected' : ''}} value="percentage">{{__('coupons.percentage') }}</option>
                    </select>
                </div>
            <div class="form-group col-lg-3">
                <label class="discount_amount_label">{{ meta('discount_amount', $lang) ?? __('coupons.discount_amount') }}</label>
                <input type="number" min="1" max="100" class="form-control" name="discount_amount" placeholder="{{ meta('discount_amount', $lang) ?? __('coupons.discount_amount') }}" value='{{ $coupon->discount_amount  ?? ""}}'/>
            </div>
            <div class="form-group col-lg-3">
                <label>{{ meta('start_date', $lang) ?? __('coupons.start_date') }}</label>
                <input type="date" class="form-control" name="start_date" placeholder="{{ meta('start_date', $lang) ?? __('coupons.start_date') }}" value='{{ $coupon->start_date ?? "" }}'/>
            </div>
            <div class="form-group col-lg-3">
                <label>{{ meta('end_date', $lang) ?? __('coupons.end_date') }}</label>
                <input type="date" class="form-control" name="end_date" placeholder="{{ meta('end_date', $lang) ?? __('coupons.end_date') }}" value='{{ $coupon->end_date ?? "" }}'/>
            </div>
            <div class="form-group col-lg-3">
                <label>{{ meta('available_users', $lang) ?? __('coupons.available_users') }}</label>
                <input type="number" min="1" class="form-control" name="available_users" placeholder="{{ meta('available_users', $lang) ?? __('coupons.available_users') }}" value='{{ $coupon->available_users ?? "" }}'/>
            </div>
            <div class="form-group col-lg-3">
                <label>{{ meta('code', $lang) ?? __('coupons.code') }}</label>
                <input type="text" class="form-control" name="code" placeholder="{{ meta('code', $lang) ?? __('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 ?? 0 }}'/>
                </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 discountTypeSelectedOption = $('select[name="discount_type"] option:selected').val(),
            discountAmountPercentage = "{{__('coupons.discount_percentage')}}";

        $('.add_coupon_button').click(async function (e) {
            e.preventDefault();
            $(this).prop('disabled', true);

            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){
                $(this).prop('disabled', false);
                toasterError(response.errors);
            }


        });

        let discountAmountLabel = $('.discount_amount_label'),
            discountAmountLabelHtml = discountAmountLabel.html(),
            discountAmount = $('input[name="discount_amount"]');
        $('select[name="discount_type"]').change(function () {
            let discountType = $(this).val();
            if(discountType === 'value'){
                discountAmountLabel.html(discountAmountLabelHtml);
                discountAmount.attr('placeholder', discountAmountLabelHtml);
            }
            if(discountType === 'percentage'){
                discountAmountLabel.html(discountAmountPercentage);
                discountAmount.attr('placeholder', discountAmountPercentage);
            }
        });

        if(discountTypeSelectedOption === 'value'){
            discountAmountLabel.html(discountAmountLabelHtml);
            discountAmount.attr('placeholder', discountAmountLabelHtml);
        }
        if(discountTypeSelectedOption === 'percentage'){
            discountAmountLabel.html(discountAmountPercentage);
            discountAmount.attr('placeholder', discountAmountPercentage);
        }

    </script>

@endsection