@extends('layouts.app')
@section('title')
    PRODUCT EDIT
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('product.index') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
    <style>
        .tooltip-arrow {
            display: none !important;
            width: 0px !important;
            height: 0px !important;

        }

        .tooltip-inner {
            display: none !important;
            width: 0px !important;
            height: 0px !important;
        }
        .text-white{
            font-weight: normal;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('assets/vendor/daterange/daterange.css') }}" />

    <div class="card">
        <form method="post" action="{{ route('product.update', $product->id) }}">
            @csrf
            <div class="card-body">
                <h5>Product Details</h5>
                <div class="row">
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="rev_no">Rev No.</label>
                            <div class="col-6">
                                <input type="text" class="form-control rounded-4" id="rev_no" name="rev_no"
                                    placeholder="Enter Rev No." value="{{ $product->rev_no }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="part_no">Part No.</label>
                            <div class="col-6">
                                <input type="text" class="form-control rounded-4" id="part_no" name="part_no"
                                    placeholder="Enter Part No." value="{{ $product->part_no }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="part_name">Part Name</label>
                            <div class="col-6">
                                <input type="text" class="form-control rounded-4" id="part_name" name="part_name"
                                    placeholder="Enter Part Name" value="{{ $product->part_name }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="type_of_product">Type of Product</label>
                            <div class="col-6">
                                <select class="form-select" id="type_of_product" name="type_of_product" style="width: 100% !important;">
                                        <option value="{{ $product->type_of_product ?? '' }}" selected>
                                            {{ $product->type_of_products->type ?? '' }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="model">Model</label>
                            <div class="col-6">
                                <input type="text" class="form-control rounded-4" id="model" name="model"
                                    placeholder="Enter Model" value="{{ $product->model }}">
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="variance">Variance</label>
                            <div class="col-6">
                                <input type="text" class="form-control rounded-4" id="variance" name="variance"
                                    placeholder="Enter Variance" value="{{ $product->variance }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="label_color">Label Color</label>
                            <div class="col-6">
                                <input type="text" class="form-control rounded-4" id="label_color" name="label_color"
                                    placeholder="Enter Lable-color" value="{{ $product->label_color }}">
                            </div>
                        </div>
                    </div>


                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="moq">MOQ</label>
                            <div class="col-6">
                                <input type="number" class="form-control rounded-4" id="moq" name="moq" min="0"
                                    placeholder="Enter MOQ" value="{{ $product->moq }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="unit">UOM</label>
                            <div class="col-6">
                                <select class="form-select" id="uom" name="uom" style="width: 100% !important;">
                                    <option value="{{ $product->uom }}" selected>
                                        {{ $product->units->name ?? '' }}</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="part_weight">Part Weight</label>
                            <div class="col-6">
                                <input type="number" class="form-control rounded-4" id="numberInput" name="part_weight"
                                    placeholder="Enter Part Weight" value="{{ $product->part_weight }}"
                                    id="numberInput">
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="abc3" class="form-label col-4">Project Start Date</label>
                            {{-- @dd($product->project_start_date) --}}
                            <div class="col-6">
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="bi bi-calendar4"></i>
                                </span>
                                <input type="text" id="abc3" name="project_start_date"
                                    value="{{ $product->project_start_date }}" class="form-control datepicker">
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
                <h5>Wire Detail (Additional)</h5>
                <div class="row">
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="kanbon_no">Kanban No</label>
                            <div class="col-6">
                                <input type="text" class="form-control rounded-4" id="kanbon_no" name="kanbon_no"
                                    placeholder="Enter Kanban Name" value="{{ $product->kanbon_no }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="size">Size</label>
                            <div class="col-6">
                                <input type="text" class="form-control rounded-4" id="size" name="size"
                                    placeholder="Enter Part Size" value="{{ $product->size }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="type">Type</label>
                            <div class="col-6">
                                <input type="text" class="form-control rounded-4" id="type" name="type"
                                    placeholder="Enter Type" value="{{ $product->type }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="color">Color</label>
                            <div class="col-6">
                                <input type="text" class="form-control rounded-4" id="color" name="color"
                                    placeholder="Enter Color" value="{{ $product->color }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="wire_spec">Wire Spec</label>
                            <div class="col-6">
                                <input type="text" class="form-control rounded-4" id="wire_spec" name="wire_spec"
                                    placeholder="Enter Wire Spec" value="{{ $product->wire_spec }}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-5">
                    <div class="col-lg-3 col-sm-4 col-12">
                        <div class="mb-3 d-flex">
                            <label class="form-label col-4 me-2" for="customer_supplier">Customer</label>
                            <div class="d-flex align-items-center">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="customer_supplier"
                                        name="customer_supplier" @checked($product->customer_supplier)
                                        value="1">
                                    <label class="form-check-label" for="customer_supplier"></label>
                                </div>
                            </div>
                            <label class="form-label col-4" for="customer_supplier">Supplier</label>
                        </div>
                    </div>
                </div>
                <div class="row mt-5">
                    <h5>Customer Detail</h5>
                </div>
                <div class="row customer_row @if ($product->customer_supplier) d-none @endif">
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="customer_name">Customer Name</label>
                            <div class="col-6">
                                <select class="form-select ms-2 w-100" id="customer_name" style="width: 100% !important;"
                                    name="customer_name">
                                    <option value="{{ $product->customer_name }}" selected>
                                        {{ $product->customers->name ?? ''}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="selling_price" class="form-label col-4">Selling Price</label>
                            <div class="col-6">
                                <input type="number" name="selling_price" min="0" value="{{ $product->selling_price }}"
                                    id="selling_price" class="form-control rounded-4 ">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="customer_product_code">Customer Product Code</label>
                            <div class="col-6">
                                <input type="text" class="form-control rounded-4" id="customer_product_code"
                                    name="customer_product_code" placeholder="Enter Customer Product Code"
                                    value="{{ $product->customer_product_code }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="moq_remarks">MOQ remarks</label>
                            <div class="col-6">
                                <input type="text" class="form-control rounded-4"  min="0" id="moq_remarks" name="moq_remarks"
                                    placeholder="Enter Moq Remarks" value="{{ $product->moq_remarks }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 col-sm-12 col-12 mt-3">
                        <div class="row align-items-center">
                        <label class="form-label col-2" for="shipping_location">Shipping Location</label>
                        <div class="col-9">
                        {{-- @dd($product->shipping_location) --}}
                            <select class="form-select" id="shipping_location_cust" name="shipping_location" style="width: 100% !important;">
                            <option value="" disabled selected>Select Shipping Location</option>

                            @if (isset($shipping_location))
                                @foreach ($shipping_location as $item)
                                    <option value="{{ $item->id }}" @selected($product->shipping_location == $item->id)>
                                        {{ $item->shipping_location }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>
                    </div>
                </div>

                <div class="row supplier_row @if (!$product->customer_supplier) d-none @endif">
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="supplier_name">Supplier Name</label>
                            <div class="col-6">
                                <select class="form-select ms-2 w-100" id="supplier_name" style="width: 100% !important;"
                                    name="supplier_name">
                                    <option value="{{ $product->supplier_name }}" selected>
                                        {{ $product->suppliers->name ?? '' }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="supplier_product_code">Supplier Product Code</label>
                            <div class="col-6">
                                <input type="text" class="form-control rounded-4" id="supplier_product_code"
                                    name="supplier_product_code" placeholder="Enter Supplier Product Code"
                                    value="{{ $product->supplier_product_code }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="lead_time">Lead Time (Weeks)</label>
                            <div class="col-6">
                                <input type="number" class="form-control rounded-4" id="lead_time" name="lead_time"
                                    placeholder="Enter Lead Time" value="{{ $product->lead_time }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="price" class="form-label col-4">Purchase Price</label>
                            <div class="col-6">
                                <input type="number" name="purchase_price" value="{{ $product->purchase_price }}"
                                    id="purchase_price" class="form-control rounded-4 decimal">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="moq_remarks_s">MOQ Remarks</label>
                            <div class="col-6">
                                <input type="text" class="form-control rounded-4" id="moq_remarks_s" name="moq_remarks_s"
                                    placeholder="Enter Moq Remarks" value="{{ $product->moq_remarks }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 col-sm-12 col-12 mt-3">
                        <div class="row align-items-center">
                        <label class="form-label col-2" for="shipping_location">Shipping Point</label>
                        <div class="col-9">
                        <select class="form-select" id="shipping_location_supp" name="shipping_location" style="width: 100% !important;">
                            <option value="" disabled selected>Select Shipping Location</option>
                            @if (isset($shipping_location))
                                @foreach ($shipping_location as $item)
                                    <option value="{{ $item->id }}" @selected($product->shipping_location == $item->id)>
                                        {{ $item->shipping_location }}</option>
                                @endforeach
                            @endif

                        </select>
                    </div>
                </div>
                    </div>
                </div>
                <div class="row mt-5">
                    <h5>Packaging Detail</h5>
                </div>
                <div class="row">
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label class="form-label col-4" for="customer_product_code">Carton Box Type</label>
                            <div class="col-6">
                                <input type="text" class="form-control rounded-4" id="carton_box_type"
                                    name="carton_box_type" placeholder="Enter Customer Product Code"
                                    value="{{ $product->carton_box_type }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="qty_in_box" class="form-label col-4">Qty in box</label>
                            <div class="col-6">
                                <input type="number" name="qty_in_box" value="{{ $product->qty_in_box }}"
                                    id="qty_in_box" class="form-control rounded-4 ">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <div class="d-flex gap-2 justify-content-end">
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </div>
        </form>
    </div>


    <script src="{{ asset('assets/js/modernizr.js') }}"></script>
    <script src="{{ asset('assets/js/moment.min.js') }}"></script>

    <script src="{{ asset('assets/vendor/daterange/daterange.js') }}"></script>
    <script src="{{ asset('assets/vendor/daterange/custom-daterange.js') }}"></script>
    <script>
        $(document).ready(function(){
            function initSelect2WithAjax(selector, placeholder, route) {
                $(selector).select2({
                    placeholder: placeholder,
                    ajax: {
                        url: route,
                        dataType: 'json',
                        delay: 250,
                        data: function(params) {
                            return {
                                q: params.term,
                                page: params.page || 1
                            };
                        },
                        processResults: function(data, params) {
                            params.page = params.page || 1;

                            return {
                                results: $.map(data.items, function(item) {
                                    return {
                                        text: item.name || item.type,
                                        id: item.id,
                                        data: item
                                    };
                                }),
                                pagination: {
                                    more: (params.page * 10) < data.total_count
                                }
                            };
                        },
                        cache: true
                    }
                });
            }
            initSelect2WithAjax('#type_of_product', 'Select Type of Product', '{{ route("type_of_product.search") }}');
            initSelect2WithAjax('#uom', 'Select UOM', '{{ route("unit.search") }}');
            initSelect2WithAjax('#customer_name', 'Select Customer', '{{ route("customer.search") }}');
            initSelect2WithAjax('#supplier_name', 'Select Supplier', '{{ route("supplier.search") }}');

            $('#customer_name').on('select2:select', function (e) {
                const selectedCustomer = e.params.data.data;
                const shippingSelect = $('#shipping_location_cust');

                shippingSelect.empty();
                shippingSelect.append('<option disabled selected>Select Shipping Location</option>');

                if (selectedCustomer.shipping_locations?.length > 0) {
                    selectedCustomer.shipping_locations.forEach(function (loc) {
                        shippingSelect.append(
                            $('<option>', {
                                value: loc.id,
                                text: loc.shipping_location
                            })
                        );
                    });
                } else {
                    shippingSelect.append('<option disabled>No shipping locations found</option>');
                }
            });

            $('#supplier_name').on('select2:select', function (e) {
                const selectedSupplier = e.params.data.data;
                const shippingSelect = $('#shipping_location_supp');

                shippingSelect.empty();

                if (selectedSupplier.shipping_location?.length > 0) {
                    selectedSupplier.shipping_location.forEach(function (loc) {
                        shippingSelect.append(
                            $('<option>', {
                                value: loc.id,
                                text: loc.shipping_location
                            })
                        );
                    });
                } else {
                    shippingSelect.append('<option disabled>No shipping locations found</option>');
                }
            });
        });
        $('#customer_supplier').on('change', function() {
            if ($(this).is(':checked')) {
                $('.supplier_row').removeClass('d-none');
                $('.supplier_row').find('.select2-container').addClass('w-100');
                $('.customer_row').addClass('d-none');
            } else {
                $('.supplier_row').addClass('d-none');
                $('.customer_row').removeClass('d-none');
            }
        });



    </script>
@endsection