@extends('layouts/contentLayoutMaster')

@section('title', 'Create Incentive')

@section('vendor-style')
    <!-- vendor css files -->
    <link rel="stylesheet" href="{{ asset('vendors/css/pickers/pickadate/pickadate.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/pickers/flatpickr/flatpickr.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/forms/select/select2.min.css') }}">
@endsection

@section('page-style')
    <link rel="stylesheet" href="{{ asset('css/base/plugins/forms/pickers/form-flat-pickr.css') }}">
    <link rel="stylesheet" href="{{ asset('css/base/plugins/forms/pickers/form-pickadate.css') }}">

@endsection

@section('content')
    <!-- Basic multiple Column Form section start -->
    <section id="multiple-column-form">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Add New Incentive</h4>
                    </div>
                    <div class="card-body">
                        <!-- Your existing success and error message alerts -->

                        <form id="create_incentive_rates" action="{{ route('incentives.store') }}" method="POST">
                            @csrf
                            <!-- Existing form fields -->

                            <div class="row">

                                <!-- Additional Fields -->
                                <div class="col-md-6 col-12">

                                    <div class="mb-1">
                                        <label class="form-label">Select Region</label>
                                        <select name="region_id" id="region_id" class="form-control">
                                            <option value="" selected disabled>Region</option>
                                            @foreach ($combined_results as $data)
                                                <option {{ old('region_id') == $data['id'] ? 'selected' : '' }}
                                                    value="{{ $data['id'] }}">
                                                    {{ ucfirst($data['name']) }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('region_id')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="incentive_type"> Incentive Type</label>
                                        <select id="incentive_type" class="form-control" name="incentive_type">
                                            <option selected disabled value="">Select Incentive Type</option>
                                            @foreach ($incentiveTypes as $incentiveType)
                                                <option value="{{ $incentiveType->id }}"
                                                    {{ old('incentive_type') == $incentiveType->id ? 'selected' : '' }}>
                                                    {{ $incentiveType->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('incentive_type')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="source_type" required>Source Type</label>
                                        <select id="source_type" class="form-control" name="source_type">
                                            <option selected disabled value="">Select Source Type</option>
                                            @foreach ($sourceTypes as $sourceType)
                                                <option value="{{ $sourceType->id }}"
                                                    {{ old('source_type') == $sourceType->id ? 'selected' : '' }}>
                                                    {{ $sourceType->name }}</option>
                                            @endforeach

                                        </select>
                                        @error('source_type')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror

                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="column-own-6">Effective
                                            From</label>
                                        <input type="text" id="column-ao-7" class="form-control flatpickr-basic"
                                            placeholder="W.E.F: (YYYY-MM-DD)" name="with_effective_date"
                                            value="{{ old('with_effective_date') }}" />
                                        @error('with_effective_date')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row dynamic-entry">
                                <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="from">From</label>
                                        <input type="text" class="form-control fromrange" value="{{ old('from[]') }}"
                                            name="from[]" required placeholder="Enter From" />
                                        @if ($errors->has('from[]'))
                                            <span class="invalid-feedback">
                                                <strong>{{ $errors->first('from[]') }}</strong>
                                            </span>
                                        @endif

                                    </div>
                                </div>
                                <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="to">To</label>
                                        <input type="text" class="form-control torange" name="to[]"
                                            value="{{ old('to[]') }}" required placeholder="Enter To" />
                                        @if ($errors->has('to[]'))
                                            <span class="invalid-feedback">
                                                <strong>{{ $errors->first('to[]') }}</strong>
                                            </span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="incentive_rate">Incentive Rate</label>
                                        <input type="text" class="form-control incentiverange"
                                            value="{{ old('incentive_rate[]') }}" required name="incentive_rate[]"
                                            placeholder="Enter Incentive Rate" />
                                        @if ($errors->has('incentive_rate[]'))
                                            <span class="invalid-feedback">
                                                <strong>{{ $errors->first('incentive_rate[]') }}</strong>
                                            </span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <button type="button" id="addEntry" class="btn btn-success">+</button>
                            </div>
                            <div class="row mt-2">
                                <div class="col-12">
                                    <button type="submit" id="submitform" class="btn btn-primary me-1">Submit</button>
                                    <button type="reset" class="btn btn-outline-secondary me-1">Reset</button>
                                    <a class="btn btn-outline-secondary cancel-btn"
                                        href="{{ route('users.index') }}">Cancel</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Basic Floating Label Form section end -->
@endsection

@section('vendor-script')
    {{-- Vendor js files --}}


    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="{{ asset('vendors/js/pickers/pickadate/picker.js') }}"></script>
    <script src="{{ asset('vendors/js/pickers/pickadate/picker.date.js') }}"></script>
    <script src="{{ asset('vendors/js/pickers/pickadate/picker.time.js') }}"></script>
    <script src="{{ asset('vendors/js/pickers/pickadate/legacy.js') }}"></script>
    <script src="{{ asset('vendors/js/pickers/flatpickr/flatpickr.min.js') }}"></script>
    <script src="{{ asset('vendors/js/forms/select/select2.full.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('vendor/jsvalidation/js/jsvalidation.js') }}"></script>

    {{-- {!! JsValidator::formRequest('App\Http\Requests\CreateIncentiveRequest', '#create_incentive_rates') !!} --}}
@endsection

@section('page-script')
    <script type="text/javascript">
        flatpickr("#column-ao-7", {
            dateFormat: "Y-m-d",
        });
        const removeAdded = (id) => {
            document.getElementById(id).remove();
        };

        $("#submitform").on('click', function(event) {
            event.preventDefault();
            var isValid = true;


            var region = $("#region_id").val();
            if (region == null) {
                isValid = false;
                toastr.error("Please Select Region");

            }
            var incentive_type = $("#incentive_type").val();
            if (incentive_type == null) {
                isValid = false;
                toastr.error("Please Select Incentive Type");

            }
            var source_type = $("#source_type").val();
            if (source_type == null) {
                isValid = false;
                toastr.error("Please Select Source Type");

            }

            var with_effective_date = $("#column-ao-7").val();
            console.log(with_effective_date);
            if (with_effective_date === "") {
                isValid = false;
                toastr.error("Please Select Date");

            }



            $(".fromrange").each(function() {
                var fromrange = $(this).val();
                if (fromrange.trim() === "") {
                    isValid = false;
                    toastr.error("From  Value Cannot Be Empty");

                }
            });
            $(".torange").each(function() {
                var torange = $(this).val();
                if (torange.trim() === "") {
                    isValid = false;
                    toastr.error("To Value Cannot Be Empty");

                }
            });
            $(".incentiverange").each(function() {
                var incentiverange = $(this).val();
                if (incentiverange.trim() === "") {
                    isValid = false;
                    toastr.error("Incentives Value Cannot Be Empty");

                }
            });
            if (isValid) {
                $("#create_incentive_rates")[0].submit();
            }

            // $("#create_incentive_rates")[0].submit();
        })

        // $("form").on('submit', function(event) {
        //     event.preventDefault();
        //     var isValid = true;
        //     alert("sa")

        //     // var areaOffice = $("#area_office option:selected").val();

        //     // if (areaOffice.trim() == " ") {
        //     //     isValid = false;
        //     //     toastr.error("From  Value Cannot Be Empty");
        //     //     return;
        //     // }

        //     $(".fromrange").each(function() {
        //         var fromrange = $(this).val();
        //         console.log(fromrange);

        //         // Check if the field is empty
        //         if (fromrange.trim() === "") {
        //             isValid = false;
        //             // Display error message or take any other action

        //             toastr.error("From  Value Cannot Be Empty");
        //         }
        //     });
        //     $(".torange").each(function() {
        //         var torange = $(this).val();

        //         // Check if the field is empty
        //         if (torange.trim() === "") {
        //             isValid = false;
        //             // Display error message or take any other action

        //             toastr.error("To Value Cannot Be Empty");
        //         }
        //     });
        //     $(".incentiverange").each(function() {
        //         var incentiverange = $(this).val();

        //         // Check if the field is empty
        //         if (incentiverange.trim() === "") {
        //             isValid = false;
        //             // Display error message or take any other action

        //             toastr.error("Incentives  Value Cannot Be Empty");
        //         }
        //     });
        //     if (isValid) {
        //         $("#create_incentive_rates")[0].submit();
        //     }

        // })



        $(document).ready(function() {
            // Add Entry Button
            $('#addEntry').click(function() {
                var entryHtml = `
        <div class="row dynamic-entry">
            <div class="col-md-3 col-12">
                <div class="mb-1">
                    <input type="text" step="0.01" required class="form-control" name="from[]" placeholder="Enter From" />
                </div>
            </div>
            <div class="col-md-3 col-12">
                <div class="mb-1">
                    <input type="text" required class="form-control" name="to[]" placeholder="Enter To" />
                </div>
            </div>
            <div class="col-md-3 col-12">
                <div class="mb-1">
                    <input type="text" required class="form-control" name="incentive_rate[]" placeholder="Enter Incentive Rate" />
                </div>
            </div>
            <div class="col-md-1 col-12">
                <button type="button" class="btn btn-danger removeEntry">-</button>
            </div>
        </div>`;

                $(entryHtml).insertBefore('#addEntry');
            });

            // Remove Entry Button
            $(document).on('click', '.removeEntry', function() {
                $(this).closest('.dynamic-entry').remove();
            });
            $('#area_office').select2();
            $('#incentive_type').select2();
            $('#source_type').select2();
        });
    </script>
    <!-- Page js files -->
@endsection