@extends('app')

@section('page_title')
    Mail Folder
@endsection


@push('styles')
    <link rel="stylesheet" href="{{ elixir('css/datatables.css') }}">
{{--    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.3/css/jquery.dataTables.min.css">--}}
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.5/css/buttons.dataTables.min.css">
@endpush

@section('page_content')
    <div class="page-content container-fluid" style="margin-top: 5em;">
        <div class="row">
            <div class="col-md-12">
                <div class="panel" id="exampleWizardForm">
                    <div class="panel-heading">
                        <h3 class="panel-title mb-5">Manage Your Mail Folder
                            <span><a class="btn btn-primary mr-5 addMailFolder" title="Add New Mailing Folder" style="float: right;" id="addMailFolder" href="#"><i class="fa fa-plus"></i> Create Mail Folder</a></span>
                        </h3>

                    </div>
                    <div class="panel-body">
                        @if (\Session::has('success'))
                            <div class="alert alert-success">
                                <ul>
                                    <li>{!! \Session::get('success') !!}</li>
                                </ul>
                            </div>
                        @endif

                            <div class="deleteResponseMsg" id="deleteResponseMsg">
                            </div>

                        @if (!$mailFoldersContent)
                            <div class="alert alert-danger">
                                <ul>
                                    <li>Getting Data Failed</li>
                                </ul>
                            </div>
                        @endif

                            <table id="sendinblueAllFolders" class="display" style="width:100%">
                                <thead>
                                <tr>
                                    <th class="mx-auto text-center">#</th>
                                    <th class="mx-auto text-center">Folder Name</th>
                                    <th class="mx-auto text-center">Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($mailFoldersContent as $content)
                                <tr>
                                    <td class="mx-auto text-center">{{ $loop->iteration }}</td>
                                    <td class="mx-auto text-center">{{ $content['name'] }}</td>
                                    <td class="mx-auto text-center">
                                        <div class="btn-group btn-group-sm p-4">
                                            <form id="search-form" method="POST" action="{{ route('email.contacts.setup') }}">
                                                @csrf
                                                <input type="hidden" name="keyword" id="keyword" value="{{ $content['name'] }}">
                                                <button class="btn btn-dark mr-5" title="View all Mailing list"> <i class="fa fa-eye"></i> </button>
                                                <a class="btn btn-primary mr-5" title="Edit Mailing Folder editMailFolder" id="editMailFolder" value="{{ $content['name'] }}"  href="{{ $content['id'] }}"><i class="fa fa-pencil"></i></a>
                                                <a class="btn btn-danger ml-5"  title="Delete Mailing Folder" id="deleteMailFolder" href="{{ $content['id'] }}"><i class="fa fa-trash"></i></a>
                                            </form>

                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                                </tbody>
                            </table>

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



    <!-- Modal Create-->
    <div id="addFolderModal" class="modal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close-addFolder close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Add New Mail Folder</h4>
                </div>

                <form class="" action="" method="post" enctype="multipart/form-data" id="addMailFolderForm">
                    <div class="addResponseMsg" id="addResponseMsg">
                    </div>
                    <div class="modal-body col-12 col-md-12">
                        @csrf
                        <div class="form-group">
                            <label>Folder Name</label>
                            <input type="text" class="form-control" name="folderName" id="folderName" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary submitButton" id="submit-folder-btn">Save</button>
                        <button class="dismiss-addFolder btn btn-danger" data-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>

        </div>
    </div>


    <!-- Modal Update-->
    <div id="updateFolderModal" class="modal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close close-updateFolder" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Update Mail Folder</h4>
                </div>

                <form class="" action="" method="post" enctype="multipart/form-data" id="updateMailFolderForm">
                    <div class="responseMsg" id="responseMsg">
                    </div>
                    <div class="modal-body col-12 col-md-12">
                        @csrf
                        <div class="form-group">
                            <label>Folder Name</label>
                            <input type="hidden" name="folder_id" id="folder_id">
                            <input type="text" class="form-control" name="folder_name" id="folder_name" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary submitButton">Update</button>
                        <button class="dismiss-updateFolder btn btn-danger" data-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>

        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ elixir('js/datatables.js') }}"></script>
    <script src="/vendor/datatables/buttons.server-side.js"></script>
{{--    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>--}}
    <script src="https://cdn.datatables.net/1.13.3/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.5/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.5/js/buttons.html5.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#search-form').on('submit', function (){
                this.submit();
            })
        });
    </script>

    <script>
        $(document).ready(function () {
            // Mail Folders Datatable
            $('#sendinblueAllFolders').DataTable({
            dom: 'lBfrtip',
            buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
            ]
            });

            function disableSubmitBtn(){
                let submitBtn = $('#submit-folder-btn');
                submitBtn.attr('disabled', true);
            }

            function enableSubmitBtn(){
                let submitBtn = $('#submit-folder-btn');
                submitBtn.attr('disabled', false);
            }

            // =================================== ADD NEW MAIL FOLDER ===================================//

            // Add New Mail Folder
            $('#addMailFolder').on('click', function(e){
            e.preventDefault();
            $('#addFolderModal').show();
            })

            // Add New Mail Folder Submit Form
            $('#addMailFolderForm').on('submit', function(e){
                e.preventDefault();

                // disable button
                disableSubmitBtn();
                let folderName =  $('#folderName').val();

                $.ajax({
                    url: "{{ route('email.contacts.setup.folder.create') }}",
                    'method': 'post',
                    'data': {
                        '_token': "{{ csrf_token() }}",
                        'folderName': folderName
                    }
                }).done(response => {
                    if(response.code === 200){
                        let dom = `<div class="alert alert-success">
                            <ul>
                                <li>${response.message}</li>
                            </ul>
                        </div>`;
                        $('#addResponseMsg').html(dom)

                        setTimeout(function() {
                            location.reload();
                        }, 1000);

                    }
                    else if(response.code === 401){
                        // Enable Btn
                        enableSubmitBtn();

                        let allErrors = '';
                        $.each(response.message, function(key, errorMsg) {
                            errorMsg.forEach(err => {
                                allErrors += `<li>${err}</li>`;
                            })
                        })

                        let dom = `<div class="alert alert-danger">
                                      <ul>${allErrors}</ul>
                                   </div>`;

                        $('#addResponseMsg').html(dom)
                    }

                    else{
                        // Enable Btn
                        enableSubmitBtn();

                        let dom = `<div class="alert alert-danger">
                            <ul>
                                <li>${response.message}</li>
                            </ul>
                        </div>`;
                        $('#addResponseMsg').html(dom)

                    }
                })
            })

            // Close and Dismiss Buttons For New Mail Folder
            $(".close-addFolder, .dismiss-addFolder").click(function(e) {
            e.preventDefault();
            $("#addFolderModal").hide();
            });



            // =================================== UPDATE MAIL FOLDER ===================================//

            // Update Mail Folder
            $('#sendinblueAllFolders').on('click','#editMailFolder', function (e){
            e.preventDefault();
            let folderId = $(this).attr('href');
            let folderName = $(this).attr('value');
            $('#folder_id').val(folderId);
            $('#folder_name').val(folderName);
            $('#updateFolderModal').show();

            });

            // Update Mail Folder Submit Form
            $('#updateMailFolderForm').on('submit', function(e){
                e.preventDefault();
                let folderId = $('#folder_id').val();
                let folderName =  $('#folder_name').val();

                $.ajax({
                    url: "{{ route('email.contacts.setup.folder.update','id') }}".replace('id',folderId),
                    'method': 'post',
                    'data': {
                        '_token': "{{ csrf_token() }}",
                        'folderId': folderId,
                        'folderName': folderName
                    }
                }).done(response => {
                    if(response.code === 200){
                        let dom = `<div class="alert alert-success">
                        <ul>
                            <li>${response.message}</li>
                        </ul>
                    </div>`;
                        $('#responseMsg').html(dom)

                        setTimeout(function() {
                            location.reload();
                        }, 1000);

                    }
                    else if(response.code === 401){
                        let allErrors = '';
                        $.each(response.message, function(key, errorMsg) {
                            errorMsg.forEach(err => {
                                allErrors += `<li>${err}</li>`;
                            })
                        })

                        let dom = `<div class="alert alert-danger">
                                      <ul>${allErrors}</ul>
                                   </div>`;

                        $('#responseMsg').html(dom)
                    }

                    else{
                        let dom = `<div class="alert alert-danger">
                        <ul>
                            <li>${response.message}</li>
                        </ul>
                    </div>`;
                        $('#responseMsg').html(dom)

                    }
                })
            })

            // Close and Dismiss Buttons For Update Mail Folder
            $(".close-updateFolder, .dismiss-updateFolder").click(function(e) {
            e.preventDefault();
            $("#updateFolderModal").hide();
            });



            // =================================== DELETE MAIL FOLDER ===================================//

            // Delete Mail Folder
            $('#sendinblueAllFolders').on('click','#deleteMailFolder', function (e){
                e.preventDefault();
                let folderId = $(this).attr('href');

                if (confirm('Are you sure you want to delete this record?')) {

                    console.log(' SURE DELETING THIS RECORD ');

                    $.ajax({
                        url: "{{ route('email.contacts.setup.folder.delete','id') }}".replace('id', folderId),
                        'method': 'post',
                        'data': {
                            '_token': "{{ csrf_token() }}",
                            'folderId': folderId
                        }
                    }).done(response => {
                        if (response.code === 200) {
                            let dom = `<div class="alert alert-success">
                            <ul>
                                <li>${response.message}</li>
                            </ul>
                        </div>`;

                            location.reload();
                            $('#deleteResponseMsg').html(dom)

                        } else {
                            let dom = `<div class="alert alert-danger">
                            <ul>
                                <li>${response.message}</li>
                            </ul>
                        </div>`;
                            $('#deleteResponseMsg').html(dom)

                        }
                    })

                }

            });



         });

    </script>



{{--    <script>--}}
{{--        const table = $('#mailinglist-table');--}}
{{--        setInterval(function () {--}}
{{--            table.DataTable().ajax.reload();--}}
{{--        }, 20000);--}}
{{--    </script>--}}
@endpush