@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($marketerCoupon ?? ''  && $marketerCoupon->id)
                @method('PUT')
            @endif
            @csrf

                <div class="form-group col-lg-3">
                    <label>{{ meta('user_id', $lang) ?? __('marketerCoupons.user_id') }}</label>
                    <select name="user_id" class="form-control">
                        <option value="">{{__('marketerCoupons.user_id')}}</option>
                        @if(count($users))
                            @foreach($users as $user)
                                <option {{($marketerCoupon->user_id ?? null) == $user->id ? 'selected' : ''}} value="{{$user->id}}">{{$user->name}}</option>
                            @endforeach
                        @endif
                    </select>
                </div>
                <div class="form-group col-lg-3">
                    <label>{{ meta('status', $lang) ?? __('marketerCoupons.status') }}</label>
                    <select name="status" class="form-control {{ $errors->has('status') ? 'is-invalid' : '' }}">
                        <option {{($marketerCoupon->status ?? null) == 1 ? 'selected' : ''}} value="1">{{__('marketerCoupons.active') }}</option>
                        <option {{($marketerCoupon->status ?? null) == 0 ? 'selected' : ''}} value="0">{{__('marketerCoupons.not_active') }}</option>
                    </select>
                </div>
{{--                <div class="form-group col-lg-3">--}}
{{--                    <label>{{ meta('service_type', $lang) ?? __('marketerCoupons.service_type') }}</label>--}}
{{--                    <select name="service_type" class="form-control {{ $errors->has('service_type') ? 'is-invalid' : '' }}">--}}
{{--                        <option {{($marketerCoupon->service_type ?? null) == 'all' ? 'selected' : ''}} value="all">{{__('marketerCoupons.all') }}</option>--}}
{{--                        <option {{($marketerCoupon->service_type ?? null) == 'consulting' ? 'selected' : ''}} value="consulting">{{__('marketerCoupons.consulting') }}</option>--}}
{{--                        <option {{($marketerCoupon->service_type ?? null) == 'documentation' ? 'selected' : ''}} value="documentation">{{__('marketerCoupons.documentation') }}</option>--}}
{{--                    </select>--}}
{{--                </div>--}}
                <div class="form-group col-lg-3">
                    <label>{{ meta('discount_type', $lang) ?? __('marketerCoupons.discount_type') }}</label>
                    <select name="discount_type" class="form-control {{ $errors->has('discount_type') ? 'is-invalid' : '' }}">
                        <option {{($marketerCoupon->discount_type ?? null) == 'value' ? 'selected' : ''}} value="value">{{__('marketerCoupons.value') }}</option>
                        <option {{($marketerCoupon->discount_type ?? null) == 'percentage' ? 'selected' : ''}} value="percentage">{{__('marketerCoupons.percentage') }}</option>
                    </select>
                </div>
            <div class="form-group col-lg-3">
                <label class="discount_amount_label">{{ meta('discount_amount', $lang) ?? __('marketerCoupons.discount_amount') }}</label>
                <input type="number" min="1" max="100" class="form-control" name="discount_amount" placeholder="{{ meta('discount_amount', $lang) ?? __('marketerCoupons.discount_amount') }}" value='{{ $marketerCoupon->discount_amount  ?? ""}}'/>
            </div>
            <div class="form-group col-lg-3">
                <label>{{ meta('start_date', $lang) ?? __('marketerCoupons.start_date') }}</label>
                <input type="date" class="form-control" name="start_date" placeholder="{{ meta('start_date', $lang) ?? __('marketerCoupons.start_date') }}" value='{{ $marketerCoupon->start_date ?? "" }}'/>
            </div>
            <div class="form-group col-lg-3">
                <label>{{ meta('end_date', $lang) ?? __('marketerCoupons.end_date') }}</label>
                <input type="date" class="form-control" name="end_date" placeholder="{{ meta('end_date', $lang) ?? __('marketerCoupons.end_date') }}" value='{{ $marketerCoupon->end_date ?? "" }}'/>
            </div>
            <div class="form-group col-lg-3">
                <label>{{ meta('available_users', $lang) ?? __('marketerCoupons.available_users') }}</label>
                <input type="number" min="1" class="form-control" name="available_users" placeholder="{{ meta('available_users', $lang) ?? __('marketerCoupons.available_users') }}" value='{{ $marketerCoupon->available_users ?? "" }}'/>
            </div>
                <div class="form-group col-lg-3">
                    <label>{{ meta('code', $lang) ?? __('marketerCoupons.code') }}</label>
                    <input type="text" class="form-control" name="code" placeholder="{{ meta('code', $lang) ?? __('marketerCoupons.code') }}" value='{{ $marketerCoupon->code ?? "" }}'/>
                </div>
                <div class="form-group col-lg-4">
                    <label>{{ meta('marketer_percentage', $lang) ?? __('marketerCoupons.marketer_percentage') }}</label>
                    <input type="number" min="1" class="form-control" name="marketer_percentage" placeholder="{{ meta('marketer_percentage', $lang) ?? __('marketerCoupons.marketer_percentage') }}" value='{{ $marketerCoupon->marketer_percentage ?? "" }}'/>
                </div>

            @if($marketerCoupon ?? ''  && $marketerCoupon->id)
                <div class="form-group col-lg-4">
                    <label>{{ __('marketerCoupons.used_count') }}</label>
                    <input readonly class="form-control bg-white" value='{{ $marketerCoupon->used_count ?? 0 }}'/>
                </div>
                <div class="form-group col-lg-4">
                    <label>{{ __('marketerCoupons.remaining_coupon_used') }}</label>
                    <input readonly class="form-control bg-white" value='{{ $marketerCoupon->available_users - $marketerCoupon->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 = "{{__('marketerCoupons.discount_percentage')}}";

        $('.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');

            data.append('marketer_coupons', true);

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

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

            if (response.errors){
                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