@extends('dashboard.layout.content')

@section('customTitle')
{{__('dashboard.Add Offer')}}
@endsection

@section('customStyle')
<link href='{{ asset("dashboard/$locale/assets/css/elements/alert.css") }}' rel="stylesheet" type="text/css" />
<link href='{{ asset("dashboard/$locale/plugins/flatpickr/flatpickr.css") }}' rel="stylesheet" type="text/css" />
<link href='{{ asset("dashboard/$locale/plugins/flatpickr/custom-flatpickr.css") }}' rel="stylesheet" type="text/css" />
@endsection

@section('customBody')
<div id="content" class="main-content">
    <div class="container">
        <div class="container">
            <div class="row">
                <div id="flStackForm" class="col-12 layout-spacing layout-top-spacing">
                    <div class="statbox widget box box-shadow">
                        <div class="widget-header">
                            <div class="row">
                                <div class="col-12">
                                    <h4>{{__('dashboard.Add Offer')}}</h4>
                                </div>
                            </div>
                        </div>
                        <div class="widget-content widget-content-area">
                            <form class="uroad-form" action="{{ route('dashboard.offer.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="form-row mb-4">
                                    <div class="form-group col-md-3">
                                        <label for="company-id">{{__('dashboard.Company')}}</label>
                                        <select required id="company-id" class="form-control " name="company_id">
                                            <option value="" selected>{{__('dashboard.Company')}}</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-md-3">
                                        <label for="branch_id">{{__('dashboard.Branch')}}</label>
                                        <select required id="branch_id" class="form-control " name="branch_id">
                                            <option value="" selected>{{__('dashboard.Branch')}}</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-md-3">
                                        <label for="car-id">{{__('validation.attributes.car')}}</label>
                                        <select required id="car-id" class="form-control " name="car_id">
                                            <option value="" selected>{{__('validation.attributes.car')}}</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-md-3">
                                        <label for="start-date">{{__('dashboard.Offer Start Date')}}</label>
                                        <input required class="form-control basicFlatpickr" id="start-date" placeholder="{{__('dashboard.Offer Start Date')}}" name="start_date">
                                    </div>

                                    <div class="form-group col-md-3">
                                        <label for="end-date">{{__('dashboard.Offer End Date')}}</label>
                                        <input required class="form-control basicFlatpickr" id="end-date" placeholder="{{__('dashboard.Offer End Date')}}" name="end_date">
                                    </div>

                                    <div class="form-group col-md-3">
                                        <label for="percentage">{{__('dashboard.Discount Percentage')}}</label>
                                        <input required type="number" class="form-control" id="percentage" placeholder="{{__('dashboard.Discount Percentage')}}" name="percentage">
                                    </div>
                                </div>

                                <input type="submit" class="btn btn-primary mt-3" value="{{__('general.submit')}}">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('customScript')
<script src='{{ asset("dashboard/$locale/plugins/flatpickr/flatpickr.js") }}'></script>
<script src='{{ asset("dashboard/$locale/plugins/flatpickr/custom-flatpickr.js") }}'></script>
<script>
    $("#offers-menu-box").attr("data-active", "true")

    ajaxSelect2('#company-id','/dashboard/select2/companies')
    
    $("#company-id").on("change input", function(){
        ajaxSelect2('#branch_id','/dashboard/select2/branchesInCompany', {"company_id" : $(this).val()})
    });
    
    $("#branch_id").on("change input", function(){
        ajaxSelect2('#car-id','/dashboard/select2/carsInBranch', {"branch_id" : $(this).val()})
    });
</script>
@endsection