@extends('layouts.app')
@section('title')
    PRODUCT CREATE
@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>

    <!-- Date Range CSS -->
    <link rel="stylesheet" href="{{ asset('assets/vendor/daterange/daterange.css') }}" />


    <div class="card">
        <form method="post" action="{{ route('product.store') }}">
            @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="{{ old('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="{{ old('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="{{ old('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" name="type_of_product" id="type_of_product" style="width: 100% !important;">
                                    @if (old('type_of_product') != null)
                                        @php
                                            $type_of_product = App\Models\TypeOfProduct::find(old('type_of_product'));
                                        @endphp
                                        @if($type_of_product)
                                            <option value="{{ $type_of_product->id }}" selected style="color: black;">
                                                {{ $type_of_product->type }}
                                            </option>
                                        @else
                                            <option value="" selected disabled>Invalid Type of Product Selected</option>
                                        @endif
                                    @else
                                        <option value="" selected disabled>Select Type of Product</option>
                                    @endif
                                </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="{{ old('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="{{ old('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 Label Color" value="{{ old('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="{{ old('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="uom">UOM</label>
                            <div class="col-6">
                                <select class="form-select" name="uom" id="uom" style="width: 100% !important;">
                                    @if (old('unit') != null)
                                        @php
                                            $unit = App\Models\Unit::find(old('unit'));
                                        @endphp
                                        @if($unit)
                                            <option value="{{ $unit->id }}" selected style="color: black;">
                                                {{ $unit->name }}
                                            </option>
                                        @else
                                            <option value="" selected disabled>Invalid Unit Selected</option>
                                        @endif
                                    @else
                                        <option value="" selected disabled>Select Unit</option>
                                    @endif
                                </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="part_weight" name="part_weight"
                                    placeholder="Enter Part Weight" value="{{ old('part_weight') }}">
                            </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>
                            <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="{{ old('project_start_date') }}"
                                        class="form-control datepicker-current-date">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <legend class="fs-5 mt-5">
                    <h5>Wire Detail (Additional)</h5>
                </legend>
                <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 No" value="{{ old('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="{{ old('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="{{ old('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="{{ old('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="{{ old('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(old('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 (old('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" name="customer_name" id="customer_name" style="width: 100% !important;">
                                    @if (old('customer_name') != null)
                                        @php
                                            $customer = App\Models\Customer::find(old('customer_name'));
                                        @endphp
                                        @if($customer)
                                            <option value="{{ $customer->id }}" selected style="color: black;">
                                                {{ $customer->name }}
                                            </option>
                                        @else
                                            <option value="" selected disabled>Invalid Customer Selected</option>
                                        @endif
                                    @else
                                        <option value="" selected disabled>Select Customer</option>
                                    @endif
                                </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="{{ old('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="{{ old('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" id="moq_remarks" name="moq_remarks"
                                    placeholder="Enter Moq Remarks" value="{{ old('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">
                                <select class="form-select" id="shipping_location_cust" name="shipping_location" style="width: 100% !important;">
                                    <option value="" disabled selected>Select Shipping Location</option>
                                </select>                                
                            </div>
                        </div>
                    </div>

                </div>
                <div class="row supplier_row @if (!old('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" name="supplier_name" id="supplier_name" style="width: 100% !important;">
                                    @if (old('supplier_name') != null)
                                        @php
                                            $supplier = App\Models\Supplier::find(old('supplier_name'));
                                        @endphp
                                        @if($supplier)
                                            <option value="{{ $supplier->id }}" selected style="color: black;">
                                                {{ $supplier->name }}
                                            </option>
                                        @else
                                            <option value="" selected disabled>Invalid Supplier Selected</option>
                                        @endif
                                    @else
                                        <option value="" selected disabled>Select Supplier</option>
                                    @endif
                                </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="{{ old('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="{{ old('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="{{ old('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="{{ old('moq_remarks_s') }}">
                            </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">
                                    <option value="" disabled selected>Select Supplier Shipping Location</option>

                                    {{-- @foreach ($suppliers as $supplier)
                                    <option value="{{ $supplier->id }}" @selected(old('supplier_name') == $supplier->id)>
                                        {{ $supplier->name }}</option>
                                @endforeach --}}

                                </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 Carton Box Type"
                                    value="{{ old('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="{{ old('qty_in_box') }}" min="0"
                                    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">Save</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>');
                }
            });
        });
        $('#numberInput').on('input', function() {
            let value = $(this).val();

            value = value.replace(/[^0-9.-]/g, '');

            let decimalParts = value.split('.');
            if (decimalParts.length > 2) {
                value = decimalParts[0] + '.' + decimalParts.slice(1).join('');
            }

            if (value.indexOf('-') > 0) {
                value = value.replace(/-/g, '');
            } else if (value.indexOf('-') === 0) {
                value = '-' + value.replace(/-/g, '');
            }

            $(this).val(value);
        });

        $('#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