@extends('layouts.app')

@section('stitle', 'Item Category')
@section('title', 'Item Category')

@section('content')
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper container-xxl p-0">


            <div class="content-header row">
                <div class="content-header-left col-md-6 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <h2 class="content-header-title float-left mb-0">@yield('title')</h2>
                        </div>
                    </div>
                </div>

            </div>
            <div class="content-body">

                <!-- Table Hover Animation start -->
                <div class="row" id="table-hover-animation">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4 col-12">
                                        <div class="form-group">
                                            <label>Name:</label>
                                            <input type="text" class="form-control" disabled value="{{ $categoryItem->name }}" />
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-12">
                                        <div class="form-group">
                                            <label>Category:</label>
                                            <input type="text" class="form-control" disabled value="{{ $categoryItem->category }}" />
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-12">
                                        <div class="form-group">
                                            <label>Stock Product:</label>
                                            <input type="text" class="form-control" disabled value="{{ $categoryItem->stock_product }}" />
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- tag section -->
                <div class="content-header row mt-2">
                    <div class="content-header-left col-md-6 col-12 mb-2">
                        <div class="row breadcrumbs-top">
                            <div class="col-12">
                                <h5 class=" float-left mb-0 pt-1">Tags</h5>
                            </div>
                        </div>
                    </div>
                    <div class="content-header-right text-md-right col-md-6 col-12 d-md-block d-none">
                        <div class="form-group breadcrumb-right mb-1">
                            <button class="btn btn-primary waves-effect waves-float waves-light" type="button"
                                    data-toggle="modal" data-target="#tag">Edit Tags
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <span class="badge bg-secondary">testbranch</span>
                    </div>
                </div>

                <!-- Modifiers -->
                <div class="content-header row mt-3">
                    <div class="content-header-left col-md-6 col-12 mb-2">
                        <div class="row breadcrumbs-top">
                            <div class="col-12">
                                <h5 class=" float-left mb-0 pt-1">Modifiers</h5>
                            </div>
                        </div>
                    </div>
                    <div class="content-header-right text-md-right col-md-6 col-12 d-md-block d-none">
                        <div class="form-group breadcrumb-right mb-1">
                            <button class="btn btn-primary waves-effect waves-float waves-light" type="button"
                                    data-toggle="modal" data-target="#">Copy Modifiers
                            </button>
                            <button class="btn btn-primary waves-effect waves-float waves-light" type="button"
                                    data-toggle="modal" data-target="#">Add Modifiers
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class=" text-center">
                        <table class="invoice-list-table table">
                            <thead>
                            <tr align="center">
                                <th>Name</th>
                                <th>Minimum Options</th>
                                <th>Maximum Options</th>
                                <th>Free Options</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr align="center">
                                <td>سمبوسه سائل</td>
                                <td>1</td>
                                <td>1</td>
                                <td>0</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- Ingredients -->
                <div class="content-header row mt-3">
                    <div class="content-header-left col-md-6 col-12 mb-2">
                        <div class="row breadcrumbs-top">
                            <div class="col-12">
                                <h5 class=" float-left mb-0 pt-1">Ingredients</h5>
                            </div>
                        </div>
                    </div>
                    <div id="addIngDiv" class="content-header-right text-md-right col-md-6 col-12 d-md-block d-none">
                        <div class="form-group breadcrumb-right mb-1">
                            <button class="btn btn-primary waves-effect waves-float waves-light" type="button"
                                    data-toggle="modal" data-target="#">Edit Quantities
                            </button>
                            <button class="getIng btn btn-primary waves-effect waves-float waves-light" type="button"
                                    data-toggle="modal" data-target="#addIngredient">Add Ingredient
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <form class="a-form">
                        <table id="IngData" class="invoice-list-table table prowdata_ing">
                            <thead>
                            <tr>
                                <th>Name</th>
                                <th>SKU</th>
                                <th>Quantities</th>
                                <th>Applies On</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($getIngredient as $ing)
                                <tr>
                                    <td>{{ $ing->name }}</td>
                                    <td>{{ $ing->sku }}</td>
                                    <td>
                                        <div class="input-group input-group-sm" style="max-width: 160px;">
                                            <input type="text" class="form-control" name="ing[{{ $ing->pingid }}]"
                                                   value="{{ $ing->qty }}"/>
                                            <div class="input-group-append">
                                                <span class="input-group-text">{{ $ing->ingredient_unit }}</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td><span class="badge bg-secondary mr-1">Dine In</span><span
                                            class="badge bg-secondary mr-1">Pick Up</span><span
                                            class="badge bg-secondary mr-1">Delivery</span><span
                                            class="badge bg-secondary mr-1">Drive Thru</span></td>
                                    <td class="text-right">
                                        <button id="{{ $ing->pingid }}" class="btn btn-sm btn-danger removeItemPro">
                                            Remove
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </form>
                </div>
                <div class="row ingUpdate">
                    <div class="col-10"></div>
                    <div class="col-2 text-right">
                        <button class="btn btn-success allIngUpdate">Update</button>
                    </div>
                </div>
                <!-- Custom Price -->
                <div class="content-header row mt-3">
                    <div class="content-header-left col-md-6 col-12 mb-2">
                        <div class="row breadcrumbs-top">
                            <div class="col-12">
                                <h5 class=" float-left mb-0 pt-1">Custom Price</h5>
                            </div>
                        </div>
                    </div>
                    <div class="content-header-right text-md-right col-md-6 col-12 d-md-block d-none">
                        <div class="form-group breadcrumb-right mb-1">
                            <button class="btn btn-primary waves-effect waves-float waves-light" type="button"
                                    data-toggle="modal" data-target="#">Select Branch
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body text-center">
                        <h5>No data to display!</h5>
                    </div>
                </div>
                <!-- Inactive In Branches -->
                <div class="content-header row mt-3">
                    <div class="content-header-left col-md-6 col-12 mb-2">
                        <div class="row breadcrumbs-top">
                            <div class="col-12">
                                <h5 class=" float-left mb-0 pt-1">Inactive In Branches</h5>
                            </div>
                        </div>
                    </div>
                    <div class="content-header-right text-md-right col-md-6 col-12 d-md-block d-none">
                        <div class="form-group breadcrumb-right mb-1">
                            <button class="btn btn-primary waves-effect waves-float waves-light" type="button"
                                    data-toggle="modal" data-target="#">Select Branch
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body text-center">
                        <h5>No data to display!</h5>
                    </div>
                </div>
                <!-- Out Of Stock -->
                <div class="content-header row mt-3">
                    <div class="content-header-left col-md-6 col-12 mb-2">
                        <div class="row breadcrumbs-top">
                            <div class="col-12">
                                <h5 class=" float-left mb-0 pt-1">Out Of Stock</h5>
                            </div>
                        </div>
                    </div>
                    <div class="content-header-right text-md-right col-md-6 col-12 d-md-block d-none">
                        <div class="form-group breadcrumb-right mb-1">
                            <button class="btn btn-primary waves-effect waves-float waves-light" type="button"
                                    data-toggle="modal" data-target="#">Select Branch
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body text-center">
                        <h5>No data to display!</h5>
                    </div>
                </div>
                <!-- Group -->
                <div class="content-header row mt-3">
                    <div class="content-header-left col-md-6 col-12 mb-2">
                        <div class="row breadcrumbs-top">
                            <div class="col-12">
                                <h5 class=" float-left mb-0 pt-1">Groups</h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body text-center">
                        <h5>No data to display!</h5>
                    </div>
                </div>
                <!-- Timed Events -->
                <div class="content-header row mt-3">
                    <div class="content-header-left col-md-6 col-12 mb-2">
                        <div class="row breadcrumbs-top">
                            <div class="col-12">
                                <h5 class=" float-left mb-0 pt-1">Timed Events</h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body text-center">
                        <h5>No data to display!</h5>
                    </div>
                </div>

                <!-- tag mode -->
                <div class="modal-size-sm d-inline-block">
                    <!-- Modal -->
                    <div class="modal fade text-left" id="addIngredient" tabindex="-1" role="dialog"
                         aria-labelledby="myModalLabel17" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
                            <div class="modal-content">
                                {{--                            <form class="add_ingredient_form"  action="{{ route('product.add_ingredient') }}" method="POST">--}}
                                {{--                                @csrf--}}
                                <div class="modal-header">
                                    <h4 class="modal-title" id="myModalLabel17">Add Ingredients</h4>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="form-group">
                                                <label>Select Ingredients:</label>
                                                <select id="addIngre"
                                                        class="select2 add_ingredient form-control form-control-lg"
                                                        name="add_ingredient[]" multiple required>
                                                    @foreach($items as $item)
                                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                    @endforeach
                                                </select>
                                                <input type="hidden" class="product_id" name="product_id"
                                                       value="{{ $product->id }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="addIng btn btn-primary">Submit</button>
                                </div>
                                {{--                            </form>--}}
                            </div>
                        </div>
                    </div>
                </div>

                @endsection
@push('my_scripts')
<script>
                    ingUpdate(1);

                    function ingUpdate(rowCountNum) {
                        var rowCount = $('.prowdata_ing tr').length;
                        if (rowCount > rowCountNum) {
                            $('.ingUpdate').show();
                        } else {
                            $('.ingUpdate').hide();
                        }
                    }

                    $("#addIngDiv").on("click", ".getIng", function (e) {
                        e.preventDefault();
                        var pId = $(".product_id").val();
                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $('input[name="_token"]').val()
                            }
                        });
                        $.ajax({
                            type: 'POST',
                            url: "{{ route('product.get_ingredient') }}",
                            data: {pId: pId},
                            success: function (data) {
                                $("#addIngre").empty();
                                $.each(data, function (key, value) {
                                    $("#addIngre").append('<option value="' + key + '">' + value + '</option>');
                                });
                            }
                        });
                    });
                    $("#addIngredient").on("click", ".addIng", function (e) {
                        e.preventDefault();
                        var itemIds = $(".add_ingredient").val();
                        var pId = $(".product_id").val();
                        if (itemIds != '') {
                            $.ajaxSetup({
                                headers: {
                                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                                }
                            });
                            $.ajax({
                                type: 'POST',
                                url: "{{ route('product.add_ingredient') }}",
                                data: {itemIds: itemIds, pId: pId},
                                success: function (data) {
                                    $('.prowdata_ing tbody').append(data.table_data);
                                    $('#addIngredient').modal('hide');
                                    ingUpdate(1);
                                }
                            });
                        } else {
                            Swal.fire({
                                title: 'Error!',
                                text: 'Select Ingredients',
                                icon: 'error',
                                customClass: {
                                    confirmButton: 'btn btn-primary'
                                },
                                showClass: {
                                    popup: 'animate__animated animate__shakeX'
                                },
                                buttonsStyling: false
                            });
                        }
                    });

                    $(".prowdata_ing").on("click", ".removeItemPro", function (e) {
                        e.preventDefault();
                        let id = this.id;
                        let selectedTr = $(this).closest('tr');
                        confirmationDelete(id, '{{ route('product.remove_ingredient') }}', selectedTr, 'yes', 1);
                    });

                    $(".ingUpdate").on("click", ".allIngUpdate", function (e) {
                        e.preventDefault();
                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $('input[name="_token"]').val()
                            }
                        });
                        $.ajax({
                            type: 'POST',
                            url: "{{ route('product.update_ingredient') }}",
                            data: $('form.a-form').serializeArray(),
                            success: function (data) {
                                Swal.fire({
                                    position: 'bottom-end',
                                    icon: 'success',
                                    title: 'Ingredient has been saved',
                                    showConfirmButton: false,
                                    timer: 1500,
                                    customClass: {
                                        confirmButton: 'btn btn-primary'
                                    },
                                    buttonsStyling: false
                                });
                            }
                        });
                    });

                </script>

@endpush