@extends('backend.master')
@section('title', 'Editorial Board')

@section('backend_content')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap4.min.css">
    <style>
        #boardTable .btn i.feather {
            width: 18px !important;
            height: 18px !important;
        }

        #boardTable .btn {
            padding: 5px 8px !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
    </style>

    <div class="container-fluid">
        <div class="row page-title clearfix">
            <div class="page-title-left">
                <h6 class="page-title-heading mr-0 mr-r-5">Editorial Board</h6>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="widget-list">
            <div class="widget-bg">
                <div class="widget-heading widget-heading-border d-flex justify-content-between align-items-center">
                    <h5 class="widget-title">Board Members</h5>

                    @can('create Editorial Board')
                        <button class="btn btn-primary btn-sm" onclick="showAddModal()">
                            <i class="feather feather-plus"></i> Add Member
                        </button>
                    @endcan
                </div>
                <div class="widget-body table-responsive">
                    <table id="boardTable" class="table table-striped table-bordered text-center w-100 align-middle">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Photo</th>
                                <th>Name</th>
                                <th>Category</th>
                                <th>Designation</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Modals -->
    <div class="modal fade" id="memberModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">Add Member</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <form id="memberForm" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" id="member_id" name="member_id">

                        <div class="row">
                            <div class="col-md-6 form-group">
                                <label>Category</label>
                                <select name="category_id" id="category_id" class="form-control" required>
                                    <option value="">Select Category</option>
                                    @foreach($categories as $cat)
                                        <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>Name</label>
                                <input type="text" class="form-control" id="name" name="name" required>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>Qualifications (e.g., MBBS, MD)</label>
                                <input type="text" class="form-control" id="qualifications" name="qualifications">
                            </div>
                            <div class="col-md-6 form-group">
                                <label>Designation (e.g., Vice-Chancellor)</label>
                                <input type="text" class="form-control" id="designation" name="designation">
                            </div>
                            <div class="col-md-6 form-group">
                                <label>Department (e.g., Dept of Hepatology)</label>
                                <input type="text" class="form-control" id="department" name="department">
                            </div>
                            <div class="col-md-6 form-group">
                                <label>Institution</label>
                                <input type="text" class="form-control" id="institution" name="institution">
                            </div>
                            <div class="col-md-6 form-group">
                                <label>Country</label>
                                <input type="text" class="form-control" id="country" name="country">
                            </div>
                            <div class="col-md-6 form-group">
                                <label>Email</label>
                                <input type="text" class="form-control" id="email" name="email">
                            </div>
                            <div class="col-md-12 form-group">
                                <label>Research Interest</label>
                                <textarea class="form-control" id="research_interest" name="research_interest"
                                    rows="2"></textarea>
                            </div>
                            <div class="col-md-4 form-group">
                                <label>ORCID Link</label>
                                <input type="url" class="form-control" id="orcid_link" name="orcid_link">
                            </div>
                            <div class="col-md-4 form-group">
                                <label>Research Gate Link</label>
                                <input type="url" class="form-control" id="research_gate_link" name="research_gate_link">
                            </div>
                            <div class="col-md-4 form-group">
                                <label>Google Scholar Link</label>
                                <input type="url" class="form-control" id="google_scholar_link" name="google_scholar_link">
                            </div>
                            <div class="col-md-6 form-group">
                                <label>Photo</label>
                                <input type="file" class="form-control" id="photo" name="photo" accept="image/*">
                                <div id="imagePreview" class="mt-2"></div>
                            </div>
                            <div class="col-md-6 form-group">
                                <label class="d-block">Status</label>
                                <input type="hidden" name="status" value="0">
                                <div class="custom-control custom-switch custom-control-inline">
                                    <input type="checkbox" class="custom-control-input" id="statusToggle" name="status"
                                        value="1" checked>
                                    <label class="custom-control-label" for="statusToggle">Active</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" id="saveBtn">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Delete Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content text-center">
                <div class="modal-body pt-4">
                    <i class="feather feather-alert-circle text-danger mb-3" style="font-size: 50px;"></i>
                    <h4>Are you sure?</h4><input type="hidden" id="delete_id">
                </div>
                <div class="modal-footer justify-content-center">
                    <button class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button class="btn btn-danger" id="confirmDeleteBtn">Delete</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap4.min.js"></script>
    <script>
        $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

        var table = $('#boardTable').DataTable({
            processing: true, serverSide: true,
            ajax: "{{ route('admin.editorial_board.fetch') }}",
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false },
                { data: 'photo', name: 'photo', orderable: false },
                { data: 'name', name: 'name' },
                { data: 'category', name: 'category' },
                { data: 'designation', name: 'designation' },
                { data: 'status', name: 'status', orderable: false },
                { data: 'action', name: 'action', orderable: false }
            ],
            drawCallback: function () { if (typeof feather !== 'undefined') feather.replace(); }
        });

        function fetchTable() { table.ajax.reload(null, false); }

        function showAddModal() {
            $('#memberForm')[0].reset();
            $('#member_id').val('');
            $('#imagePreview').html('');
            $('#statusToggle').prop('checked', true);
            $('#modalTitle').text('Add Member');
            $('#memberModal').modal('show');
        }

        function editMember(id) {
            $.get("/admin/editorial-board/" + id + "/edit", function (res) {
                $('#modalTitle').text('Edit Member');
                $('#member_id').val(res.member.id);
                $('#category_id').val(res.member.category_id);
                $('#name').val(res.member.name);
                $('#qualifications').val(res.member.qualifications);
                $('#designation').val(res.member.designation);
                $('#department').val(res.member.department);
                $('#institution').val(res.member.institution);
                $('#country').val(res.member.country);
                $('#email').val(res.member.email);
                $('#research_interest').val(res.member.research_interest);
                $('#orcid_link').val(res.member.orcid_link);
                $('#research_gate_link').val(res.member.research_gate_link);
                $('#google_scholar_link').val(res.member.google_scholar_link);

                $('#statusToggle').prop('checked', res.member.status == '1');
                $('#imagePreview').html(res.member.photo ? '<img src="/' + res.member.photo + '" width="60" style="border-radius:4px;">' : '');
                $('#memberModal').modal('show');
            });
        }

        $('#memberForm').submit(function (e) {
            e.preventDefault();
            $.ajax({
                type: "POST", url: "{{ route('admin.editorial_board.store') }}",
                data: new FormData(this), contentType: false, processData: false,
                success: function (res) {
                    $('#memberModal').modal('hide');
                    fetchTable(); toastr.success(res.success);
                }
            });
        });

        function confirmDelete(id) { $('#delete_id').val(id); $('#deleteModal').modal('show'); }
        $('#confirmDeleteBtn').click(function () {
            $.ajax({
                type: "DELETE", url: "/admin/editorial-board/" + $('#delete_id').val(),
                success: function (res) { $('#deleteModal').modal('hide'); fetchTable(); toastr.success(res.success); }
            });
        });
    </script>
@endsection