@extends('admin.layouts.masterlayout')

@section('title', 'Edit Inventory')

@section('Css')
<link href="{{ asset('assets/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('head_title', "Inventory Management")

@section('content')
<div class="dashboard-body-content">
    <div class="dashboard-breadcrumb-section">
        <h2>Edit Inventory</h2>
        <p> <a href="{{ route('admin.inventoryManagement') }}">Inventory Management </a>/ Edit Inventory</p>
    </div>
    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif
    <form id="update_inventory" action="{{route('admin.updateInventory',$inventory->id)}}" method="post">
        @csrf
        <div class="row">
            <div class="col-xxl-7 col-lg-12 mb-lg-0 ">
                <div class="ct-admin-container mb-4">
                    <div class="card">
                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                            <div class="card-title mb-0">
                                <h2>Inventory Item </h2>
                            </div>
                        </div>
                        <div class="card-body ">
                            <div class="mb-4">
                                <label for="shop_id">Shop<span class="required-star">*</span></label>
                                <div class="auth-input-position">
                                    <select class="form-control" id="shop_id" name="shop_id" disabled>
                                        <option value="">Select a Shop</option>
                                        @foreach($shops as $shop)
                                        <option value="{{ $shop->id }}" {{  old('shop_id', $inventory->shop_id) == $shop->id ? 'selected' : '' }}>
                                            {{ $shop->shop_name }}
                                        </option>
                                        @endforeach
                                    </select>
                                    <div class="auth-input-icon">
                                        <img src="{{asset('assets/img/dashboard/Shop.png')}}" alt="">
                                    </div>
                                </div>
                                <div class="shop_id_error"></div>
                            </div>
                            <div class="w-100">
                                <div class="row">
                                    <div class="col-md-12 mb-4">
                                        <label for="shop_id">Item<span class="required-star">*</span></label>
                                        <div class="auth-input-position">
                                            <select class="form-control" id="item_id" name="item_id" disabled>
                                                <option value="">Select a Item</option>
                                                @foreach($inventory_items as $item)
                                                <option value="{{ $item->id }}" {{  old('item', $inventory->item_id) == $item->id ? 'selected' : '' }}>
                                                    {{ $item->name }}
                                                </option>
                                                @endforeach
                                            </select>
                                            <div class="auth-input-icon">
                                                <img src="{{asset('assets/img/dashboard/Shop.png')}}" alt="">
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="w-100">
                                <div class="row">
                                    <div class="col-md-12 mb-4">
                                        <div class="w-100 d-flex align-items-end gap-3">
                                            <div class="w-100 flex-1">
                                                <label for="role">Stock Quantity<span class="required-star">*</span></label>
                                                <div class="auth-input-position">
                                                    <input type="text" id="stock_quantity" name="stock_quantity" placeholder="00" class="form-control" value="{{ $inventory->stock_quantity }}" disabled>
                                                    <div class="auth-input-icon">
                                                        <img src="{{ asset('assets/img/shop-icon.png') }}" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="d-flex gap-3">
                                                <div class="add-icon plus_icon">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"
                                                        viewBox="0 0 26 26" fill="none">
                                                        <path
                                                            d="M19.5 13.3125H6.5C6.33198 13.3125 6.1875 13.168 6.1875 13C6.1875 12.832 6.33198 12.6875 6.5 12.6875H19.5C19.668 12.6875 19.8125 12.832 19.8125 13C19.8125 13.168 19.668 13.3125 19.5 13.3125Z"
                                                            fill="#4D4B4B" stroke="#4D4B4B" />
                                                        <path
                                                            d="M13 19.8125C12.832 19.8125 12.6875 19.668 12.6875 19.5V6.5C12.6875 6.33198 12.832 6.1875 13 6.1875C13.168 6.1875 13.3125 6.33198 13.3125 6.5V19.5C13.3125 19.668 13.168 19.8125 13 19.8125Z"
                                                            fill="#4D4B4B" stroke="#4D4B4B" />
                                                    </svg>
                                                </div>
                                                <div class="add-icon minius_icon">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"
                                                        viewBox="0 0 24 24">
                                                        <path fill="#000" d="M19 13H5v-2h14z" />
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- Dynamic Add Stock input --}}
                                        <div id="add_stock_wrapper" class="mt-3" style="display: none;">
                                            <label for="add_stock">Add Stock<span class="required-star">*</span></label>
                                            <div class="auth-input-position">
                                                <input type="number" min="1" class="form-control" id="add_stock" name="add_stock" placeholder="Add Stock" />
                                                <div class="auth-input-icon">
                                                    <img src="{{ asset('assets/img/shop-icon.png') }}" alt="">
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Dynamic Minus Stock input --}}
                                        <div id="minus_stock_wrapper" class="mt-3" style="display: none;">
                                            <label for="minus_stock">Minus Stock<span class="required-star">*</span></label>
                                            <div class="auth-input-position">
                                                <input type="number" min="1" class="form-control" id="minus_stock" name="minus_stock" placeholder="Minus Stock" />
                                                <div class="auth-input-icon">
                                                    <img src="{{ asset('assets/img/shop-icon.png') }}" alt="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-4">
                                <label for="role">Supplier Name<span class="required-star">*</span></label>
                                <div class="auth-input-position">
                                    <input type="text" id="supplier_name" name="supplier_name" placeholder="Enter Supplier Name" class="form-control" value="{{ $inventory->supplier_name }}">
                                    <div class="auth-input-icon">
                                        <img src="{{ asset('assets/img/role-icon.png') }}" alt="">
                                    </div>
                                </div>
                            </div>

                            <div class="mb-4">
                                <label for="notes">Add Extra Notes<span class="required-star">*</span></label>
                                <div class="auth-input-position">
                                    <textarea class="form-control " id="extra_note" name="extra_note"
                                        placeholder="Enter Your Extra Notes...">{{$inventory->extra_note}}</textarea>
                                    <div class="auth-input-icon">
                                        <img src="{{asset('assets/img/dashboard/edit.png')}}" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex gap-3 submit-container">
                    <a href="{{ route('admin.inventoryManagement') }}" class="ct-outline-btn text-center">Cancel</a>
                    <button type="submit" class="ct-btn add_inventory_btn"> <span>Save</span> </button>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@section('script')
<script src="{{ asset('assets/js/select2.min.js') }}"></script>
<script>
    $(document).ready(function() {
        $("#shop_id").select2();
        $("#update_inventory").validate({
            rules: {
                item_id: {
                    required: true,
                },
                // stock_quantity: {
                //     required: true,
                //     digits: true
                // },
                supplier_name: {
                    required: true,
                },
                shop_id: {
                    required: true,
                },
                extra_note: {
                    required: true,
                },
                add_stock: {
                    required: function () {
                        return $("#add_stock_wrapper").is(":visible");
                    },
                    digits: true,
                    min: 1
                },
                minus_stock: {
                    required: function () {
                        return $("#minus_stock_wrapper").is(":visible");
                    },
                    digits: true,
                    min: 1,
                    max: function () {
                        let currentStock = parseInt($("#stock_quantity").val());
                        return currentStock;
                    }
                }
            },
            messages: {
                minus_stock: {
                    max: "Cannot reduce more than current stock."
                }
            },
            errorPlacement: function(error, element) {
                if (element.attr("name") == "shop_id") {
                    $(".shop_id_error").html(error);
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {
                $('.add_inventory_btn').attr('disabled', true).addClass('loader-active');
                form.submit();
            }
        });

        // Show only one input at a time
        $(".plus_icon").on("click", function() {
            $("#minus_stock_wrapper").slideUp(); // hide minus field
            $("#minus_stock").val(""); // clear minus value

            $("#add_stock_wrapper").slideToggle(); // toggle add field
            if (!$("#add_stock_wrapper").is(":visible")) {
                $("#add_stock").val(""); // clear if hidden after toggle
            }
        });

        $(".minius_icon").on("click", function() {
            $("#add_stock_wrapper").slideUp(); // hide add field
            $("#add_stock").val(""); // clear add value

            $("#minus_stock_wrapper").slideToggle(); // toggle minus field
            if (!$("#minus_stock_wrapper").is(":visible")) {
                $("#minus_stock").val(""); // clear if hidden after toggle
            }
        });
    });
</script>
@endsection