@extends('layouts.app')

@section('title', 'Mailboxes Management')

@push('styles')
<style>
    .badge { font-size: 0.85em; }
    .table th { border-top: none; }
    .protocol-badge { font-size: 0.75em; }
</style>
@endpush

@section('content')
<div class="loadPages01">

    <div class="actionsHeader filterHeader">
        <ul class="ml-auto">
            @can('mailbox.create')
            <li>
                <button data-toggle="modal" data-target="#addMailboxModal" class="btn btn-block btn-add">
                    <i class="las la-plus"></i> Add New Mailbox
                </button>
            </li>
            @endcan
        </ul>
    </div>
   
    <div class="card card-body card-dashboard-twentyfive border-left-0 border-right-0 px-0 pd-t-6 pd-b-6 viewContainer">
        <div class="table-responsive">
            <table id="mailboxesTable" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Username</th>
                        <th>Protocol</th>
                        <th>Host</th>
                        <th>Port</th>
                        <th>Queue</th>
                        <th>Status</th>
                        <th>Created At</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- DataTable will load data here -->
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Add Mailbox Modal -->
@push('modals')
<div class="modal fade" id="addMailboxModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Mailbox</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="addMailboxForm" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Name <span class="asterisk">*</span></label>
                                <input type="text" class="form-control" name="name" required 
                                       placeholder="Enter mailbox name">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Username (Email) <span class="asterisk">*</span></label>
                                <input type="email" class="form-control" name="username" required 
                                       placeholder="Enter email address">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Password <span class="asterisk">*</span></label>
                                <input type="password" class="form-control" name="password" required 
                                       placeholder="Enter password">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Queue <span class="asterisk">*</span></label>
                                <select class="form-control select2" name="queue_id" required>
                                    <option value="">Select Queue</option>
                                    @foreach($queues as $queue)
                                        <option value="{{ $queue->id }}">{{ $queue->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Protocol <span class="asterisk">*</span></label>
                                <select class="form-control" name="protocol" required>
                                    <option value="imap">IMAP</option>
                                    <option value="pop3">POP3</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Encryption <span class="asterisk">*</span></label>
                                <select class="form-control" name="encryption" required>
                                    <option value="ssl">SSL</option>
                                    <option value="tls">TLS</option>
                                    <option value="starttls">STARTTLS</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Validate Certificate <span class="asterisk">*</span></label>
                                <select class="form-control" name="validate_cert" required>
                                    <option value="1">Yes</option>
                                    <option value="0">No</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Host <span class="asterisk">*</span></label>
                                <input type="text" class="form-control" name="host" required 
                                       placeholder="e.g., mail.example.com">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Port <span class="asterisk">*</span></label>
                                <input type="number" class="form-control" name="port" required 
                                       placeholder="e.g., 993">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Sync Interval (Minutes) <span class="asterisk">*</span></label>
                                <input type="number" class="form-control" name="sync_interval" required 
                                       value="5" min="1">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Status <span class="asterisk">*</span></label>
                        <select class="form-control" name="status" required>
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="btn_save">
                        <i class="las la-save"></i> Save
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Mailbox Modal -->
<div class="modal fade" id="editMailboxModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Mailbox</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="editMailboxForm" method="POST">
                @csrf
                @method('PUT')
                <input type="hidden" name="id" id="edit_mailbox_id">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Name <span class="asterisk">*</span></label>
                                <input type="text" class="form-control" name="name" id="edit_name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Username (Email) <span class="asterisk">*</span></label>
                                <input type="email" class="form-control" name="username" id="edit_username" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Password <span class="asterisk">*</span></label>
                                <input type="password" class="form-control" name="password" id="edit_password" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Queue <span class="asterisk">*</span></label>
                                <select class="form-control select2" name="queue_id" id="edit_queue_id" required>
                                    <option value="">Select Queue</option>
                                    @foreach($queues as $queue)
                                        <option value="{{ $queue->id }}">{{ $queue->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Protocol <span class="asterisk">*</span></label>
                                <select class="form-control" name="protocol" id="edit_protocol" required>
                                    <option value="imap">IMAP</option>
                                    <option value="pop3">POP3</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Encryption <span class="asterisk">*</span></label>
                                <select class="form-control" name="encryption" id="edit_encryption" required>
                                    <option value="ssl">SSL</option>
                                    <option value="tls">TLS</option>
                                    <option value="starttls">STARTTLS</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Validate Certificate <span class="asterisk">*</span></label>
                                <select class="form-control" name="validate_cert" id="edit_validate_cert" required>
                                    <option value="1">Yes</option>
                                    <option value="0">No</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Host <span class="asterisk">*</span></label>
                                <input type="text" class="form-control" name="host" id="edit_host" required>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Port <span class="asterisk">*</span></label>
                                <input type="number" class="form-control" name="port" id="edit_port" required>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Sync Interval (Minutes) <span class="asterisk">*</span></label>
                                <input type="number" class="form-control" name="sync_interval" id="edit_sync_interval" required min="1">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Status <span class="asterisk">*</span></label>
                        <select class="form-control" name="status" id="edit_status" required>
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="btn_update">
                        <i class="las la-save"></i> Update
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endpush
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Initialize DataTable
    var errorShown = false;
    var table = $('#mailboxesTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('masters.mailbox.index') }}", // Updated route name
            type: "GET",
            error: function(xhr, error, thrown) {
                if (errorShown) return;
                errorShown = true;

                if (xhr.status === 403) {
                    toastr.error(xhr.responseJSON?.message || 'Access denied: No permission');
                    table.clear().draw();
                    setTimeout(() => { errorShown = false; }, 5000);
                } else if (xhr.status === 401) {
                    toastr.error('Please login to access this page.');
                    window.location.href = "{{ route('admin.login') }}";
                } else if (xhr.status === 500) {
                    toastr.error('Server error. Please try again later.');
                    setTimeout(() => { errorShown = false; }, 10000);
                } else {
                    toastr.error('Failed to load table data.');
                    setTimeout(() => { errorShown = false; }, 5000);
                }
            }
        },
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'name', name: 'name' },
            { data: 'username', name: 'username' },
            { 
                data: 'protocol', 
                name: 'protocol',
                render: function(data) {
                    return '<span class="badge badge-info protocol-badge">' + data.toUpperCase() + '</span>';
                }
            },
            { data: 'host', name: 'host' },
            { data: 'port', name: 'port' },
            { data: 'queue_id', name: 'queue_id' },
            { data: 'status', name: 'status' },
            { data: 'created_at', name: 'created_at' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ],
        order: [[1, 'asc']]
    });

    // Add Mailbox Form Submission
    $('#addMailboxForm').on('submit', function(e) {
        e.preventDefault();
        $('#loaderStatus').text('Starting saving...');
        $('#refreshLoader').removeClass('d-none');
        
        $.ajax({
            url: "{{ route('masters.mailbox.store') }}", // Updated route name
            method: "POST",
            beforeSend: function() {
                $('#btn_save').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Saving...');
            },
            data: $(this).serialize(),
            success: function(response) {
                if (response.status) {
                    $('#addMailboxModal').modal('hide');
                    $('#addMailboxForm')[0].reset();
                    $('select[name="queue_id"]').val(null).trigger('change');
                    table.ajax.reload();
                    toastr.success(response.message);
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                if (xhr.status === 403) {
                    const response = xhr.responseJSON;
                    toastr.error(response?.message || 'You do not have permission.');
                } else if (xhr.status === 401) {
                    toastr.error('Please login to continue.');
                    window.location.href = "{{ route('admin.login') }}";
                } else if (xhr.status === 404) {
                    toastr.error('Mailbox not found.');
                } else if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    $.each(errors, function(key, value) {
                        toastr.error(value[0]);
                    });
                } else {
                    toastr.error('An error occurred while saving data.');
                }
            },
            complete: function() {
                $('#btn_save').prop('disabled', false).html('<i class="las la-save"></i> Save');
                setTimeout(() => {
                    $('#refreshLoader').addClass('d-none');
                }, 1000);
            }
        });
    });

    // Edit Mailbox - Show Modal
    $(document).on('click', '.btn-edit-mailbox', function() {
        var mailboxId = $(this).data('id');
        
        $.ajax({
            url: "{{ route('masters.mailbox.edit') }}", // Updated route name
            method: "GET",
            data: { id: mailboxId },
            success: function(response) {
                if (response.status) {
                    $('#edit_mailbox_id').val(mailboxId);
                    $('#edit_name').val(response.data.name);
                    $('#edit_username').val(response.data.username);
                    $('#edit_password').val(response.data.password);
                    $('#edit_queue_id').val(response.data.queue_id).trigger('change');
                    $('#edit_protocol').val(response.data.protocol);
                    $('#edit_encryption').val(response.data.encryption);
                    $('#edit_validate_cert').val(response.data.validate_cert ? '1' : '0');
                    $('#edit_host').val(response.data.host);
                    $('#edit_port').val(response.data.port);
                    $('#edit_sync_interval').val(response.data.sync_interval);
                    $('#edit_status').val(response.data.status ? '1' : '0');
                    
                    $('#editMailboxModal').modal('show');
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                if (xhr.status === 403) {
                    const response = xhr.responseJSON;
                    toastr.error(response?.message || 'You do not have permission.');
                } else if (xhr.status === 401) {
                    toastr.error('Please login to continue.');
                    window.location.href = "{{ route('admin.login') }}";
                } else if (xhr.status === 404) {
                    toastr.error('Mailbox not found.');
                } else if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    $.each(errors, function(key, value) {
                        toastr.error(value[0]);
                    });
                } else {
                    toastr.error('An error occurred while loading data.');
                }
            },
        });
    });

    // Edit Mailbox Form Submission
    $('#editMailboxForm').on('submit', function(e) {
        e.preventDefault();
        $('#loaderStatus').text('Starting saving...');
        $('#refreshLoader').removeClass('d-none');
        
        $.ajax({
            url: "{{ route('masters.mailbox.update') }}", // Updated route name
            method: "POST",
            data: $(this).serialize(),
            beforeSend: function() {
                $('#btn_update').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Saving...');
            },
            success: function(response) {
                if (response.status) {
                    $('#editMailboxModal').modal('hide');
                    table.ajax.reload();
                    toastr.success(response.message);
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                if (xhr.status === 403) {
                    const response = xhr.responseJSON;
                    toastr.error(response?.message || 'You do not have permission.');
                } else if (xhr.status === 401) {
                    toastr.error('Please login to continue.');
                    window.location.href = "{{ route('admin.login') }}";
                } else if (xhr.status === 404) {
                    toastr.error('Mailbox not found.');
                } else if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    $.each(errors, function(key, value) {
                        toastr.error(value[0]);
                    });
                } else {
                    toastr.error('An error occurred while saving data.');
                }
            },
            complete: function() {
                $('#btn_update').prop('disabled', false).html('<i class="las la-save"></i> Update');
                setTimeout(() => {
                    $('#refreshLoader').addClass('d-none');
                }, 1000);
            }
        });
    });

    // Delete Mailbox
   // Delete Mailbox - BETTER APPROACH
$(document).on('click', '.btn-delete-mailbox', function() {
    var mailboxId = $(this).data('id');
    
    swal({
        title: "Are you sure?",
        text: "Do you really want to delete this mailbox?",
        icon: "warning",
        buttons: true,
        dangerMode: true,
    }).then((willDelete) => {
        if (willDelete) {
            $.ajax({
                url: "{{ route('masters.mailbox.delete', ':id') }}".replace(':id', mailboxId),
                type: "DELETE",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: mailboxId
                },
                success: function(response) {
                    if (response.status) {
                        toastr.success(response.message);
                        table.ajax.reload();
                    } else {
                        toastr.warning(response.message);
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 403) {
                        const response = xhr.responseJSON;
                        toastr.error(response?.message || 'You do not have permission.');
                    } else if (xhr.status === 401) {
                        toastr.error('Please login to continue.');
                        window.location.href = "{{ route('admin.login') }}";
                    } else if (xhr.status === 404) {
                        toastr.error('Mailbox not found.');
                    } else if (xhr.status === 422) {
                        const errors = xhr.responseJSON.errors;
                        $.each(errors, function(key, value) {
                            toastr.error(value[0]);
                        });
                    } else {
                        toastr.error('An error occurred while deleting data.');
                    }
                }
            });
        }
    });
});
});
</script>
@endpush