@extends('layouts.app')
@section('title', 'Site Maintenance')

@section('content')
<div class="container-fluid mt-1">
	<x-setting_tabs/>
	<div class="col-lg-12">

        <div class="custom-control custom-switch ml-auto d-flex justify-content-end mb-2 mx-2">
            <input type="checkbox"  class="custom-control-input" id="customSwitch"  value="{{$is_maintenance_mode}}" @if($is_maintenance_mode) checked @endif>
            <label class="custom-control-label" id="customSwitchlabel" for="customSwitch">@if($is_maintenance_mode) Disable Maintenace Mode @else Enable Maintenace Mode @endif</label>
        </div>
        <div class="card ">
            <div class="card-body">
                <div class="p-0">
                    <table id="datatable" class="table table-bordered mb-0"  >
                        <thead>
                            <tr>
                                <th>Sl No</th>
                                <th>Message</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($tble_list as $tble_row)
                        	<tr>
                                <td width="5%">{{ $loop->iteration}}</td>
                                <td width="75%" class="text-wrap">{{$tble_row->content}}</td>
                                <td width="10%">
                                    @if($tble_row->is_active==1)
                                        <span class="badge rounded-pill bg-primary">Active</span>
                                    @else
                                        <span class="badge rounded-pill bg-danger">Inactive</span>
                                    @endif
                                </td>
                                <td width="10%"><img class="menuicon" onclick="edit('{{ $tble_row->id }}')" src="{{asset('app-assets/assets/images/edit.svg')}}" ></td>
                            </tr>
                            @empty
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="addModel">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
    	        <form method="post" name="addFrm" id="addFrm" role="form" autocomplete="off" data-parsley-validate>
    	            @csrf
                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Add Message</h5>
    					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
    						<span aria-hidden="true">&times;</span>
    					</button>
                    </div>
                    <!-- Modal body -->
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <label for="name-input" class="col-form-label">Maintenance Message</label>
                                <textarea type="text" class="form-control" id="content" name="content" placeholder="Enter Content to be Displayed on Maintenance Page"></textarea>
                            </div>
                            <div class="col-lg-4">
                                <label for="active-input" class="col-form-label">Is Active ?</label><br>
                                <input type="checkbox" id="is_active" name="is_active" value="1" checked>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="button" value="Submit" name="submit" id="submit" class="btn btn-primary" onclick="saveData();">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>
    	        </form>
            </div>
        </div>
    </div>

     <div class="modal fade" id="editModel">
        <div class="modal-dialog modal-md">
            <div class="modal-content">

                    <div id="append_data"></div>

            </div>
        </div>
    </div>

</div>
@endsection
@section('script')
<x-alert/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.4.0/clipboard.min.js"></script>
<script type="text/javascript">

	$(document).ready(function() {
		$(".odtabs").not("#tab15").addClass('btn-outline-secondary');
		$("#tab15").addClass('btn-secondary');
	});

	 var table = $('#datatable').DataTable({
		responsive: true,
		dom: 'l<"toolbar">Bfrtip',
        buttons: [
            'excel'
        ],
		initComplete: function(){
		    $("div.toolbar").html('<button id="addMessage" type="button" class="ml-2 tble_btn btn btn-primary" data-toggle="modal" data-target="#addModel"><img class="menuicon" src="{{asset("app-assets/assets/images/add.svg")}}">&nbsp;Add Message</button><br />');
		},
	   'columnDefs': [ {
			'targets': [3],
			'orderable': false,
		}]
    });


    function saveData()
    {
        if ($("#addFrm").parsley())
        {
            if ($("#addFrm").parsley().validate()) {
            event.preventDefault();
            if ($("#addFrm").parsley().isValid()) {
                $.ajax({
                    type: "POST",
                    cache:false,
                    async: false,
                    url: "{{ route('addSiteMessageDt') }}",
                    data: new FormData($("#addFrm")[0]),
                    processData: false,
                    contentType: false,
                    success: function(response)
                    {
                        new PNotify({
                            title: 'Success',
                            text:  response.msg,
                            type: 'success'
                        });
                        setTimeout(function(){  location.reload(); }, 800);

                    },
                    error:function(response) {
                        var err = "";
                        $.each(response.responseJSON.errors,function(field_name,error){
                            err = err +'<br>' + error;
                        });
                        new PNotify({
                            title: 'Error',
                            text:err,
                            type: 'error',
                            delay: 2000
                        });
                    }
                });
            }
        }
        }
    }
    function edit(id)
    {

        var url = '/siteMessageEdit/'+id;
        $.ajax({
            url:url,
            dataType:'html',
            success:function(data)
            {
                $("#append_data").html('');
                $("#append_data").html(data);
                $('#editModel').modal('show');
            }
        });
        return false;
    }
    function updateData()
    {
        if ($("#editFrm").parsley())
        {
            if ($("#editFrm").parsley().validate()) {
            event.preventDefault();
            if ($("#editFrm").parsley().isValid()) {
                $.ajax({
                    type: "POST",
                    cache:false,
                    async: false,
                    url: "{{ route('updateSiteMessageDt') }}",
                    data: new FormData($("#editFrm")[0]),
                    processData: false,
                    contentType: false,
                    success: function(response) {

                        new PNotify({
                            title: 'Success',
                            text:  response.msg,
                            type: 'success'
                        });
                        setTimeout(function(){  location.reload(); }, 800);

                    },
                    error:function(response) {
                        var err = "";
                        $.each(response.responseJSON.errors,function(field_name,error){
                            err = err +'<br>' + error;
                        });
                        new PNotify({
                            title: 'Error',
                            text:err,
                            type: 'error',
                            delay: 2000
                        });
                    }
                });
            }
        }
        }
    }


    function generateGuid() {
        return 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
            var r = Math.random() * 16 | 0,
                v = c === 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }

    $(document).ready(function () {
    $('#customSwitch').click(function () {
        var initialCheckedStatus = $('#customSwitch').prop('checked');

        if (initialCheckedStatus) {
            // Generate a random GUID
            const guidedSecurityKey = generateGuid();

            // Show SweetAlert2 dialog with the generated guided security key
            Swal.fire({
                title: 'COPY THE CODE TO CONFIRM',
                html: `Keep the access code secure to prevent losing access to the application in Maintenance Mode<div class="input-group">
                        <input type="text" id="securityKeyInput" class="form-control" value="${guidedSecurityKey}" readonly>
                        <div class="input-group-append">
                            <button class="btn btn-light" type="button" id="copyButton" data-clipboard-target="#securityKeyInput">
                                <i class="fas fa-copy"></i> Copy
                            </button>
                        </div>
                    </div>`,
                icon: 'warning',
                showCancelButton: true,
                cancelButtonText: 'Cancel',
                showConfirmButton: false,
                allowOutsideClick: false,
            }).then((result) => {
                if (result.dismiss === Swal.DismissReason.cancel) {
                    Swal.fire('Cancelled', 'The operation has been cancelled.', 'error');
                    if(initialCheckedStatus) {
                        $('#customSwitch').prop('checked', false);
                    } else {
                        $('#customSwitch').prop('checked', true);
                    }
                }
            });

            // Initialize ClipboardJS after the dialog is fully rendered
            Swal.getPopup().querySelector('#copyButton').addEventListener('click', () => {
                handleCopyAction(guidedSecurityKey, initialCheckedStatus);
            });
        } else {
            $('#customSwitch').prop('disabled', true);
            $('#customSwitchlabel').text('Enable Maintenace Mode')
            performMaintenanceAction(null, initialCheckedStatus);
        }
    });

    const handleCopyAction = (guidedSecurityKey, initialCheckedStatus) => {
        const securityKeyInput = document.getElementById('securityKeyInput');
        securityKeyInput.select();
        document.execCommand('copy');
        $('#customSwitch').prop('disabled', true);
        $('#customSwitchlabel').text('Diable Maintenace Mode')
        Swal.fire('Copied!', 'Security key has been copied to the clipboard.', 'success');
        // Perform maintenance action after copy
        performMaintenanceAction(guidedSecurityKey, initialCheckedStatus);
    };

    const performMaintenanceAction = (securityKey, initialCheckedStatus) => {
        $.ajax({
            url: '/toggle-maintenance-mode',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                securityKey: securityKey
            },
            success: (response) => {
                if (response.success) {

                    Swal.fire('Updated!', 'Application is now live', 'success');
                    location.reload();
                } else {
                    location.reload();
                }
            },
            error: (error) => {
                Swal.fire('Error', error.message, 'error');
            },
        });
    };
});
</script>
@endsection