@extends('admin.layouts.layouts')

@section('title', 'Size Master')

@section('content')
    <div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true"
        data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createModalLabel">Create Size</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="createForm" action="javascript:void(0)" method="POST" enctype="multipart/form-data"
                    autocomplete="off">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="name" class="form-label">Name <span class="text-danger">*</span></label>
                                    <input type="text" name="name" id="name" class="form-control"
                                        placeholder="Enter Size Name">
                                    <span class="invalid-feedback" id="name-error"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a class="btn btn-primary" id="saveBtn">Save</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Edit Modal --}}
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true"
        data-backdrop="static">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editModalLabel">Edit Size</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="editForm" action="javascript:void(0)" method="POST" enctype="multipart/form-data"
                    autocomplete="off">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="id" id="id">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="name" class="form-label">Name <span class="text-danger">*</span></label>
                                    <input type="text" name="name" id="name" class="form-control"
                                        placeholder="Enter Size Name">
                                    <span class="invalid-feedback" id="name-error"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a class="btn btn-primary" id="updateBtn">Update</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="page-header">
        <h3 class="page-title">
            Size Master
        </h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Size Master</li>
            </ol>
        </nav>
    </div>
    <div class="card">
        <div class="card-header">
            <div class="d-flex justify-content-end align-items-center">
                @can('size-master-create')
                    <a class="btn btn-primary" id="createBtn">Create</a>
                @endcan
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-12">
                    <div class="table-responsive">
                        <table id="size-master-table" class="table w-100">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Created At</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script type="text/javascript">
        // load data when page is loaded
        $(document).ready(function() {
            loadData();
        });

        // Load data in the table
        function loadData() {
            $('#size-master-table').DataTable({
                "processing": true,
                "serverSide": true,
                "searching": false,
                "destroy": true,
                "order": [
                    [1, "ASC"]
                ],
                "ajax": {
                    url: "{{ route('size-master.load') }}",
                    method: "GET",
                },
                "columnDefs": [{
                    "orderable": false,
                    "targets": [0, 2, 3, 4]
                }],
            });
        }

        // Open create form
        $('#createBtn').click(function() {
            $('#createModal').modal('show');
            resetCreateForm();
        });

        // Reset create form
        function resetCreateForm() {
            $('#createForm').trigger('reset');
            $('#createForm').find('#name')
                .removeClass('is-invalid')
                .next('.invalid-feedback')
                .text('');
        }

        // Store product type
        $('#saveBtn').on('click', function() {
            var formData = $('#createModal #createForm').serialize();
            var name = $('#createForm #name').val();

            if (!name) {
                $('#createForm').find('#name')
                    .addClass('is-invalid')
                    .next('.invalid-feedback')
                    .text('The name field is required!');
            } else {
                $.ajax({
                    type: 'POST',
                    url: "{{ route('size-master.store') }}",
                    data: formData,
                    success: function(data) {
                        if (data.success === true) {
                            toastr.success(data.message);
                            $('#size-master-table').DataTable().destroy();
                            loadData();
                        } else {
                            toastr.error(data.message);
                        }
                        resetCreateForm();
                        $('#createModal').modal('hide');
                    },
                    error: function(xhr, status, error) {
                        var errors = xhr.responseJSON.errors;
                        $.each(errors, function(key, value) {
                            $("#createForm #" + key + "-error").text(value);
                            $("#createForm #" + key).addClass('is-invalid');
                        });
                    }
                });
            }
        });

        // Open edit form
        $(document).on('click', '.edit-btn', function() {
            resetUpdateForm();
            $('#editForm #id').val($(this).data('id'));
            $('#editForm #name').val($(this).data('name'));
            $('#editModal').modal('show');
        });

        // Reset update form
        function resetUpdateForm() {
            $('#editForm').trigger('reset');
            $('#editForm').find('#name')
                .removeClass('is-invalid')
                .next('.invalid-feedback')
                .text('');
        }

        // Update product type
        $('#updateBtn').on('click', function() {
            let updateURL = "{{ route('size-master.update', 'id:') }}";
            updateURL = updateURL.replace('id:', $('#editForm #id').val());
            var formData = $('#editModal #editForm').serialize();
            var name = $('#editForm #name').val();

            if (!name) {
                $('#editForm').find('#name')
                    .addClass('is-invalid')
                    .next('.invalid-feedback')
                    .text('The name field is required!');
            } else {
                $.ajax({
                    type: 'POST',
                    url: updateURL,
                    data: formData,
                    success: function(data) {
                        if (data.success === true) {
                            toastr.success(data.message);
                            $('#size-master-table').DataTable().destroy();
                            loadData();
                        } else {
                            toastr.error(data.message);
                        }
                        resetUpdateForm();
                        $('#editModal').modal('hide');
                    },
                    error: function(xhr, status, error) {
                        var errors = xhr.responseJSON.errors;
                        $.each(errors, function(key, value) {
                            $("#editForm #" + key + "-error").text(value);
                            $("#editForm #" + key).addClass('is-invalid');
                        });
                    }
                });
            }
        });

        // Change status of size
        $(document).on('click', '.change-status', function() {
            const $button = $(this);
            const id = $button.data('id');
            const newStatus = $button.data('status') == 1 ? 0 : 1;
            $button.prop('disabled', true);

            $.ajax({
                type: 'POST',
                url: "{{ route('size-master.status') }}",
                data: {
                    "_token": '{{ csrf_token() }}',
                    "id": id,
                    "status": newStatus,
                },
                success: function(response) {
                    if (response.success === true) {
                        toastr.success(response.message);
                    } else {
                        toastr.error(response.message);
                    }
                    $('#size-master-table').DataTable().destroy();
                    loadData();
                }
            });
        });
    </script>
@endsection