@extends('layouts/contentLayoutMaster')

@section('title', 'Edit 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') }}">
    <link rel="stylesheet" href="{{ asset('css/base/style.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">Edit Incentive</h4>
                    </div>
                    <div class="card-body">
                        <!-- Your existing success and error message alerts -->

                        <form class="form" action="{{ route('incentives.update', $incentive->id) }}"
                            id="create_incentive_rates" method="POST">
                            @csrf
                            @method('PUT')
                            <!-- Existing form fields -->

                            <div class="row">
                                <!-- Additional Fields -->
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="area_office">Select Area Office</label>
                                        <select id="area_office" class="form-control" name="area_office" required>
                                            <option value="">Area Office</option>
                                            @foreach ($areaOffices as $areaOffice)
                                                <option value="{{ $areaOffice->id }}"
                                                    {{ $incentive->area_office_id == $areaOffice->id ? 'selected' : '' }}>
                                                    {{ $areaOffice->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('area_office')
                                            <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">Select Incentive Type</label>
                                        <select id="incentive_type" class="form-control" name="incentive_type" required>
                                            <option value="">Incentive Type</option>
                                            @foreach ($incentiveTypes as $incentiveType)
                                                <option value="{{ $incentiveType->id }}"
                                                    {{ $incentive->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">Source Type</label>
                                        <select id="source_type" class="form-control" name="source_type" required>
                                            <option value="">Source Type</option>
                                            @foreach ($sourceTypes as $sourceType)
                                                <option value="{{ $sourceType->id }}"
                                                    {{ $incentive->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', $incentive->with_effective_date) }}"
                                            required>
                                    </div>
                                </div>
                            </div>

                            @foreach ($incentive->data as $data)
                                <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" required class="form-control" name="from[]"
                                                value="{{ $data['from'] }}" placeholder="Enter From" />
                                            @error('from[]')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3 col-12">
                                        <div class="mb-1">
                                            <label class="form-label" for="to">To</label>
                                            <input type="text" required class="form-control" name="to[]"
                                                value="{{ $data['to'] }}" placeholder="Enter To" />
                                            @error('to[]')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </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" required class="form-control" name="incentive_rate[]"
                                                value="{{ $data['incentive_rate'] }}" placeholder="Enter Incentive Rate" />
                                            @error('incentive_rate[]')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    @if ($loop->index != 0)
                                        <div class="col-md-1 mt-2 col-12">
                                            <button type="button" class="btn btn-danger removeEntry">-</button>
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                            <div class="col-12">
                                <button type="button" class="btn btn-success" id="addEntry">+</button>
                            </div>
                            <div class="row mt-2">
                                <div class="col-12">
                                    <button type="submit" 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="{{ 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>
@endsection

@section('page-script')
    <script type="text/javascript">
        flatpickr("#column-ao-7", {
            dateFormat: "Y-m-d",
            // You can add more configuration options here
        });
        $(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">
                        <label class="form-label" for="from">From</label>
                        <input type="text" required class="form-control" name="from[]" placeholder="Enter From" />
                    </div>
                </div>
                <div class="col-md-3 col-12">
                    <div class="mb-1">
                        <label class="form-label" for="to">To</label>
                        <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">
                        <label class="form-label" for="incentive_rate">Incentive Rate</label>
                        <input type="text" required class="form-control" name="incentive_rate[]" placeholder="Enter Incentive Rate" />
                    </div>
                </div>
                <div class="col-md-1 mt-2 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