@extends('source.layouts.app')

@section('content')

<div class="main-wrapper">

    @include('source.common.header')
    @include('source.common.sidebar')

    <div class="page-wrapper">
        <div class="content">

            {{-- Page Header --}}
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-3">
                <h6>Editors</h6>
            </div>

            <div id="alert-area"></div>

            {{-- Editors Table --}}
            <table class="table" id="editors-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Contact No.</th>
                        <th>Address</th>
                        <th class="text-center">Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>

        </div>

        {{-- Footer --}}
        <div class="footer d-sm-flex align-items-center justify-content-between bg-white py-2 px-4 border-top">
            <p class="text-dark mb-0">
                &copy; {{ date('Y') }}
                <a href="javascript:void(0);" class="link-primary">C3S Publishers</a>,
                All Rights Reserved
            </p>
        </div>
    </div>

</div>


{{-- ================= ADD EDITOR MODAL ================= --}}
<div class="modal fade" id="newEditorModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Add Editor</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <form id="addEditorForm" method="POST">
                    @csrf

                    <div class="mb-3">
                        <label class="form-label">Name</label>
                        <input type="text" class="form-control" name="name">
                        <span class="text-danger" id="nameError"></span>
                    </div>

                    <div class="text-end">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="submit" class="btn btn-success">
                            Submit
                        </button>
                    </div>

                </form>
            </div>

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


{{-- ================= EDIT EDITOR MODAL ================= --}}
<div class="modal fade" id="editEditorModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Update Editor</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <form id="editEditorForm" method="POST">
                    @csrf
                    <input type="hidden" id="editEditorId">

                    <div class="mb-3">
                        <label class="form-label">Name</label>
                        <input type="text" id="editName" class="form-control" name="name">
                        <span class="text-danger" id="editnameError"></span>
                    </div>

                    <div class="text-end">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="submit" class="btn btn-success">
                            Update
                        </button>
                    </div>

                </form>
            </div>

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


{{-- ================= SCRIPTS ================= --}}
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script>
$(function () {

    let table = $('#editors-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('admin.editors.data') }}",
        columns: [
            { data: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'name' },
            { data: 'email' },
            { data: 'contactNo' },
            { data: 'address' },
            { data: 'status', orderable: false, searchable: false },
            { data: 'action', orderable: false, searchable: false }
        ]
    });


    // ================= STATUS TOGGLE =================
    $(document).on('change', '.toggle-status', function () {

        let status = $(this).is(':checked') ? 'A' : 'D';
        let id = $(this).data('id');

        $.post("{{ route('admin.editor.status.update') }}", {
            _token: "{{ csrf_token() }}",
            id: id,
            status: status
        }, function (response) {

            table.ajax.reload(null, false);

            $('#alert-area').html(`
                <div class="alert alert-success alert-dismissible fade show">
                    ${response.message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            `);

        }).fail(function () {
            alert('Error updating status.');
        });

    });


    // ================= DELETE =================
    $('#editors-table').on('click', '.delete-btn', function () {

        let id = $(this).data('id');

        if (!confirm('Are you sure you want to delete this editor?')) return;

        $.ajax({
            url: "{{ route('admin.editor.delete', ':id') }}".replace(':id', id),
            type: 'DELETE',
            data: { _token: '{{ csrf_token() }}' },

            success: function (response) {

                table.ajax.reload(null, false);

                $('#alert-area').html(`
                    <div class="alert alert-success alert-dismissible fade show">
                        ${response.message}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
                `);
            },

            error: function () {
                alert('Error deleting editor.');
            }
        });

    });

});
</script>

@endsection