@extends('backend.layout.main')

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

@section('content')

<style>
    .note-editor,
    .note-dropdown-menu {
        z-index: 2055 !important;
    }
</style>

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

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

        <!-- TABLE -->
        <div class="card">
            <div class="card-body table-responsive">
                <table class="table table-bordered" id="actTable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Title</th>
                            <th>Year</th>
                            <th>Category</th>
                            <th>Sub Category</th>
                            <th>Status</th>
                            <th width="120">Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

        <!-- OFFCANVAS : ADD / EDIT -->
        <div class="offcanvas offcanvas-end" id="actOffcanvas">
            <div class="offcanvas-header">
                <h5>Add / Update Act</h5>
                <button class="btn-close" data-bs-dismiss="offcanvas"></button>
            </div>

            <div class="offcanvas-body">
                <form id="actForm">
                    @csrf
                    <input type="hidden" name="id" id="id">

                    <div class="mb-2">
                        <label>Act Title</label>
                        <input type="text" name="title" id="title" class="form-control">
                    </div>

                    <div class="mb-2">
                        <label>Year</label>
                        <input type="text" name="year" id="year" class="form-control">
                    </div>

                    <div class="mb-2">
                        <label>Act Category</label>
                        <select name="act_cate_id" id="act_cate_id" class="form-control">
                            <option value="">Select Category</option>
                            @foreach($actCategories as $cat)
                                <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-2">
                        <label>Sub Act Category</label>
                        <select name="sub_act_cate_id" id="sub_act_cate_id" class="form-control">
                            <option value="">Select Sub Category</option>
                            @foreach($subCategories as $sub)
                                <option value="{{ $sub->id }}">{{ $sub->state }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label>SC Judgements</label>
                        <textarea name="sc_judgements" id="sc_judgements"></textarea>
                    </div>

                    <div class="mb-3">
                        <label>Description</label>
                        <textarea name="description" id="description"></textarea>
                    </div>

                    <button class="btn btn-primary w-100" id="submitBtn">
                        Save
                    </button>
                </form>
            </div>
        </div>

    </div>
</div>

<!-- VIEW MODAL -->
<div class="modal fade" id="actViewModal">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5>Act Details</h5>
                <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <h5 id="v_title"></h5>
                <p><b>Year:</b> <span id="v_year"></span></p>
                <p><b>Category:</b> <span id="v_category"></span></p>
                <p><b>Sub Category:</b> <span id="v_sub"></span></p>
                <hr>
                <div id="v_sc"></div>
                <hr>
                <div id="v_desc"></div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

<script>
let table;
let offcanvasEl = document.getElementById('actOffcanvas');

$(document).ready(function () {

    $('#sc_judgements, #description').summernote({
        height: 180,
        dialogsInBody: true,
        dropdownParent: $('#actOffcanvas')
    });

    loadActs();

    function loadActs() {
        $.get("{{ route('admin.acts.fetch') }}", function (res) {

            let rows = '';
            $.each(res.data, function (i, d) {

                rows += `
                <tr>
                    <td>${i+1}</td>
                    <td>${d.title ?? '-'}</td>
                    <td>${d.year ?? '-'}</td>
                    <td>${d.act_category?.name ?? '-'}</td>
                    <td>${d.act_sub_category?.state ?? '-'}</td>
                    <td>
                        <button class="btn btn-sm toggle ${d.status ? 'btn-success' : 'btn-danger'}" data-id="${d.id}">
                            ${d.status ? 'Active' : 'Inactive'}
                        </button>
                    </td>
                    <td>
                        <button class="btn btn-sm view" data-id="${d.id}">
                            <i class="fa fa-eye"></i>
                        </button>
                        <button class="btn btn-sm edit" data-id="${d.id}">
                            <i class="fa fa-edit"></i>
                        </button>
                        <button class="btn btn-sm delete" data-id="${d.id}">
                            <i class="fa fa-trash"></i>
                        </button>
                    </td>
                </tr>`;
            });

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

            $('#actTable tbody').html(rows);
            table = $('#actTable').DataTable();
        });
    }

    // STORE
    $('#actForm').submit(function (e) {
        e.preventDefault();

        $.post("{{ route('admin.acts.store') }}", $(this).serialize(), function (res) {
            toastr.success(res.message);
            $('#actForm')[0].reset();
            $('#sc_judgements, #description').summernote('reset');
            bootstrap.Offcanvas.getInstance(offcanvasEl).hide();
            loadActs();
        });
    });

    // EDIT
    $(document).on('click', '.edit', function () {

        $.post("{{ route('admin.acts.edit') }}", {
            _token: '{{ csrf_token() }}',
            id: $(this).data('id')
        }, function (res) {

            let d = res.data;
            let canvas = new bootstrap.Offcanvas(offcanvasEl);
            canvas.show();

            setTimeout(() => {
                $('#id').val(d.id);
                $('#title').val(d.title);
                $('#year').val(d.year);
                $('#act_cate_id').val(d.act_cate_id);
                $('#sub_act_cate_id').val(d.sub_act_cate_id);
                $('#sc_judgements').summernote('code', d.sc_judgements ?? '');
                $('#description').summernote('code', d.description ?? '');
                $('#submitBtn').text('Update');
            }, 200);
        });
    });

    // DELETE
    $(document).on('click', '.delete', function () {

        if (!confirm('Delete?')) return;

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

    // TOGGLE STATUS
    $(document).on('click', '.toggle', function () {

        $.ajax({
            url: "{{ route('admin.acts.toggle') }}",
            type: "PATCH",
            data: {
                _token: '{{ csrf_token() }}',
                id: $(this).data('id')
            },
            success: function (res) {
                toastr.success(res.message);
                loadActs();
            }
        });
    });

    // VIEW
    $(document).on('click', '.view', function () {

        $.post("{{ route('admin.acts.edit') }}", {
            _token: '{{ csrf_token() }}',
            id: $(this).data('id')
        }, function (res) {

            let d = res.data;
            $('#v_title').text(d.title);
            $('#v_year').text(d.year);
            $('#v_category').text(d.act_category?.name);
            $('#v_sub').text(d.act_sub_category?.state);
            $('#v_sc').html(d.sc_judgements);
            $('#v_desc').html(d.description);

            new bootstrap.Modal('#actViewModal').show();
        });
    });

});
</script>
@endpush