@extends('layouts/gnr_layout')
@section('title', '| Edit 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">Edit SMS Block Days Config</div>
                </div>
                
                <div class="row">
                    <div class="col-md-12">
                        @if (session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif
                
                        @if (session('error'))
                            <div class="alert alert-danger">
                                {{ session('error') }}
                            </div>
                        @endif
                
                        @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">
                            {!! Form::model($config, ['route' => ['smsBlockConfig.update', $config->id], 'method' => 'PUT', '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', $config->filDateFrom, ['class'=>'form-control', 'id'=>'filDateFrom', 'readonly','style'=>'cursor:pointer']) !!}
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    {!! Form::label('filDateTo', 'End Date:', ['class' => 'col-sm-3 control-label']) !!}
                                    <div class="col-sm-9">
                                        {!! Form::text('filDateTo', $config->filDateTo, ['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" {{ $config->branchType == 'all' ? 'selected' : '' }}>All</option>
                                            <option value="specefic" {{ $config->branchType == 'specefic' ? 'selected' : '' }}>Specific</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="form-group" id="speceficBrancesIds" style="{{ $config->branchType == 'specefic' ? '' : '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 }}" 
                                                    {{ in_array($BranchData->id, $config->selectedBranches) ? 'selected' : '' }}>
                                                    {{ $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" {{ $config->date_type == 'soft_date' ? 'selected' : '' }}>Software Date</option>
                                            <option value="syst_date" {{ $config->date_type == 'syst_date' ? 'selected' : '' }}>System Date</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-sm-11"></div>
                                <button type="submit" class="btn btn-primary">Update</button>
                            
                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
            <div class="footerTitle" style="border-top:1px solid white"></div>
        </div>
        <div class="col-md-3"></div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        
        if ($('.alert-success').length) {
            setTimeout(function() {
                $('.alert-success').fadeOut('slow');
            }, 1000); 
        }

        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();
                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();
                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
        }).on('select2:select', function(e) {            
            var selectedValue = e.params.data.id;
            var colors = ["#ff9800", "#4caf50", "#2196f3", "#9c27b0", "#f44336"];
            var randomColor = colors[Math.floor(Math.random() * colors.length)];
            
            $('.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();
                $('#speceficBrances').select2({
                    placeholder: "Select Branches",
                    allowClear: true,
                    closeOnSelect: false,
                    width: '100%'
                });
            } else {
                $('#speceficBrancesIds').slideUp();
                $('#speceficBrances').val(null).trigger('change');
            }
        });
        
        $('#speceficBrances').select2();
    });
</script>
@endsection