@extends('backend.layout.main')

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

@section('content')
<div class="page-wrapper">
    <div class="content">

        <!-- PAGE HEADER -->
        <div class="d-md-flex page-breadcrumb mb-3">
            <div class="my-auto mb-2">
                <h2 class="mb-1">Notice Management</h2>
            </div>
            <div class="ms-auto">
                <button class="btn btn-primary"
                        data-bs-toggle="offcanvas"
                        data-bs-target="#noticeOffcanvas">
                    <i class="fa fa-plus me-2"></i> Add Notice
                </button>
            </div>
        </div>

        <!-- TABLE -->
        <div class="card mb-3">
            <div class="card-body">
                <table class="table table-bordered" id="noticeTable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Slug</th>
                            <th>File</th>
                            <th>Status</th>
                            <th width="120">Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

        <!-- OFFCANVAS -->
        <div class="offcanvas offcanvas-end" tabindex="-1" id="noticeOffcanvas">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title">Add / Update Notice</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
            </div>

            <div class="offcanvas-body">
                <form id="noticeForm" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="id" id="id">

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

                    <div class="mb-3">
                        <label>File (PDF / DOC)</label>
                        <input type="file" name="file" class="form-control">
                    </div>

                    <div class="d-flex gap-2 mt-3">
                        <button type="button"
                                class="btn btn-secondary w-50"
                                data-bs-dismiss="offcanvas">
                            Cancel
                        </button>
                        <button type="submit"
                                class="btn btn-primary w-50"
                                id="submitBtn">
                            Save
                        </button>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>
@endsection

@push('scripts')
<script>
let noticeTable;

$(document).ready(function () {

    fetchNotices();

    function initDataTable() {
        noticeTable = $('#noticeTable').DataTable({
            destroy:true,
            responsive:true,
            pageLength:10,
            dom:'Bfrtip',
            buttons:[
                {
                    extend:'collection',
                    text:'<i class="fa fa-download me-1"></i> Export',
                    className:'btn btn-primary',
                    buttons:['copy','csv','excel','pdf','print']
                },
                {
                    extend:'colvis',
                    text:'<i class="fa fa-columns me-1"></i> Columns',
                    className:'btn btn-secondary'
                }
            ]
        });
    }

    function fetchNotices() {
        $.get("{{ route('admin.notices.fetch') }}", function (res) {

            let rows = '';
            $.each(res.data, function (i, item) {
                rows += `
                <tr>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.slug}</td>
                    <td>
                        ${item.file
                            ? `<a href="/${item.file}" target="_blank" class="btn btn-sm btn-dark">View</a>`
                            : '-'}
                    </td>
                    <td class="text-center">
                        <button class="toggle-status btn btn-sm ${item.status ? 'btn-success':'btn-danger'}"
                                data-id="${item.id}">
                            ${item.status ? 'Active':'Inactive'}
                        </button>
                    </td>
                    <td>
                        <button class="btn btn-sm edit"
                                data-item='${JSON.stringify(item)}'>
                            <i class="fa fa-edit text-info"></i>
                        </button>
                        <button class="btn btn-sm delete"
                                data-id="${item.id}">
                            <i class="fa fa-trash text-danger"></i>
                        </button>
                    </td>
                </tr>`;
            });

            if ($.fn.DataTable.isDataTable('#noticeTable')) {
                noticeTable.destroy();
            }

            $('#noticeTable tbody').html(rows);
            initDataTable();
        });
    }

    // SAVE
    $('#noticeForm').submit(function (e) {
        e.preventDefault();
        let formData = new FormData(this);

        $.ajax({
            url:"{{ route('admin.notices.store') }}",
            method:"POST",
            data:formData,
            contentType:false,
            processData:false,
            success:function(res){
                toastr.success(res.message);
                $('#noticeForm')[0].reset();
                $('#id').val('');

                bootstrap.Offcanvas.getInstance(
                    document.getElementById('noticeOffcanvas')
                ).hide();

                fetchNotices();
            }
        });
    });

    // EDIT
    $(document).on('click','.edit',function(){
        let item = $(this).data('item');
        $('#id').val(item.id);
        $('#name').val(item.name);
        $('#submitBtn').text('Update');

        new bootstrap.Offcanvas('#noticeOffcanvas').show();
    });

    // DELETE
    $(document).on('click','.delete',function(){
        if(!confirm('Delete this notice?')) return;

        $.ajax({
            url:"{{ route('admin.notices.delete') }}",
            type:"DELETE",
            data:{ _token:'{{ csrf_token() }}', id:$(this).data('id') },
            success:function(res){
                toastr.success(res.message);
                fetchNotices();
            }
        });
    });

    // TOGGLE
    $(document).on('click','.toggle-status',function(){
        $.ajax({
            url:"{{ route('admin.notices.toggle') }}",
            type:"PATCH",
            data:{ _token:'{{ csrf_token() }}', id:$(this).data('id') },
            success:function(res){
                toastr.success(res.message);
                fetchNotices();
            }
        });
    });

});
</script>
@endpush