/home/awneajlw/www/safeeyesjewelers.com/resources/views/admin/inventoryCategory/index.blade.php
@include('admin.component.header')
@include('admin.component.topnav')
@include('admin.component.navbar')

<div class="content-body">
    <div class="container-fluid mt-3">

        {{-- Inventory Category Card --}}
        <div class="row">
            <div class="col-lg-3 col-sm-6">
                <div class="card gradient-1">
                    <div class="card-body">
                        <h3 class="card-title text-white">{{ __('SE.inventory_category') }}</h3>
                        <div class="d-inline-block">
                            <h2 class="text-white">{{ @$inventoryCategory }}</h2>
                        </div>
                        <span class="float-right display-5 opacity-5"><i class="fa fa-users"></i></span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Inventory Category Table --}}
        <div class="row mt-4">
            <div class="col">
                <div class="card" style="overflow:auto; width:100% !important;">
                    <div class="card-header">
                        <div class="col-md-12" style="background:white; display:flex; justify-content:space-between; flex-wrap:wrap;">
                            <p style="margin-top: 14px;">
                                <i class="fa fa-user"></i>
                                <button class="btn btn-sm btn-info ml-2 my-3 add" type="button">{{ __('SE.add') }}</button>
                            </p>

                            <form id="filter-form" style="display:flex; align-items:center; flex-wrap:nowrap;">
                                <input type="date" id="from_date" name="from_date" class="form-control me-2" style="width:40%;">
                                <span class="me-2">-</span>
                                <input type="date" id="to_date" name="to_date" class="form-control me-2" style="width:40%;">
                                <button type="submit" class="btn btn-primary" style="padding:9px;"><i class="fas fa-check"></i></button>
                            </form>
                        </div>
                    </div>

                    <div class="card-body" v-cloak>
                        @if (session()->has('message'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <strong>{{ __('SE.success') }}</strong> &nbsp;
                                {{ session()->get('message') }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif

                        <div class="table-responsive">
                            <table class="table table-hover inventory-Category-listing table-listing table-hover" style="width:100%;">
                                <thead>
                                    <tr>
                                        <th>{{ __('SE.id') }}</th>
                                        <th>{{ __('SE.name') }}</th>
                                        <th>{{ __('SE.description') }}</th>
                                        <th>{{ __('SE.created_at') }}</th>
                                        <th>{{ __('SE.action') }}</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Add Inventory Modal --}}
        <div class="modal fade" id="addinventoryCategory" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-md" role="document">
                <div class="modal-content">
                    <div class="modal-header d-flex justify-content-between">
                        <h5 class="modal-title text-dark">{{ __('SE.add') }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body text-dark">
                        <form id="addinventoryCategoryForm" enctype="multipart/form-data">
                            <input type="hidden" name="branch_id" value="{{ Auth::user()->branch_id }}">
                            <div id="sending-message" class="text-danger fw-bold"></div>
                            <div class="form-group">
                                <label>{{ __('SE.name') }}</label>
                                <input type="text" name="name" class="form-control" required>
                                <label>{{ __('SE.description') }}</label>
                                <input type="text" name="description" class="form-control" required>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary">{{ __('SE.add') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        {{-- Edit Inventory Modal --}}
        <div class="modal fade" id="editinventoryCategory" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-md" role="document">
                <div class="modal-content">
                    <div class="modal-header d-flex justify-content-between">
                        <h5 class="modal-title text-dark">{{ __('SE.edit') }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body text-dark">
                        <div id="update-message" class="text-danger fw-bold"></div>
                        <form id="editinventoryCategoryForm">
                            <input type="hidden" name="inventoryCategoryId" id="inventoryCategory_id">
                            <input type="hidden" name="branch_id" value="{{ Auth::user()->branch_id }}">
                            <div class="form-group">
                                <label>{{ __('SE.name') }}</label>
                                <input type="text" name="update_name" id="update_name" class="form-control" required>
                                <label>{{ __('SE.description') }}</label>
                                <input type="text" name="update_description" id="update_description" class="form-control" required>
                            </div>
                            <button type="submit" class="btn btn-primary float-lg-right" id="updateBtn">{{ __('SE.submit') }}</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

@include('admin.component.footer')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap4.min.css">

<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap4.min.js"></script>

<script>
$(document).ready(function() {

    // Initialize DataTable
    var table = $('.inventory-Category-listing').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ url('/inventoryCategory-list') }}",
            data: function(d) {
                d.from_date = $('#from_date').val();
                d.to_date = $('#to_date').val();
            }
        },
        columns: [
            { data: 'id', name: 'id' },
            { data: 'name', name: 'name' },
            { data: 'description', name: 'description' },
            { data: 'created_by', name: 'created_by' },
            { data: 'action', name: 'action', orderable: false, searchable: false },
        ],
        order: [[0, 'desc']],
    });

    // Filter by date
    $('#filter-form').on('submit', function(e) {
        e.preventDefault();
        table.ajax.reload();
    });

    // Open Add Modal
    $('.add').click(function() {
        $('#addinventoryCategory').modal('show');
    });

    // Add Inventory
    $('#addinventoryCategoryForm').submit(function(e) {
        e.preventDefault();
        var formData = new FormData(this);
        $('#sending-message').text('Processing...');
        $.ajax({
            url: "{{ url('/add-inventoryCategory') }}",
            type: "POST",
            headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                $('#sending-message').text(response.success || 'Added successfully!');
                table.ajax.reload();
            },
            error: function(xhr) {
                $('#sending-message').text('Error occurred. Please try again.');
            },
            complete: function() {
                $('#addinventoryCategory').modal('hide');
                $('#sending-message').text('');
            }
        });
    });

    // Open Edit Modal
    $(document).on('click', '.edit', function() {
        var id = $(this).val();
        $.ajax({
            url: "edit-inventoryCategory/" + id,
            type: "GET",
            success: function(response) {
                $('#inventoryCategory_id').val(response.inventoryCategory.id);
                $('#update_name').val(response.inventoryCategory.name);
                $('#update_description').val(response.inventoryCategory.description);
                $('#editinventoryCategory').modal('show');
            }
        });
    });

    // Update Inventory
    $('#editinventoryCategoryForm').submit(function(e) {
        e.preventDefault();
        var data = {
            _token: '{{ csrf_token() }}',
            inventoryCategoryId: $('#inventoryCategory_id').val(),
            name: $('#update_name').val(),
            update_description: $('#update_description').val()
        };
        $('#update-message').text('Processing...');
        $.post("{{ url('/update-inventoryCategory') }}", data, function(response) {
            $('#update-message').text('Updated successfully!');
            table.ajax.reload();
        }).fail(function(xhr) {
            $('#update-message').text('Error occurred: ' + xhr.responseText);
        }).always(function() {
            $('#editinventoryCategory').modal('hide');
            $('#update-message').text('');
        });
    });

});
</script>