@extends('layouts.app')

@section('stitle', __('messages.createDiscount'))
@section('title', __('messages.discount'))

@section('content')
<div class="app-content content ">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper container-xxl p-0">

        @if(session()->get('title') == "success")
            <div class="alert alert-success" role="alert">
                <h4 class="alert-heading">Success</h4>
                <div class="alert-body">
                    {{ session()->get('message') }}
                </div>
            </div>
        @elseif (session()->get('title') == "error")
            <div class="alert alert-danger" role="alert">
                <h4 class="alert-heading">Error</h4>
                <div class="alert-body">
                    {{ session()->get('message') }}
                </div>
            </div>
        @elseif($errors->any())
            <div class="alert alert-danger" role="alert">
                <h4 class="alert-heading">Error</h4>
                @foreach ($errors->all() as $error)
                    <div class="alert-danger">{{ $error }}</div>
                @endforeach
            </div>
        @else
        @endif
        <div class="content-header row">
            <div class="content-header-left col-md-6 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <h2 class="content-header-title float-left mb-0">@yield('title')</h2>
                    </div>
                </div>
            </div>
        </div>

        <div class="content-body">
            <!-- Basic Horizontal form layout section start -->
            <section id="basic-horizontal-layouts">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title"> @yield('stitle')</h4>
                            </div>
                            <div class="card-body">
                            <form class="form" action="{{ route('discount.store') }}" method="POST">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label class="asterisk" for="name" data-toggle="tooltip" data-placement="top" data-original-title="The discount name.">{{__('messages.name')}} <span></span><i data-feather='alert-circle' class=""> </i></label>
                                                <input type="text" id="name" class="form-control" placeholder="Enter Name" value="{{ old('name') }}" required name="name" />
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label class="asterisk" for="discount_type" data-toggle="tooltip" data-placement="top" data-original-title="Choose whether the discount can be applied on an order level, a product level or both.">{{__('messages.discountType')}} <span></span><i data-feather='alert-circle' class=""> </i></label>
                                                <select class="select2 form-control form-control-lg" required name="discount_type">
                                                    @foreach ($discountType as $type)
                                                    <option value="{{$type->id}}">{{$type->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label class="asterisk" for="discount_option" data-toggle="tooltip" data-placement="top" data-original-title="Whether it’s a fixed amount discount or percentage discount.">{{__('messages.discountOption')}} <span></span><i data-feather='alert-circle' class=""> </i></label>
                                                <select class="select2 form-control form-control-lg" name="discount_option" id="discount_option_id" class="" required onclick="discount_option_id">
                                                    @foreach ($discountOption as $option)
                                                    <option value="{{$option->id}}">{{$option->name}}</option>
                                                    @endforeach

                                                </select>
                                            </div>
                                        </div>
                                        <div id="fixed" class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label class="asterisk" for="discount_amount" data-toggle="tooltip" data-placement="top" data-original-title="Amount of the discount that will be applied on orders or products.">{{__('messages.discountAmount')}} <span></span><i data-feather='alert-circle' class=""> </i></label>
                                                <input type="number" id="discount_amount" class="form-control" value="{{ old('discount_amount') }}" required name="discount_amount" />
                                            </div>
                                        </div>
                                        <div id="percentage" class="col-md-4 col-12" >
                                            <div class="form-group">
                                                <label class="asterisk" for="maximum_discount_amount" data-toggle="tooltip" data-placement="top" data-original-title="The Maximum value of the discount can be applied on.">{{__('messages.maximumDiscount')}} <span></span><i data-feather='alert-circle' class=""> </i></label>
                                                <input type="number" id="maximum_discount_amount" class="form-control"  value="{{ old('maximum_discount_amount') }}" required  name="maximum_discount_amount" />
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label class="asterisk" for="minimum_order_price" data-toggle="tooltip" data-placement="top" data-original-title="The minimum price of the order this discount can be applied on.">{{__('messages.minimum_order_price')}} <span></span><i data-feather='alert-circle' class=""> </i></label>
                                                <input type="number" id="minimum_order_price" class="form-control" value="{{ old('minimum_order_price') }}" required name="minimum_order_price" />
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label class="asterisk" for="order_type_id" data-toggle="tooltip" data-placement="top" data-original-title="Choose the types of orders this discount can be applied on.">{{__('messages.appliesOnOrderTypes')}} <span></span><i data-feather='alert-circle' class=""> </i></label>
                                                <select class="select2 form-control form-control-lg" required  multiple name="order_type_id[]" >
{{--                                                    <option value="" disabled>Order Types</option>--}}
                                                    @foreach ($orderType as $order_type)
                                                        <option value="{{$order_type->id}}" selected>{{$order_type->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="demo-inline-spacing col-md-4 col-12 ">
                                            <div class="custom-control custom-checkbox">
                                                <input type="hidden" value="0" name="taxable" />
                                                <input type="checkbox" class="custom-control-input" value="1"  name="taxable" id="inlineCheckbox2"  />
                                                <label class="custom-control-label asterisk" for="inlineCheckbox2"  data-toggle="tooltip" data-placement="top" data-original-title="Check this if you want the customer to pay the full amount of taxes of the order before applying the discount. If you leave it unchecked, the customer will not pay the full amount of taxes of the order. For example, if the full amount of the order including tax is 105 and 100% discount applied on the order, there are two scenarios: Checked: the client should pay tax amount 5 SAR only. Unchecked: no need to pay any amount.">{{__('messages.taxAble')}} <i data-feather='alert-circle' class=""> </i></label>
                                            </div>
                                        </div>

                                        <div class="col-12 text-right">
                                            <button class="btn btn-secondary waves-effect waves-float waves-light" type="button" onclick="location.href='{{ route('discount.list') }}'"><i data-feather='chevron-left' class="mr-1"></i>{{__('messages.Back')}}</button>
                                            <button type="submit" class="btn btn-primary">{{__('messages.Submit')}}</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Basic Horizontal form layout section end -->
        </div>

    </div>
</div>

@endsection
@push('my_scripts')
<script>
 if($("#discount_option_id").val() =='1') {
                $('#fixed').show();
                document.getElementById("maximum_discount_amount").disabled = true;
                // $('.cost').show();
                // alert('2');
            } else {
                document.getElementById("maximum_discount_amount").disabled = false;
                $('#fixed').show();
                // alert('1');
            }
    $('#discount_option_id').on('change', function() {
        // alert('dfskj');
            if(this.value =='1') {
                $('#fixed').show();
                $('#maximum_discount_amount').val('');
                document.getElementById("maximum_discount_amount").disabled = true;
                // $('.cost').show();
                // alert('2');
            } else {
                document.getElementById("maximum_discount_amount").disabled = false;
                $('#fixed').show();
                // alert('1');
            }

     });


</script>



@endpush