@extends('layouts.app')
@section('title')
    PRODUCT VIEW
@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">
        <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"
                                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="project_start_date" 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="{{ $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="{{ $product->customer_supplier }}">
                                <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">
                <h4>Customer Detail</h4>
            </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"
                                name="customer_name" style="width: 100% !important;">
                                <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" 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" 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">
                            <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" onchange="supplier_change()"
                                name="supplier_name" style="width: 100% !important;">
                                <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 ">
                        </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="{{ $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>


    <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>
        $('.card-body input, .card-body select, .card-body textarea').prop('disabled', true);
    </script>
@endsection