@extends('fronted.layout.main')
@section('adcontent')

<div class="container-fluid">
    @if($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <div class="container">
        <div class="d-flex justify-content-center align-items-center mb-2">
            <button id="msgManagerModalBtn" class="btn btn-success" type="button">MSG Manager</button>
        </div>
        <div class="table-responsive dataTable">
            <table class="table align-middle roomSeats roomSeatTable text-center text-capitalize">
                <thead>
                    <tr>
                        <th>S.No</th>
                        <th>MSG Type</th>
                        <th>MSG</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($data as $msg)
                    <tr>
                        <td>{{ $msg->id }}</td>
                        <td>{{ $msg->msg_type }}</td>
                        <td>
                            @php
                            $message = json_decode($msg->msg,true);
                            @endphp
                            <div class="d-flex justify-content-between flex-column text-start">
                                <p>{{$message['title']}} {{$message['tagline']}}</p>
                                @if($message['body']){!! $message['body'] !!}@endif
                                @if($message['quotes'])<p>{{$message['quotes']}}</p>@endif
                                <p>Thanks You</p>
                                @if($message['regards'])
                                <p>{{$message['regards']}}</p>
                                @endif
                                @if($message['hostelName']) <p><strong>{{$message['hostelName']}}</strong></p>@endif
                            </div>
                        </td>
                        <td>{{ $msg->status ? "Active" : "InActive" }}</td>
                        <td>
                            <button type="button" class="btn deleteMessageBtn" data-id="{{$msg->id }}"><i class="fa-solid fa-trash text-danger"></i></button>
                            <button type="button" class="btn updateMessage" data-msgtype="{{$msg->msg_type}}" data-id="{{$msg->id}}" data-message="{{$msg->msg}}" data-active="{{ $msg->status}}"><i class="fa-regular fa-pen-to-square"></i></button>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6">Data not found</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- msg manager modal -->
    <div class="modal fade" id="messageManager" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="messageManagerLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title flex-fill text-center bg-black text-white" id="messageManagerLabel">Message Manager</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="{{route('message.manager.store')}}" id="AddNewMessageForm" method="post">
                        @csrf
                        <div class="input-group mb-2">
                            <label for="messageType" class="input-group-text">MSG Type</label>
                            <select name="msg_type" class="form-select" id="messageType" required>
                                <option value="">Select</option>
                                <option value="food_menu">Food Menu</option>
                                <option value="reg_form_share">Reg Form Share</option>
                                <option value="payment_pre_reminder">Payment Pre Reminder</option>
                                <option value="lead_reminder">Lead Reminder</option>
                                <option value="sale_invoice">Sale Invoice</option>
                                <option value="from_share">From Share</option>
                                <option value="selcome_msg">Welcome Msg</option>
                                <option value="admission_done">Admission Done</option>
                                <option value="payment_duo_reminder">Payment Duo Reminder</option>
                                <option value="leave_wishes_msg">Leave Wishes Msg</option>
                                <option value="offer_msg">Offer Msg</option>
                            </select>
                        </div>
                        <div class="input-group mb-2 title-box">
                            <label class="input-group-text" for="title">Title:</label>
                            <input class="form-control" type="text" id="title">
                        </div>
                        <div class="input-group mb-2 tagline-box ">
                            <label class="input-group-text" for="tagline">Tagline:</label>
                            <input class="form-control" type="text" id="tagline">
                        </div>
                        <div class="input-group mb-2 body-box ">
                            <label class="input-group-text" for="body">Body:</label>
                            <textarea class="form-control" id="body"></textarea>
                        </div>
                        <div class="input-group mb-2 quotes-box ">
                            <label class="input-group-text" for="quotes">Quotes:</label>
                            <textarea class="form-control" type="text" id="quotes"></textarea>
                        </div>
                        <div class="input-group mb-2 regards-box ">
                            <label class="input-group-text" for="regards">Regards Name:</label>
                            <input class="form-control" type="text" id="regards">
                        </div>
                        <div class="form-group mb-2">
                            <h6>Message Preview</h6>
                            <div class="messageView border border-1 rounded p-1 border-black"></div>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="status" id="activeMessage" value="1">
                            <label class="form-check-label" for="activeMessage">Active</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="status" id="inActiveMessage" value="0" checked>
                            <label class="form-check-label" for="inActiveMessage">InActive</label>
                        </div>
                        <input class="input-hidden" name="msg" type="hidden" id="finalMessage">
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="addMessageBtn" type="button" class="btn btn-warning">Submit</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            const modalUpdateProperty = [{
                    type: 'update',
                    modalTitle: "Update Message",
                    formUrl: "{{route('message.manager.update')}}",
                    submitBtnText: 'Update'
                },
                {
                    type: 'insert',
                    modalTitle: "Message Manager",
                    formUrl: "{{route('message.manager.store')}}",
                    submitBtnText: 'Submit'
                }
            ];


            const messageTypesAndProperty = [{
                    msgType: 'food_menu',
                    messageType: {
                        inputShow: {
                            title: true,
                            body: false,
                            tagline: true,
                            quotes: true,
                            regards: true
                        },
                        editableFields: {
                            title: 'Hello Dear',
                            tagline: 'Your sweet Home',
                            body: `<div>
                               Menu(" 23-Jul-2024 ")<br>
                               <strong> Meal Type:</strong> Breakfast<br>
                                <strong> Item:</strong>: IDLI SAMBHAR<br>
                                -------------------<br>

                                 <strong> Meal Type:</strong> Lunch <br>
                                <strong> Item:</strong>: ALLO GOBHI PARATHA <br>
                                ------------------- <br>

                                 <strong> Meal Type:</strong> Brunch <br>
                                <strong> Item:</strong>: BHEL/ PAPAD <br>
                                ------------------- <br>

                                 <strong> Meal Type:</strong> Dinner <br>
                                <strong> Item:</strong>: ALLO GOBHI PARATHA <br>
                                ------------------- <br>
                            </div>`,
                            quotes: '🌾Do not Let Food Go To Waste! Every Bite Is A Celebration Of Resources. Finish Your Plate With Gratitude.🙌',
                            regards: '',

                        },
                        defaultMessage: {
                            title: 'Hello Dear',
                            tagline: 'Your Sweet Home',
                            body: `<div>
                               Menu(" 23-Jul-2024 ")<br>
                               <strong> Meal Type:</strong> Breakfast<br>
                                <strong> Item:</strong>: IDLI SAMBHAR<br>
                                -------------------<br>

                                 <strong> Meal Type:</strong> Lunch <br>
                                <strong> Item:</strong>: ALLO GOBHI PARATHA <br>
                                ------------------- <br>

                                 <strong> Meal Type:</strong> Brunch <br>
                                <strong> Item:</strong>: BHEL/ PAPAD <br>
                                ------------------- <br>

                                 <strong> Meal Type:</strong> Dinner <br>
                                <strong> Item:</strong>: ALLO GOBHI PARATHA <br>
                                ------------------- <br>
                            </div>`,
                            quotes: '🌾Do not Let Food Go To Waste! Every Bite Is A Celebration Of Resources. Finish Your Plate With Gratitude.🙌',
                            regards: '',
                        }
                    }
                },
                {
                    msgType: 'from_share',
                    messageType: {
                        inputShow: {
                            title: true,
                            body: true,
                            tagline: true,
                            quotes: true,
                            regards: true

                        },
                        editableFields: {
                            title: 'Welcome Dear,',
                            tagline: 'Your Home Away From Home!',
                            body: ' 🏡✨ Click below to complete your registration to join our family and start your journey with us. 👇',
                            quotes: '🚀 Excited to have you with us! 🤗🤗🎉',
                            regards: '',
                        },
                        defaultMessage: {
                            title: 'Welcome Dear,',
                            tagline: 'Your Home Away From Home!',
                            body: ' 🏡✨ Click below to complete your registration to join our family and start your journey with us. 👇',
                            quotes: '🚀 Excited to have you with us! 🤗🤗🎉',
                            regards: '',
                        }
                    }
                },
                {
                    msgType: 'lead_reminder',
                    messageType: {
                        inputShow: {
                            title: true,
                            body: false,
                            tagline: true,
                            quotes: true,
                            regards: true

                        },
                        editableFields: {
                            title: '👋 Hello,',
                            tagline: '',
                            body: `
                             <div>
                            <p> 
                            🏡 You visited our Hostel/PG <strong>Your Hostel Name</strong> on Date <strong>Visite date</strong>.
                                📜 Your requirement is <strong>000</strong>.</p>

                               <p> If you are interested or have any queries, please contact us on:</br>
                                📱 Mobile No: <strong> Your mobile number </strong></br>
                                📧 Email: <strong> your email number </strong> </br>
                                </p>
                            </div>`,
                            quotes: 'Feel free to reach out!',
                            regards: '',
                        },
                        defaultMessage: {
                            title: '👋 Hello,',
                            tagline: '',
                            body: `
                            <div>
                            <p> 
                            🏡 You visited our Hostel/PG <strong>Your Hostel Name</strong> on Date <strong>Visite date</strong>.
                                📜 Your requirement is <strong>000</strong>.</p>

                               <p> If you are interested or have any queries, please contact us on:</br>
                                📱 Mobile No: <strong> Your mobile number </strong></br>
                                📧 Email: <strong> your email number </strong> </br>
                                </p>
                            </div>`,
                            quotes: 'Feel free to reach out!',
                            regards: '',
                        }
                    }
                },
                {
                    msgType: 'payment_pre_reminder',
                    messageType: {
                        inputShow: {
                            title: true,
                            body: true,
                            tagline: true,
                            quotes: true,
                            regards: true

                        },
                        editableFields: {
                            title: '👋 Hi,',
                            tagline: '',
                            body: 'Your Next bill coming soon please pay it.',
                            quotes: '💖 Your prompt payment is appreciated!',
                            regards: ''
                        },
                        defaultMessage: {
                            title: '👋 Hello,',
                            tagline: '',
                            body: 'Your Next bill coming soon please pay it.',
                            quotes: '💖 Your prompt payment is appreciated!',
                            regards: ''
                        }
                    }
                },
                {
                    msgType: 'sale_invoice',
                    messageType: {
                        inputShow: {
                            title: true,
                            body: false,
                            tagline: false,
                            quotes: true,
                            regards: true

                        },
                        editableFields: {
                            title: '👋 Hi,',
                            tagline: '',
                            body: `Your July Invoice is here! 📑💸 Please click on the link below to download:</br>
                            Document Link`,
                            quotes: '💖 Your prompt payment is appreciated!',
                            regards: ''
                        },
                        defaultMessage: {
                            title: '👋 Hi,',
                            tagline: '',
                            body: `Your July Invoice is here! 📑💸 Please click on the link below to download:</br>
                            Document Link`,
                            quotes: '💖 Your prompt payment is appreciated!',
                            regards: ''
                        }
                    }
                },
                {
                    msgType: 'payment_duo_reminder',
                    messageType: {
                        inputShow: {
                            title: true,
                            body: false,
                            tagline: false,
                            quotes: true,
                            regards: true

                        },
                        editableFields: {
                            title: '👋 Hi,',
                            tagline: '',
                            body: `You have not paid amount <strong> 10000-/ rupes </strong>, Every day add panlty, if you not paid the sales. </br>
                            Document Link`,
                            quotes: '💖 Your prompt payment is appreciated!',
                            regards: ''
                        },
                        defaultMessage: {
                            title: '👋 Hi,',
                            tagline: '',
                            body: `You have not paid amount <strong> 10000-/ rupes </strong>, Every day add panlty, if you not paid the sales. </br>
                            Document Link`,
                            quotes: '💖 Your prompt payment is appreciated!',
                            regards: ''
                        }
                    }
                }
            ];


            function getMessageTemplate(msgType) {
                const messageType = messageTypesAndProperty.find(type => type.msgType === msgType);

                return messageType ? messageType.messageType : null;
            }

            function prepareMessage(input) {
                const title = $('#title').val()
                const tagline = $('#tagline').val()
                const body = $('#body').val()
                const quotes = $('#quotes').val()
                const regards = $('#regards').val()
                const messageTemplate = {
                    title: title,
                    tagline: tagline,
                    body: body,
                    quotes: quotes,
                    regards: regards,
                    hostelName: '{{session("hostel")}}'
                }
                $(input).val(JSON.stringify(messageTemplate));
            };

            function setupModal(modalType) {
                const modalProps = modalUpdateProperty.find(prop => prop.type === modalType);
                if (modalProps) {
                    $('#messageManagerLabel').text(modalProps.modalTitle);
                    $('#addMessageBtn').text(modalProps.submitBtnText);
                    $('#AddNewMessageForm').attr('action', modalProps.formUrl);
                }
            }

            function updateMessagePreview() {
                const selectedType = $('#messageType').val();
                const template = getMessageTemplate(selectedType);
                if (template) {
                    const title = $('#title').val() || template.defaultMessage.title;
                    const tagline = $('#tagline').val() || template.defaultMessage.tagline;
                    const body = $('#body').val() || template.defaultMessage.body;
                    const quotes = $('#quotes').val() || template.defaultMessage.quotes;
                    const regards = $('#regards').val() || template.defaultMessage.regards;
                    $('.messageView').html(`
                <p>${title}  ${tagline}</</p>
                <p>${body}</p>
                <blockquote>${quotes}</blockquote>
                <p> 🙏 Thanks You </p>
                <p>Best Regards</p>
                <p><em>${regards}</em></p>
                <p><strong>{{session('hostel')}}</strong></p>
            `);
                } else {
                    $('.messageView').html('<p>Please select a message type.</p>');
                }
            }

            function clearInput() {
                $('#title').val('');
                $('#tagline').val('');
                $('#body').val('');
                $('#quotes').val('');
                $('#regards').val('');
            }

            function updateInputsStatus(inputShowActions) {
                if (!inputShowActions) {
                    return;
                }!inputShowActions.title ? $(".title-box").addClass('d-none') : $(".title-box").removeClass('d-none');
                !inputShowActions.tagline ? $('.tagline-box').addClass('d-none') : $('.tagline-box').removeClass('d-none');
                !inputShowActions.body ? $('.body-box').addClass('d-none') : $('.body-box').removeClass('d-none');
                !inputShowActions.quotes ? $('.quotes-box').addClass('d-none') : $('.quotes-box').removeClass('d-none');
                !inputShowActions.regards ? $('.regards-box').addClass('d-none') : $('.regards-box').removeClass('d-none');
            }

            $('#messageType').change(function() {
                const selectedType = $(this).val();
                let title = $("#title");
                let tagline = $("#tagline");
                let body = $("#body");
                let quotes = $("#quotes");
                let regards = $("#regards");

                clearInput();
                const template = getMessageTemplate(selectedType);
                const inputShowActions = template?.inputShow;
                updateInputsStatus(inputShowActions);
                if (template) {
                    title.val(template.editableFields.title);
                    tagline.val(template.editableFields.tagline);
                    body.val(template.editableFields.body);
                    quotes.val(template.editableFields.quotes);
                    regards.val(template.editableFields.regards);
                }
                updateMessagePreview();

            });

            $("#msgManagerModalBtn").on('click', function() {
                const messageManagerModal = $("#messageManager");
                messageManagerModal.on('show.bs.modal', function() {
                    $('#messageType').trigger('change');
                }).modal('show');
            });

            $("#addMessageBtn").on('click', function() {
                prepareMessage("#finalMessage");
                $("#AddNewMessageForm").submit();
            });
            $('#AddNewMessageForm').submit(function(event) {
                $('.form-control').removeClass('is-invalid');
                $('input[name="status"]').removeClass('is-invalid');

                // Perform form validation
                var msgType = $('#messageType').val();
                var status = $('input[name="status"]:checked');
                // Check if any field is empty and add 'is-invalid' class
                if (!msgType) {
                    $('#messageType').addClass('is-invalid');
                }
                if (!status.length) {
                    $('input[name="status"]').addClass('is-invalid');
                }
                // If any field is empty, stop form submission
                if (!msgType || !status.length) {
                    event.preventDefault();
                }
            });

            $(".deleteMessageBtn").on('click', function() {
                const id = $(this).data('id');

                // Display confirmation dialog
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Delete'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Get CSRF token value
                        const csrfToken = $('meta[name="csrf-token"]').attr('content');

                        // User confirmed, send AJAX request to delete message
                        $.ajax({
                            url: "{{ route('message.manager.delete', ['id' => ':msgId']) }}".replace(':msgId', id),
                            method: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': csrfToken
                            },
                            success: function(response) {
                                Swal.fire({
                                    title: 'Deleted!',
                                    text: 'Your message has been deleted.',
                                    icon: 'success',
                                    timer: 2000, // Display the alert for 2 seconds
                                    timerProgressBar: true, // Show a progress bar
                                    showConfirmButton: false // Hide the "OK" button
                                });
                            },
                            error: function(xhr, status, error) {
                                Swal.fire({
                                    title: 'Error!',
                                    text: 'Somthing Went Wronge.',
                                    icon: 'error',
                                    timer: 2000, // Display the alert for 2 seconds
                                    timerProgressBar: true, // Show a progress bar
                                    showConfirmButton: false // Hide the "OK" button
                                });
                            }
                        });
                    }
                });
            });
            $('#messageType, #title, #tagline, #body, #quotes, #regards, #hostelName').on('input', function() {
                updateMessagePreview();
            });

            $(".updateMessage").on('click', function() {
                let message = $(this).data('message');
                let messageType = $(this).data('msgtype');
                let messageId = $(this).data('id');
                let status = $(this).data('active');
                let form = $("#AddNewMessageForm");
                form.append(`<input type="hidden" name="msgId" value="${messageId}">`)
                let updateMessageModal = $("#messageManager");
                setupModal('update');
                const template = getMessageTemplate(messageType);
                const inputShowActions = template?.inputShow;
                updateInputsStatus(inputShowActions);

                updateMessageModal.on('show.bs.modal', function() {
                    $("#messageType").val(messageType);
                    const template = message;
                    if (template) {
                        $('#title').val(template.title);
                        $('#tagline').val(template.tagline);
                        $('#body').val(template.body);
                        $('#quotes').val(template.quotes);
                        $('#regards').val(template.regards);
                    }
                    updateMessagePreview();

                    if (!status) {
                        $("#inActiveMessage").prop('checked', true);
                    } else {
                        $("#activeMessage").prop('checked', true);
                    }
                }).modal('show');
            });

            $("#updateAddMessageBtn").on('click', function() {
                $("#updateMessageForm").submit();
            });

            $("#messageManager").on('hide.bs.modal', function() {
                setupModal('insert');
                $('#AddNewMessageForm').find('input[name="msgId"]').remove();
            });

        });
    </script>
</div>
@endsection;