@extends('layouts/gnr_layout')
@section('title', '| SMS Block Days Config')
@section('content')
<div class="row add-data-form">
    <div class="col-md-12">
        <div class="col-md-3"></div>
            <div class="col-md-6 fullbody">
                <div class="viewTitle" style="border-bottom: 1px solid white;">
                    <a href="{{route('smsBlockConfig.index')}}" class="btn btn-info pull-right addViewBtn"><i class="glyphicon glyphicon-th-list viewIcon">
                    </i>SMS Block Days Config List</a>
                </div>
            <div class="panel panel-default panel-border">
                <div class="panel-heading">
                    <div class="panel-title">SMS Block Days Config</div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <!-- Success Message -->
                        @if (session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif
                
                        <!-- Error Message -->
                        @if (session('error'))
                            <div class="alert alert-danger">
                                {{ session('error') }}
                            </div>
                        @endif
                
                        <!-- Validation Error Messages -->
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </div>
                </div>
                
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-12">
                                {!! Form::open(['route' => 'smsBlock.store', 'method' => 'POST','class'=>'form-horizontal form-groups', 'id' => 'smsForm']) !!}
                                    <div class="form-group">
                                        {!! Form::label('filDateFrom', 'Start Date:', ['class' => 'col-sm-3 control-label']) !!}
                                        <div class="col-sm-9">
                                            {!! Form::text('filDateFrom', null, array('class'=>'form-control', 'id'=>'filDateFrom',   'readonly','style'=>'cursor:pointer')) !!}
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        {!! Form::label('filDateFrom', 'End Date:', ['class' => 'col-sm-3 control-label']) !!}
                                        <div class="col-sm-9">
                                                
                                            {!! Form::text('filDateTo', null, array('class'=>'form-control', 'id'=>'filDateTo',  'readonly','style'=>'cursor:pointer')) !!}
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        {!! Form::label('branch', 'Branch:', ['class' => 'col-sm-3 control-label']) !!}
                                        <div class="col-sm-9">
                                            <select name="branch" class="form-control input-sm" id="branchId" style="color: black;" >
                                                <option value="all">All</option>
                                                <option value="specefic">Specefic</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group" id="speceficBrancesIds" style="display: none;">
                                        {!! Form::label('branch', 'Branches:', ['class' => 'col-sm-3 control-label']) !!}
                                        <div class="col-sm-9">
                                            <select name="branches[]" class="form-control input-sm" id="speceficBrances" style="color: black;" multiple>
                                                @foreach($BranchDatas as $BranchData)
                                                    <option value="{{ $BranchData->id }}"> 
                                                        {{ sprintf('%03d',$BranchData->branchCode) }} - {{ $BranchData->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
        
                                    <div class="form-group">
                                        {!! Form::label('dateType', 'Date Type:', ['class' => 'col-sm-3 control-label']) !!}
                                        <div class="col-sm-9">
                                            <select name="dateType" class="form-control input-sm" id="dateType" style="color: black;" >
                                                <option value="soft_date">Software Date</option>
                                                <option value="syst_date">System Date</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-sm-11"></div>
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                
                                {!! Form::close() !!}
                            </div>
                        
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {

        if ($('.alert-success').length) {
            setTimeout(function() {
                $('.alert-success').fadeOut('slow');
            }, 1000); 
        }

        // Check for error message
        if ($('.alert-danger').length) {
            setTimeout(function() {
                $('.alert-danger').fadeOut('slow');
            }, 1000); 
        }

        $('#smsForm').on('submit', function (e) {
            
            let fromDate = $('#filDateFrom').val();
            let toDate = $('#filDateTo').val();
            let branchType = $('#branchId').val();
            let specificBranches = $('#speceficBrances').val();


            if (!fromDate || !toDate) {
                e.preventDefault(); // stop form submission

                Swal.fire({
                    icon: 'warning',
                    title: 'Required!',
                    text: 'Please fill both Start Date and End Date before submitting.',
                    confirmButtonColor: '#3085d6'
                });
            }

            if (branchType === 'specefic' && (!specificBranches || specificBranches.length === 0)) {
                e.preventDefault();  // Prevent form submission
                Swal.fire({
                    icon: 'warning',
                    title: 'Missing Branches',
                    text: 'Please select at least one branch.',
                });
                return;
            }
        });

        $('#filDateFrom').datepicker({
            dateFormat: 'dd-mm-yy',
            changeYear: true,
            changeMonth: true,
            onSelect: function(){
                thisDate = $("#filDateFrom").datepicker('getDate');
                $('#filDateTo').datepicker('option','minDate',thisDate);
            }
        });

        $('#filDateTo').datepicker({
            dateFormat: 'dd-mm-yy',
            changeYear: true,
            changeMonth: true,
            onSelect: function(){
                thisDate = $("#filDateTo").datepicker('getDate');
                $('#filDateFrom').datepicker('option','maxDate',thisDate);
            }
        });

        $('#speceficBrances').select2({
                placeholder: "Select Branches",
                allowClear: true,
                closeOnSelect: false // Keep dropdown open for multi-select
            }).on('select2:select', function(e) {
                // Get the selected value
            var selectedValue = e.params.data.id;

            // Apply a random color for each selected value
            var colors = ["#ff9800", "#4caf50", "#2196f3", "#9c27b0", "#f44336"];
            var randomColor = colors[Math.floor(Math.random() * colors.length)];

            // Apply the color dynamically
            $('.select2-selection__choice').each(function() {
                if ($(this).text().trim() == selectedValue) {
                    $(this).css({
                        "background-color": randomColor,
                        "border-color": randomColor,
                        "color": "#fff"
                    });
                }
            });
        });


        $('#branchId').on('change', function () {
            if ($(this).val() === 'specefic') {
                $('#speceficBrancesIds').slideDown();
            } else {
                $('#speceficBrancesIds').slideUp();
            }
        });




    });/*Ready*/
</script>






@endsection