@extends('layouts.app')
@push('css')
    @include('components.dataTable-style-links')
@endpush
@section('content')
    <div class="content-wrapper">
        <div class="page-header">
            <h3 class="page-title">
                <span class="page-title-icon bg-gradient-primary text-white me-2">
                    <i class="mdi mdi-cards-variant menu-icon"></i>
                </span> {{ __('Items') }}
            </h3>
            <div class="">
                <button type="button" class="btn btn-primary float-end " data-bs-toggle="modal"
                    data-bs-target="#add-modal">{{ __('Add Item') }}</button>
            </div>
        </div>
        @include('dashboard.items.table')
    </div>
    @include('dashboard.items.add-modal')
    @include('dashboard.items.edit-modal')
    @include('dashboard.items.item-units')
@endsection
@section('scripts')
    @include('components.dataTable-script-links')
    <script src="{{ asset('assets/js/pages/items.js') }}"></script>
    <script>
        $(".select2-unit-modal").select2({
            dropdownParent: $('#item-unit')
        });
        $(document).on('click', '.unit-btn', function() {
            // alert($(this).data('id'))
            $("#item-unit").modal('show');
            $("#store-unit-form").data('id', $(this).data('id'));
            // get data
            $.ajax({
                url: $(".dataTable").data('get_item_unit') + '/' + $(this).data('id'),
                method: 'GET',
                success: function(response) {
                    let original = $(".unit-item").first();
                    if (response.data.length > 0) {
                        $("#item-unit .modal-body .items").empty();
                    }

                    $.each(response.data, function(index, item) {
                        let copy = original.clone();
                        copy.find('input').val(this.count);
                        copy.find('select').val(this.unit_id);
                        if (index != 0) {
                            copy.append(`
                                    <div class="col-md-2 pt-4 mt-1">
                                        <button type="button" class="btn btn-danger remove-unit">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                              `)
                        }
                        $("#item-unit .modal-body .items").append(copy);


                    })
                }
            });

        })
        $(".add-unit").on('click', function() {
            let original = $(".unit-item").first();
            let copy = original.clone();
            copy.find('input').val('');
            copy.find('select').val('');
            copy.append(`
                <div class="col-md-2 pt-4 mt-1">
                    <button type="button" class="btn btn-danger remove-unit">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>`)
            $("#item-unit .modal-body .items").append(copy);
        })
        $(document).on('click', '.remove-unit', function() {
            $(this).closest('.unit-item').remove();
        })
        $("#store-unit-form").on('submit', function(e) {
            e.preventDefault();
            $(".is-invalid").removeClass('is-invalid')
            $(".invalid-feedback").remove()
            var formData = $(this).serialize();
            $('button[type="submit"]').prop('disabled', true);
            $.ajax({
                url: $(this).attr('action') + '/' + $("#store-unit-form").data('id'),
                method: 'POST',
                data: formData,
                success: function(response) {
                    $('button[type="submit"]').prop('disabled', false);
                    // table.ajax.reload();
                    Swal.fire({
                        title: 'success',
                        icon: 'success',
                        text: response.message,
                        timer: 2000,
                        showConfirmButton: false
                    });

                },
                error: function(xhr) {
                    $('button[type="submit"]').prop('disabled', false);
                    if (xhr.status === 422) {
                        var errors = xhr.responseJSON.errors;
                        $.each(errors, function(key, value) {
                            $('[name="' + key + '"]').addClass('is-invalid');
                            $('[name="' + key + '"]').after('<div class="invalid-feedback">' +
                                value + '</div>');
                            let newKey = key.replace('.', '[');
                            newKey = newKey.replace('.', '][') + ']';
                            $('[name="' + newKey + '"]').addClass('is-invalid');
                            $('[name="' + newKey + '"]').after(
                                '<div class="invalid-feedback">' + value + '</div>');
                        });
                    }
                }
            });
        })
        $('.select2-add-modal').attr('readonly', true);
    </script>
@endsection