@extends('layouts.app') {{-- Include the layout --}}

@section('content')

<style>
 .logo-preview{
    position:static;
    padding:5px; 
     
 }
</style>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Login Alert</div>
                <div class="card-body">
                    @if (session('success'))
                        <div class="alert alert-success custom-alert">
                            {{ session('success') }}
                        </div>
                    @endif
                    
                    @if (session('error'))
                        <div class="alert alert-danger custom-alert">
                            {{ session('error') }}
                        </div>
                    @endif
                    
                    <form method="POST" action="{{ route('updateLoginAlert') }}" enctype="multipart/form-data">
                        @csrf
                        
                        <div class="form-group row align-items-center">
                            
                            <div class="col-md-6">
                                <label for="todate">To Date <span class="text-danger">*</span></label> 
                                <input type="datetime-local" id="todate" name="todate" class="form-control" value="{{ $todate }}" required>
                                <div class="invalid-feedback">
                                    Please enter date and time.
                                </div>
                            </div>

                            
                            <div class="col-md-3 mt-2">
                                <div class="form-check">
                                    <input type="checkbox" id="restrict" name="restrict" class="form-check-input" {{ $restrict ? 'checked' : '' }}>
                                    <label class="form-check-label" for="restrict">Restrict</label>
                                </div>
                            </div>

                            <div class="col-md-3 mt-2">
                                <div class="form-check">
                                    <input type="checkbox" id="loginalert" name="loginalert" class="form-check-input" {{ $loginalert ? 'checked' : '' }}>
                                    <label class="form-check-label" for="loginalert">Login Alert</label>
                                </div>
                            </div>
                        </div>
                                
                        <div class="form-group">
                            <label for="taxtitle">Alert Text <span class="text-danger">*</span></label> 
                            <textarea  class="form-control"  name="alerttext" id="alerttext" >{{ $alerttext }}</textarea>     
                        </div>
                        
                        
                        <br>
                        
                        <div style="text-align:right">
                            <button type="submit" class="btn btn-success" id="savebtn">Update</button>
                        </div> 
                    </form>
                    
                </div>
            </div>
        </div>
    </div>
</div>    

<script>
        function previewLogo(input, previewId) {
            const previewContainer = document.getElementById(previewId);
            const file = input.files[0];

            if (file) {
                const reader = new FileReader();

                reader.onload = function (e) {
                    // Remove previous preview, if any
                    previewContainer.innerHTML = '';

                    const previewImage = document.createElement('img');
                    previewImage.src = e.target.result;
                    previewImage.alt = 'Logo Preview';
                    previewImage.width = 150;
                    previewImage.height = 150;
                    previewContainer.appendChild(previewImage);
                };

                reader.readAsDataURL(file);
            }
        }
    </script>

<script>

$('#savebtn').on('click', function(event) {
    var form = event.target.form;

    if (!form.checkValidity()) {
        event.preventDefault();
    }

    $(form).addClass('was-validated');
    
});



$("#moduleid").change(function() {
    
    if($('#moduleid').val()>0)
    {
        var selectedOption = $(this).find(":selected");
        var sequence = selectedOption.attr("sequence");
        var label = selectedOption.attr("label");
    
        $('#modulename').val(label);
        $('#moduleseq').val(sequence);
        $('#savebtn').text('Update');
        $('#deletebtn').show();
        
    }
    else {
        $('#modulename').val(label);
        $('#moduleseq').val(sequence);
        $('#savebtn').text('Add New');
        $('#deletebtn').hide();
    }
    
});


$("#deletebtn").on('click', function() {
    
    var moduleid=$('#moduleid').val();
    
    if(moduleid>0)
    {
        Swal.fire({
            title: 'Are you sure?',
            icon: 'warning',
            width: '300px',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                
                $.ajax({
                    type: 'DELETE',
                    url: '{{ route('deleteModule', '') }}/' + moduleid,
                    data: {
                        _token: '{{ csrf_token() }}',
                    },
                    success: function(response) {
                        
                        if (response.error) {
                            Swal.fire({
                                title: response.error,
                                icon: 'error',
                                width: '300px',
                                customClass: {
                                    title: 'swal-title'
                                }
                            });
                        } else if (response.success) {
                            
                            Swal.fire({
                                title: response.success,
                                icon: 'success',
                                width: '300px',
                                customClass: {
                                    title: 'swal-title'
                                },
                                showConfirmButton: true,
                            });
                            
                            $('#moduleid option[value="' + moduleid + '"]').remove();
                            $('#modulename').val('');
                             $('#moduleseq').val('');
                            $('#deletebtn').hide();
                        }
                    },
                    error: function(error) {
                        console.error('Error deleting the item', error);
                    }
                });
                
            } else {
           
            }
        });
                
        
            
    }
    
});

</script>

@endsection