@extends('admin.layouts.main')


@section('title')
@if($id)
Edit Incentive
@else
Add Incentive
@endif

@endsection

@section('content')
<main>
    <div class="two-col">

        @include("admin.common.sidebar")

        <div class="right-sec">


            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Finance</a></li>
                    <li class="breadcrumb-item active" aria-current="page"><a
                            href="{{ route('admin.kua-incentive.index',['panel' => Session::get('panel') ]) }}">Incentives</a>
                    </li>
                    @if($id)
                    <li class="breadcrumb-item active" aria-current="page">Edit Incentive</li>
                    @else
                    <li class="breadcrumb-item active" aria-current="page">Add Incentive</li>
                    @endif
                </ol>
            </nav>

            <div class="form-sec">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1">
                            <div class="step-box">
                                <form id="frmAddEditIncentive" method="post" action="{{ route('admin.kua-incentive.store',['panel' => Session::get('panel')]) }}">
                                    @csrf
                                    <div class="form-body">
                                        @if($id)
                                        <h2 class="form-sec-title">Edit Incentive</h2>
                                        <input type="hidden" name="id" value="{{$id}}">
                                        @else
                                        <h2 class="form-sec-title">Add Incentive</h2>
                                        @endif

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group btm-arrow select">
                                                    <label class="control-label">Client
                                                        <span class="required">*</span>
                                                    </label>
                                                    <select id="client_id" name="client_id" class="form-control">
                                                        <option value="">Select client</option>
                                                        @foreach($clients as $client)
                                                        <option value="{{ $client->id}}" @if(old('clients')==$client->id) selected="selected" @elseif($id && $incentive->client_id == $client->id) selected="selected" @endif>{{ $client->name}}</option>
                                                        @endforeach
                                                    </select>
                                                    @if($errors->has('client_id'))
                                                    <div class="invalid-feedback">{{ $errors->first('client_id')}}
                                                    </div>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group btm-arrow select">
                                                    <label class="control-label">Product
                                                        <span class="required">*</span>
                                                    </label>
                                                    <select id="product_id" name="product_id" class="form-control">
                                                        <option value="">Select Product</option>
                                                        @if($id)
                                                        @foreach($products as $product)
                                                        <option value="{{ $product->id }}" {{ $incentive->product_id == $product->id ? 'selected' : '' }}> {{ $product->product_name }}</option>
                                                        @endforeach
                                                        @endif
                                                    </select>
                                                    @if($errors->has('product_id'))
                                                    <div class="invalid-feedback">{{ $errors->first('product_id')}}
                                                    </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group btm-arrow select">
                                                    <label class="control-label">Agent
                                                        <span class="required">*</span>
                                                    </label>
                                                    <select id="agent_id" name="agent_id" class="form-control">
                                                        <option value="">Select Agent</option>
                                                        @if($id)
                                                        @foreach($agents as $agent)
                                                        <option value="{{ $agent->agentData['id'] }}" {{ $incentive->agent_id == $agent->agentData['id'] ? 'selected' : '' }}> {{ $agent->agentData['full_name'] }}</option>
                                                        @endforeach
                                                        @endif
                                                    </select>
                                                    @if($errors->has('agent_id'))
                                                    <div class="invalid-feedback">{{ $errors->first('agent_id')}}
                                                    </div>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="control-label">Amount
                                                        <span class="required">*</span></label>
                                                    <input type="number" name="amount" class="form-control" value="@if(old('amount')){{old('amount')}}@elseif($id){{$incentive->amount}}@endif" placeholder="Enter Amount" />
                                                    @if($errors->has('amount'))
                                                    <div class="invalid-feedback">{{ $errors->first('amount')}}
                                                    </div>
                                                    @endif

                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group date">
                                                    <label class="control-label">Month <span class="required">*</span></label>
                                                    <div class="input-group">
                                                        <input type="text" class="form-control bg-white" id="cal_start_date" name="cal_start_date"
                                                            placeholder="Select" value="@if($id){{ \Carbon\Carbon::parse($incentive->start_date)->format('m/Y') }}@endif" autocomplete="off" readonly required>
                                                        <div class="input-group-addon">
                                                            <span class="material-icons">date_range</span>
                                                        </div>
                                                        @if($errors->has('amount'))
                                                        <div class="invalid-feedback">{{ $errors->first('cal_start_date')}}
                                                        </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- <div class="col-md-6">
                                                <div class="form-group date">
                                                    <label class="control-label">End Month <span class="required">*</span></label>
                                                    <div class="input-group">
                                                        <input type="text" class="form-control bg-white" id="cal_end_date" name="cal_end_date"
                                                            placeholder="Select"
                                                            value="@if($id){{ \Carbon\Carbon::parse($incentive->end_date)->format('m/Y') }}@endif"
                                                            autocomplete="off" readonly>
                                                        <div class="input-group-addon">
                                                            <span class="material-icons">date_range</span>
                                                        </div>
                                                        @if($errors->has('amount'))
                                                        <div class="invalid-feedback">{{ $errors->first('cal_end_date')}}
                                                        </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div> -->
                                        </div>

                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label class="control-label">Notes
                                                        <span class="required">*</span></label>
                                                    <input type="text" name="reason" class="form-control"
                                                        value="@if(old('reason')){{old('reason')}}@elseif($id){{$incentive->reason}}@endif"
                                                        placeholder="Enter Notes" />
                                                    @if($errors->has('reason'))
                                                    <div class="invalid-feedback">{{ $errors->first('reason')}}
                                                    </div>
                                                    @endif

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-action text-right">
                                        <input type="submit" class="btn step-btn" value="Save" />
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

@endsection

@push('pageJs')

<script>
    $('#client_id').on('change', function() {
        let client_id = $(this).val();
        var getProductUrlJson = "{{route('admin.kua-incentive.getProducts',['panel' => Session::get('panel'), 'client_id' => ':client_id'])}}";
        getProductUrlJson = getProductUrlJson.replace(':client_id', client_id);
        if (client_id) {
            $.ajax({
                url: getProductUrlJson,
                type: 'GET',
                success: function(products) {
                    $('#product_id').empty().append('<option value="">Select Product</option>');
                    $.each(products, function(key, product) {
                        $('#product_id').append('<option value="' + product.id + '">' + product.product_name + '</option>');
                    });
                    $('#agent_id').empty().append('<option value="">Select Agent</option>');
                }
            });
        }
    });

    $('#product_id').on('change', function() {
        let product_id = $(this).val();

        var getAgentUrlJson = "{{route('admin.kua-incentive.getAgents',['panel' => Session::get('panel'), 'product_id' => ':product_id'])}}";
        getAgentUrlJson = getAgentUrlJson.replace(':product_id', product_id);
        if (product_id) {
            $.ajax({
                url: getAgentUrlJson,
                type: 'GET',
                success: function(agents) {
                    $('#agent_id').empty().append('<option value="">Select Agent</option>');
                    $.each(agents, function(key, agent) {
                        $('#agent_id').append('<option value="' + agent.agent_data.id + '">' + agent.agent_data.full_name + '</option>');
                    });
                }
            });
        }
    });

    $(document).ready(function() {

        var today = new Date();
        var $startDate = $('#cal_start_date');
        var $endDate = $('#cal_end_date');

        $startDate.datepicker({
            format: 'mm/yyyy',
            zIndex: 2048,
            autoHide: true,
            date: null,
            endDate: (today.getMonth() + 1) + '/' + today.getFullYear(),
        });
        $endDate.datepicker({
            autoHide: true,
            format: 'mm/yyyy',
            zIndex: 2048,
            date: null,
            startDate: $startDate.datepicker('getDate'),
            endDate: (today.getMonth() + 1) + '/' + today.getFullYear()
        });

        updateEndDatePickerConfigs()

        $startDate.on('change', function() {

            updateEndDatePickerConfigs()

            $endDate.datepicker('setStartDate', $startDate.datepicker('getDate'));

        });

        function updateEndDatePickerConfigs() {

            let diff = moment($('#cal_end_date').datepicker('getDate')).diff($('#cal_start_date').datepicker('getDate'), 'months') + 1;
            let diffFromCurrentMonth = moment().diff($('#cal_start_date').datepicker('getDate'), 'months');

            /* If start date and end date month diff between 0 to 12 and diff from current month is less than 12 then update only end date of "End Date Picker" */
            if (diff < 12 && diff >= 0 && diffFromCurrentMonth < 12) {

                let endDate = moment($startDate.datepicker('getDate')).add(diffFromCurrentMonth, 'months').toDate() /* Adding 11 months to the start date. */
                $endDate.datepicker('setEndDate', endDate); /* Setting the end date of the datepicker. */
            } else if (diff <= 12 && diff >= 0) {
                /* If start date and end date month diff between 0 to 12 then update only end date of "End Date Picker" */

                let endDate = moment($startDate.datepicker('getDate')).add(11, 'months').toDate() /* Adding 11 months to the start date. */
                $endDate.datepicker('setEndDate', endDate); /* Setting the end date of the datepicker. */
            } else if (diffFromCurrentMonth >= 12) {
                /* If diff from current month is greater than or equal to 12 then update only end date and start date of "End Date Picker" */

                let endDate = moment($startDate.datepicker('getDate')).add(11, 'months').toDate() /* Adding 11 months to the start date. */
                $endDate.datepicker('setEndDate', endDate); /* Setting the end date of the datepicker. */
                $endDate.datepicker('setDate', $startDate.datepicker('getDate')); /* Setting the end date to the start date. */
            } else {

                let endDate = moment($startDate.datepicker('getDate')).add(diffFromCurrentMonth, 'months').toDate() /* Adding the difference between the start date and the end date to the start date. */
                $endDate.datepicker('setDate', $startDate.datepicker('getDate')); /* Setting the end date to the start date. */
                $endDate.datepicker('setEndDate', endDate); /* Setting the end date of the datepicker. */
            }
        }
    });

    $("#frmAddEditIncentive").each(function() {
        $(this).validate({
            rules: {
                'client_id': 'required',
                'product_id': 'required',
                'agent_id': 'required',
                'amount': 'required',
                'cal_start_date': 'required',
                // 'cal_end_date': 'required',
                'reason': 'required',
            },
            messages: {
                'client_id': 'Client is required',
                'product_id': 'Product is required',
                'agent_id': 'Agent is required',
                'amount': 'Amount is required',
                'cal_start_date': 'Start Month is required',
                // 'cal_end_date': 'End Month is required',
                'reason': 'Notes is required',
            },
            highlight: function(element) {
                $(element).closest('.form-control').removeClass('is-valid').addClass('is-invalid');
            },
            unhighlight: function(element) {
                $(element).closest('.form-control').removeClass('is-invalid').addClass('is-valid');
            },
            success: function(element) {
                $(element).closest('.form-control').removeClass('is-invalid').addClass('is-valid');
            },
            errorClass: 'invalid-feedback',
        });
    });
</script>
@endpush