@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">

            <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-3">
                <h6>Journals</h6>
                <a data-bs-toggle="modal" data-bs-target="#newJournalModal"
                   class="btn btn-primary d-flex align-items-center">
                    <i class="ti ti-book me-1"></i>New Journal
                </a>
            </div>

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

            <table class="table" id="journals-table">
                <thead>
                    <tr>
                        <th width="5%">#</th>
                        <th>Title</th>
                        <th>Slug</th>
                        <th width="25%;">Description</th>
                        <th width="10%;">ISSN</th>
                        <th width="5%">Icon</th>
                        <th width="8%;">Action</th>
                    </tr>
                </thead>
            </table>
        </div>

        <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 MODAL ================= --}}
<div class="modal fade" id="newJournalModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Journal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="addJournalForm" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Title</label>
                        <input type="text" class="form-control" name="title">
                        <span class="text-danger" id="titleError"></span>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Slug (optional)</label>
                        <input type="text" class="form-control" name="slug" placeholder="auto-generated-from-title">
                        <small class="form-text text-muted">Use lowercase letters, numbers and hyphens only.</small>
                        <span class="text-danger" id="slugError"></span>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea class="form-control" name="description" rows="3"></textarea>
                        <span class="text-danger" id="descriptionError"></span>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">ISSN</label>
                        <input type="text" class="form-control" name="issn">
                        <span class="text-danger" id="issnError"></span>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Icon</label>
                        <input type="file" class="form-control" name="icon" accept="image/*">
                        <small class="form-text text-muted">Supported formats: JPEG, PNG, JPG, GIF, SVG (Max: 2MB)</small>
                        <span class="text-danger" id="iconError"></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 MODAL ================= --}}
<div class="modal fade" id="editJournalModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Update Journal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="editJournalForm" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" id="editJournalId">
                    <div class="mb-3">
                        <label class="form-label">Title</label>
                        <input type="text" id="editTitle" class="form-control" name="title">
                        <span class="text-danger" id="edittitleError"></span>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Slug (optional)</label>
                        <input type="text" id="editSlug" class="form-control" name="slug" placeholder="auto-generated-from-title">
                        <small class="form-text text-muted">Use lowercase letters, numbers and hyphens only.</small>
                        <span class="text-danger" id="editslugError"></span>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea class="form-control" id="editDescription" name="description" rows="3"></textarea>
                        <span class="text-danger" id="editdescriptionError"></span>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">ISSN</label>
                        <input type="text" id="editIssn" class="form-control" name="issn">
                        <span class="text-danger" id="editissnError"></span>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Icon</label>
                        <div class="mb-2">
                            <img id="editIconPreview" src="" alt="Icon preview" style="display: none; width: 80px; height: 80px; border-radius: 4px; object-fit: cover;">
                        </div>
                        <input type="file" class="form-control" id="editIconInput" name="icon" accept="image/*">
                        <small class="form-text text-muted">Supported formats: JPEG, PNG, JPG, GIF, SVG (Max: 2MB)</small>
                        <span class="text-danger" id="editiconError"></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>
$(document).ready(function () {

    // Initialize DataTable ONCE
    let table = $('#journals-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('admin.journals.data') }}",
        columns: [
            { data: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'title' },
            { data: 'slug' },
            { data: 'description' },
            { data: 'issn' },
            { data: 'icon_display', orderable: false, searchable: false },
            { data: 'action', orderable: false, searchable: false }
        ]
    });

    // ================= ADD =================
    $('#addJournalForm').submit(function(e){
        e.preventDefault();
        $('#titleError').text('');
        $('#slugError').text('');
        $('#descriptionError').text('');
        $('#issnError').text('');
        $('#iconError').text('');

        var formData = new FormData(this);

        $.ajax({
            url: "{{ route('admin.journal.store') }}",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response){
                $('#newJournalModal').modal('hide');
                table.ajax.reload();
                $('#addJournalForm')[0].reset();
                showAlert(response.message);
            },
            error: function(xhr){
                if(xhr.status === 422){
                    if(xhr.responseJSON.errors.title){
                        $('#titleError').text(xhr.responseJSON.errors.title[0]);
                    }
                    if(xhr.responseJSON.errors.slug){
                        $('#slugError').text(xhr.responseJSON.errors.slug[0]);
                    }
                    if(xhr.responseJSON.errors.description){
                        $('#descriptionError').text(xhr.responseJSON.errors.description[0]);
                    }
                    if(xhr.responseJSON.errors.issn){
                        $('#issnError').text(xhr.responseJSON.errors.issn[0]);
                    }
                    if(xhr.responseJSON.errors.icon){
                        $('#iconError').text(xhr.responseJSON.errors.icon[0]);
                    }
                }
            }
        });
    });

    // ================= EDIT =================
    $('#journals-table').on('click','.editBtn',function(){
        let id = $(this).data('id');

        $.ajax({
            url: '/journal/'+id,
            type: "GET",
            success: function(data){
                $('#editJournalId').val(data.id);
                $('#editTitle').val(data.title);
                $('#editSlug').val(data.slug);
                $('#editDescription').val(data.description);
                $('#editIssn').val(data.issn);
                
                // Show icon preview if exists
                if (data.icon) {
                    $('#editIconPreview').attr('src', '/storage/' + data.icon).show();
                } else {
                    $('#editIconPreview').hide();
                }
            }
        });
    });

    $('#editJournalForm').submit(function(e){
        e.preventDefault();
        let id = $('#editJournalId').val();
        $('#edittitleError').text('');
        $('#editslugError').text('');
        $('#editdescriptionError').text('');
        $('#editissnError').text('');
        $('#editiconError').text('');

        var formData = new FormData(this);

        $.ajax({
            url: '/journal/'+id,
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response){
                $('#editJournalModal').modal('hide');
                table.ajax.reload();
                $('#editJournalForm')[0].reset();
                showAlert(response.message);
            },
            error: function(xhr){
                if(xhr.status === 422){
                    if(xhr.responseJSON.errors.title){
                        $('#edittitleError').text(xhr.responseJSON.errors.title[0]);
                    }
                    if(xhr.responseJSON.errors.slug){
                        $('#editslugError').text(xhr.responseJSON.errors.slug[0]);
                    }
                    if(xhr.responseJSON.errors.description){
                        $('#editdescriptionError').text(xhr.responseJSON.errors.description[0]);
                    }
                    if(xhr.responseJSON.errors.issn){
                        $('#editissnError').text(xhr.responseJSON.errors.issn[0]);
                    }
                    if(xhr.responseJSON.errors.icon){
                        $('#editiconError').text(xhr.responseJSON.errors.icon[0]);
                    }
                }
            }
        });
    });

    // ================= DELETE =================
    $('#journals-table').on('click','.delete-btn',function(){
        let id = $(this).data('id');

        if(confirm('Are you sure you want to delete this journal?')){
            $.ajax({
                url: '/journal/'+id,
                type: "DELETE",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response){
                    table.ajax.reload();
                    showAlert(response.message);
                }
            });
        }
    });

    // ================= ALERT =================
    function showAlert(message){
        var alertHtml = '<div class="alert alert-success alert-dismissible fade show" role="alert">'
            + message
            + '<button type="button" class="btn-close" data-bs-dismiss="alert"></button>'
            + '</div>';
        $('#alert-area').html(alertHtml);

        setTimeout(function(){
            $('#alert-area').html('');
        }, 5000);
    }
});
</script>
@endsection