@extends('backend.layout.main')

@section('title','Act Details 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">Act Details Management</h2>
            </div>
            <div class="ms-auto">
                <button class="btn btn-primary"
                        data-bs-toggle="offcanvas"
                        data-bs-target="#actDetailOffcanvas">
                    <i class="fa fa-plus me-2"></i> Add Act Detail
                </button>
            </div>
        </div>

        <!-- TABLE -->
        <div class="card mb-3">
            <div class="card-body">
                <table class="table table-bordered" id="detailTable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Act</th>
                            <th>State</th>
                            <th>Created Date</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="actDetailOffcanvas">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title">Add / Update Act Detail</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
            </div>

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

                    <div class="mb-3">
                        <label>Act</label>
                        <select name="act_id" id="act_id" class="form-control">
                            <option value="">Select Act</option>
                            @foreach($acts as $act)
                                <option value="{{ $act->id }}">{{ $act->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label>Sub-Act Name</label>
                          <input type="text"  class="form-control" name="state" id="state" /> 
                    </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 detailTable;

$(document).ready(function () {

    fetchDetails();

    function initDataTable() {
        detailTable = $('#detailTable').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 fetchDetails() {
        $.get("{{ route('admin.actdetails.fetch') }}", function (res) {

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

                let createdDate = new Date(item.created_at)
                    .toLocaleDateString('en-GB',{
                        day:'2-digit',
                        month:'short',
                        year:'numeric'
                    }).replace(',', '');

                rows += `
                <tr>
                    <td>${item.id}</td>
                    <td>${item.category?.name ?? ''}</td>
                    <td>${item.state}</td>
                    <td>${createdDate}</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('#detailTable')) {
                detailTable.destroy();
            }

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

    // SAVE / UPDATE
    $('#detailForm').submit(function (e) {
        e.preventDefault();

        $.post("{{ route('admin.actdetails.store') }}",
            $(this).serialize(),
            function (res) {
                toastr.success(res.message);
                resetForm();

                let canvas = document.getElementById('actDetailOffcanvas');
                bootstrap.Offcanvas.getInstance(canvas).hide();

                fetchDetails();
            }
        );
    });

    // EDIT
    $(document).on('click', '.edit', function () {
        let item = $(this).data('item');

        $('#id').val(item.id);
        $('#act_id').val(item.act_id);
        $('#state').val(item.state);
        $('#submitBtn').text('Update');

        let canvas = new bootstrap.Offcanvas('#actDetailOffcanvas');
        canvas.show();
    });

    function resetForm() {
        $('#detailForm')[0].reset();
        $('#id').val('');
        $('#submitBtn').text('Save');
    }

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

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

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

});
</script>
@endpush