@extends('layout.index')
@section('title', 'Escalation Frequency Data')

@section('content')
<script src="/src/js/filters.js"></script>
<section>
    <div class="content-header row">
        <div class="content-header-left col-md-8 col-12 mb-2">
            <div class="row breadcrumbs-top">
                <div class="col-12 d-flex">
                    <h2 class="content-header-title float-start mb-0">Escalation Frequency Data</h2>
                </div>
            </div>
        </div>
    </div>       
</section>
<section>
    @if ($message = Session::get('success'))
        <div class="demo-spacing-0 mb-1">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <div class="alert-body">
                    <i class="fa fa-check-circle" style="font-size:16px;" aria-hidden="true"></i>
                    {{ $message }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                </div>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    @elseif ($message = Session::get('error'))
        <div class="demo-spacing-0 mb-1">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <div class="alert-body">
                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
                    {{ $message }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                </div>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    @endif

    <div class="content-body">
        <!-- Bordered table start -->
        <div class="row" id="table-bordered">
            <div class="col-12">
                <div class="card">
                    <form class="dt_adv_search" action="" method="POST">
                        {{ csrf_field() }}
                        <input type="hidden" name="form_type" value="search_escalation_frequency_details">

                        <div class="card-header w-100 m-0" style="display: block;">
                            <div class="row w-150">
                                <div class="col-sm-12">
                                    <div class="row">
                                        <div class="col-md-2 col-12">
                                            <div class="form-group">
                                                <label class="form-label">Tab <span style="color:red;">*</span></label>
                                                <select class="form-control form-select" id="tabId" name="tab">
                                                    <option value="">Select Tab</option>
                                                    @foreach($aTabs as $item)
                                                        <option value="{{ $item->id }}" {{ (old('tab', $tabId ?? '') == $item->id) ? 'selected' : '' }}>
                                                            {{ $item->tab_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <h5 class="mt-1"><small class="text-danger" id="tabId_err"></small></h5>
                                                @error('tab')
                                                    <span class="error" style="color:red;">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>

                                        @php
                                                // Fix frequency if not in aFrequency
                                            if (!empty($frequency) && !array_key_exists($frequency, $aFrequency)) {
                                                $customFrequency = $frequency;
                                                $frequency = 'CD';
                                            }
                                        @endphp

                                        <div class="col-md-2 col-12">
                                            <div class="form-group">
                                                <label class="form-label">Frequency <span style="color:red;">*</span></label>
                                                <select class="form-control form-select" id="frequency" name="frequency" onchange="changeFrequency()">
                                                    <option value="">Select Frequency</option>
                                                    @foreach($aFrequency as $key => $item)
                                                        <option value="{{ $key }}" {{ (old('frequency', $frequency ?? '') == $key) ? 'selected' : '' }}>
                                                            {{ $item }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <h5 class="mt-1"><small class="text-danger" id="frequency_err"></small></h5>
                                                @error('frequency')
                                                    <span class="error" style="color:red;">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-md-2 col-12">
                                            <div class="form-group">
                                                <label class="form-label">Start Date <span style="color:red;">*</span></label>
                                                <input type="text" name="startDate" id="startDate" class="form-control flatpickr-basic date_flatpickr"
                                                    placeholder="Start Date"
                                                    value="{{ old('startDate', !empty($date) ? date('d-m-Y', $date) : '') }}"
                                                    autocomplete="off">

                                                <h5 class="mt-1"><small class="text-danger" id="startDate_err"></small></h5>
                                                @error('startDate')
                                                    <span class="error" style="color:red;">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-md-2 col-12">   
                                            <div class="form-group">
                                                <label class="form-label" for="validationTooltip01"> Program Name </label>
                                                <select class=" form-control form-select program_filter" id="program_id"  name='program_name' onchange="get_brands_filters();">
                                                    <option value=''> Select Program </option>
                                                                                                    </select>
                                                <h5 class="mt-1"><small class="text-danger" id="program_id_err"></small></h5>
                                            </div>
                                        </div>
                                       
       
                                        <div class="col-md-2 col-12">   
                                            <div class="form-group">
                                                <label class="form-label" for="validationTooltip01"> Brand Name </label>
                                                <select class=" form-control form-select brand_filter" id="brand_id"  name='brand_name' onchange="get_season_filters();">
                                                    <option value=''> Select Brand </option>
                                                                                                    </select>
                                                <h5 class="mt-1"><small class="text-danger" id="brand_id_err"></small></h5>
                                            </div>
                                        </div>

                                        <div class="col-md-2 col-12">
                                            <div class="form-group">
                                                <label class="form-label">Country</label>
                                                <select class="form-control form-select country_filter" id="country" name="countryId" onchange="get_states_filters();">
                                                    <option value="">Select Country</option>
                                                    @foreach($aCountries as $item)
                                                        <option value="{{ $item->id }}" {{ (old('countryId', $countryId ?? '') == $item->id) ? 'selected' : '' }}>
                                                            {{ $item->country_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <h5 class="mt-1"><small class="text-danger" id="country_err"></small></h5>
                                                @error('countryId')
                                                    <span class="error" style="color:red;">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-12 text-center mt-2">
                                        <button type="submit" class="btn btn-primary mr-1" onClick="return validation()">Submit</button>
                                        <a href="{{ url('/escalation_tab_frequency') }}" type="reset"
                                            class="btn btn-outline-secondary">Cancel</a>
                                    </div>  
						        </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
      </div>
    
</section>
<script>
    var customFrequency = "";
    
       $('document').ready(function() {
            changeFrequency();
            var basicPickr = $('.date_flatpickr');
                
                if (basicPickr.length) {
                    basicPickr.flatpickr({
                        dateFormat: 'd-m-Y',
                        minDate: 'today' 
                    });
                }
            
        });
   
        function validation() {
            var tabId = $('#tabId').val();
            var frequency = $('#frequency').val();
            var startDate = $('#startDate').val();
            var countryId = $('#countryId').val(); // corrected ID
            var programId = $('#program_id').val();
            var brandId = $('#brand_id').val();
            // Tab validation
            if (tabId == '') {
                $('#tabId').parent().addClass('has-error');
                $('#tabId_err').html('Please select a Tab.');
                $('#tabId').focus().on('change', function () {
                    $('#tabId').parent().removeClass('has-error');
                    $('#tabId_err').html('');
                });
                return false;
            }

            // Frequency validation
            if (frequency == '') {
                $('#frequency').parent().addClass('has-error');
                $('#frequency_err').html('Please select a Frequency.');
                $('#frequency').focus().on('change', function () {
                    $('#frequency').parent().removeClass('has-error');
                    $('#frequency_err').html('');
                });
                return false;
            }

            // Custom Frequency required if frequency == 'CD'
            if (frequency === 'CD') {
                var customFrequency = $('#customFrequency').val();
                if (customFrequency === undefined || customFrequency.trim() === '') {
                    if ($('#customFrequency_err').length === 0) {
                        $('#customFrequency').after('<h5 class="mt-1"><small class="text-danger" id="customFrequency_err">Please enter a valid Custom Days.</small></h5>');
                    }
                    $('#customFrequency').parent().addClass('has-error');
                    $('#customFrequency').focus().on('input', function () {
                        $('#customFrequency').parent().removeClass('has-error');
                        $('#customFrequency_err').remove();
                    });
                    return false;
                }
            }

            // Start date validation
            if (startDate == '') {
                $('#startDate').parent().addClass('has-error');
                $('#startDate_err').html('Please select a Start Date.');
                $('#startDate').focus().on('input', function () {
                    $('#startDate').parent().removeClass('has-error');
                    $('#startDate_err').html('');
                });
                return false;
            }

            // Country validation
            if (countryId == '') {
                $('#countryId').parent().addClass('has-error');
                $('#country_err').html('Please Select Country.');
                $('#countryId').focus().on('change', function () {
                    $('#countryId').parent().removeClass('has-error');
                    $('#country_err').html('');
                });
                return false;
            }

            if (programId == '') {
                $('#program_id').parent().addClass('has-error');
                $('#program_id_err').html('Please Select a Program.');
                $('#program_id').focus().on('input', function () {
                    $('#program_id').parent().removeClass('has-error');
                    $('#program_id_err').html('');
                });
                return false;
            }

            if (brandId == '') {
                $('#brand_id').parent().addClass('has-error');
                $('#brand_id_err').html('Please Select a Brand.');
                $('#brand_id').focus().on('input', function () {
                    $('#brand_id').parent().removeClass('has-error');
                    $('#brand_id_err').html('');
                });
                return false;
            }
            
            return true;
        }

        // Called on frequency change
        function changeFrequency() {
            var frequency = $('#frequency').val();
            $('#customFrequency_err').remove(); // Remove old error if any

            if (frequency === 'CD') {
                if ($('#customFrequency').length === 0) {
                    $('#frequency').parent().after(`
                        <div class="form-group" id="customFrequencyWrapper">
                            <label class="form-label">Custom Days <span style="color:red;">*</span></label>
                            <input type="text" id="customFrequency" name="customFrequency" class="form-control" placeholder="Enter Custom Days" value="${customFrequency ?? ''}">
                            <h5 class="mt-1"><small class="text-danger" id="customFrequency_err"></small></h5>
                        </div>
                    `);
                }

                // Allow only numeric input
                $('#customFrequency').off('input').on('input', function () {
                    var value = $(this).val();
                    $(this).val(value.replace(/\D/g, ''));
                });

            } else {
                $('#customFrequencyWrapper').remove(); // Remove the wrapper if frequency is changed
            }
        }


</script>
@endsection