@extends('layout.app')
@section('title','Unit Master')

@push('header_script')
<link rel="stylesheet" href="{{asset('theme/assets/vendor/datatables/dataTables.bs5.css')}}">
<link rel="stylesheet" href="{{asset('theme/assets/vendor/datatables/dataTables.bs5-custom.css')}}">
<link rel="stylesheet" href="{{asset('theme/assets/vendor/datatables/buttons/dataTables.bs5-custom.css')}}">
<link rel="stylesheet" href="{{asset('theme/assets/sweetalert/sweet-alert.css') }}" type="text/css">
@endpush

@section('content')

<div class="app-hero-header d-flex align-items-center">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="javascript:void(0);">Master</a>
        </li>
        <li class="breadcrumb-item active">Unit Master</li>
    </ol>

    <div class="ms-auto d-lg-flex flex-row">
        <div class="d-flex flex-row gap-1">
            <a href="{{route('units.create')}}" class="btn btn-sm btn-primary">
                <i class="ri-add-circle-fill"></i> Add Unit
            </a>
        </div>
    </div>
</div>

<div class="app-body">
    <div class="row gx-3">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-body">

                    <div class="table-responsive">
                        <table id="datatable" class="table truncate m-0 align-middle">
                            <thead>
                                <tr>
                                    <th>S.no.</th>
                                    <th>Unit Name</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

@include('common.modal.unit')
@endsection

@push('footer_script')

<script src="{{asset('theme/assets/vendor/datatables/dataTables.min.js')}}"></script>
<script src="{{asset('theme/assets/vendor/datatables/dataTables.bootstrap.min.js')}}"></script>
<script src="{{asset('theme/assets/vendor/datatables/custom/custom-datatables.js')}}"></script>
<script src="{{asset('theme/assets/sweetalert/sweet-alert.min.js')}}"></script>

<script>
    var table = $('#datatable').DataTable({
        processing: true,
        serverSide: true,
        stateSave: true,
        responsive: true,
        ajax: {
            url: '{{ route('units.getData') }}',
        },
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            {data: 'name', name: 'name'},
            {data: 'status_label', name: 'status', orderable: false, searchable: false},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ]
    });

    // Redraw table after adding new unit from modal
    $(document).ready(function() {
        $('#quickUnitModal').on('hidden.bs.modal', function () {
            table.ajax.reload(null, false);
        });
    });

    function deleteIt(id) {
        swal({
                title: "Are you sure?",
                text: "You will not be able to recover this data!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: '#DD6B55',
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: "No, cancel!",
                closeOnConfirm: false,
                closeOnCancel: false,
            },
            function (isConfirm) {
                if (isConfirm) {
                    $.ajax({
                        url: '{{ url('units') }}/' + id,
                        type: 'DELETE',
                        dataType: "JSON",
                        data: {
                            "_token": "{{ csrf_token() }}"
                        },
                        success: function (response) {
                            if(response.status){
                                $("#datatable").DataTable().draw(false);
                                swal("Deleted!", "Unit deleted successfully.", "success");
                            } else {
                                swal("Error!", "Something went wrong.", "error");
                            }
                        }
                    });
                } else {
                    swal("Cancelled", "Your data is safe :)", "error");
                }
            });
    }
</script>

@endpush