@extends('layouts.app')
@section('content')
    <div class="page-wrapper">
        <div class="page-content">
            <div class="row tablerow">
                <div class="col-md-12">
                    <div class="left-card">
                        <form action="{{ route('product.store') }}" method="post" id="ajax_form_data"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="card border-top border-0 border-4 border-primary">
                                <div class="card-header">
                                    New Product
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-9">
                                            <div class="row">
                                                @if (usertype() == 'admin')
                                                    <div class="col-md-3 mb-2">
                                                        <div class="form-group">
                                                            <label for="productTitle" class="mb-2">Company Branch</label>
                                                            <select name="branch_id" class="form-control">
                                                                @foreach (branches() as $branch)
                                                                    <option value="{{ $branch->id }}">
                                                                        {{ $branch->branch_name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                @else
                                                    <input type="hidden" name="branch_id" value="{{ branch_id() }}">
                                                @endif

                                                <div class="col-md-3 mb-2">
                                                    <div class="form-group">
                                                        <label for="productTitle" class="mb-2">Product Code/Barcode</label>
                                                        <input type="text" class="form-control" id="productTitle"
                                                            placeholder="Product Code" name="product_code"
                                                            value="{{ old('product_code') }}">
                                                    </div>
                                                </div>
                                                <div class="col-md-6 mb-2">
                                                    <div class="form-group">
                                                        <label for="productTitle" class="mb-2">Product Name</label>
                                                        <input type="text" class="form-control" id="productTitle"
                                                            placeholder="Product name" name="name"
                                                            value="{{ old('name') }}">
                                                    </div>
                                                </div>
                                                <div class="col-md-12 mb-2">
                                                    <div class="form-group">
                                                        <label for="productTitle" class="mb-2">Product Description</label>
                                                        <textarea cols="30" rows="2" class="form-control" name="description" placeholder="Description">{{ old('description') }}</textarea>
                                                    </div>
                                                </div>
                                                <div class="col-md-3 mb-2">
                                                    <div class="form-group">
                                                        <label for="regularPrice" class="mb-2">Purchase Price</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="Purchase Price" name="purchase_price"
                                                            value="{{ old('purchase_price') }}">
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group">
                                                        <label for="regularPrice" class="mb-2">Purchase Discount
                                                            Type</label>
                                                        <select name="purchase_discount_type_id" class="form-control">
                                                            <option value="">Select</option>
                                                            @foreach ($purchase_discount_types as $discount_type)
                                                                <option value="{{ $discount_type->id }}">
                                                                    {{ $discount_type->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-3 mb-2">
                                                    <div class="form-group">
                                                        <label for="regularPrice" class="mb-2">Purchase Tax type</label>
                                                        <select name="purchase_tax_id" class="form-control">
                                                            <option value="">Select</option>
                                                            @foreach ($input_tax_types as $input_tax_type)
                                                                <option value="{{ $input_tax_type->id }}">
                                                                    {{ $input_tax_type->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-3 mb-2">
                                                    <div class="form-group">
                                                        <label for="regularPrice" class="mb-2">Sale Price</label>
                                                        <input type="text" class="form-control" placeholder="Sale price"
                                                            name='sale_price' value="{{ old('sale_price') }}">
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group">
                                                        <label for="regularPrice" class="mb-2">Sale Discount Type</label>
                                                        <select name="sale_discount_type_id" class="form-control">
                                                            <option value="">Select</option>
                                                            @foreach ($sale_discount_types as $discount_type)
                                                                <option value="{{ $discount_type->id }}">
                                                                    {{ $discount_type->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group">
                                                        <label for="regularPrice" class="mb-2">Sale Tax type</label>
                                                        <select name="sale_tax_id" class="form-control">
                                                            <option value="">Select</option>
                                                            @foreach ($output_tax_types as $output_tax_type)
                                                                <option value="{{ $output_tax_type->id }}">
                                                                    {{ $output_tax_type->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-3 mb-2">
                                                    <div class="form-group">
                                                        <label for="productTitle" class="mb-2">Product Alice</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="Product Alice" name="product_alice"
                                                            value="{{ old('product_alice') }}">
                                                    </div>
                                                </div>

                                                <div class="col-md-3 mb-2">
                                                    <div class="form-group">
                                                        <label for="productTitle" class="mb-2">Warrenty Types</label>
                                                        <select name="warranty" class="form-control">
                                                            <option value="">Select Type</option>
                                                            @foreach ($warrenty_types as $warrenty_type)
                                                                <option value="{{ $warrenty_type->total_days }}">
                                                                    {{ Str::ucfirst($warrenty_type->name) }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-6 mb-2">
                                                    <div class="form-group mt-4">
                                                        <input type="checkbox" name="imei_suport" value="1"> <label
                                                            for="productTitle" class="mb-2">Enable
                                                            Product description, IMEI or Serial Number</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Horizontal Nav Pills for Inventory and Shipping Tabs -->
                                            <div class="d-flex mt-4">
                                                <!-- Vertical Nav Pills -->
                                                <ul class="nav nav-pills flex-column mr-3" id="productTab" role="tablist"
                                                    style="min-width: 150px;border-right:1px #8833ff solid;">
                                                    <li class="nav-item mb-2">
                                                        <a class="nav-link active" id="inventory-tab" data-toggle="pill"
                                                            href="#inventory" role="tab">Inventory</a>
                                                    </li>
                                                    <li class="nav-item mb-2">
                                                        <a class="nav-link" id="variation-tab" data-toggle="pill"
                                                            href="#variation" role="tab">Variation</a>
                                                    </li>
                                                    <li class="nav-item mb-2">
                                                        <a class="nav-link" id="shipping-tab" data-toggle="pill"
                                                            href="#shipping" role="tab">Shipping</a>
                                                    </li>
                                                    <li class="nav-item mb-2">
                                                        <a class="nav-link" id="custom-tab" data-toggle="pill"
                                                            href="#custom" role="tab">Custom field</a>
                                                    </li>
                                                </ul>
                                                <!-- Tab Content -->
                                                <div class="tab-content flex-fill" id="productTabContent">
                                                    <!-- Inventory Tab -->
                                                    <div class="tab-pane fade show active" id="inventory"
                                                        role="tabpanel">
                                                        <div class="row">
                                                            <div class="col-md-4 mb-2">
                                                                <div class="form-group">
                                                                    <label for="productTitle" class="mb-2">Product
                                                                        SKU</label>
                                                                    <input type="text" class="form-control"
                                                                        placeholder="Product SKU" name="product_sku"
                                                                        value="{{ old('product_sku') }}">
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4 mb-2">
                                                                <div class="form-group">
                                                                    <label for="productTitle" class="mb-2">Unit</label>
                                                                    <select name="unit_id" class="form-control">
                                                                        <option value="">Select</option>
                                                                        @foreach ($units as $unit)
                                                                            <option value="{{ $unit->id }}">
                                                                                {{ $unit->short_name }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4 mb-2">
                                                                <div class="form-group">
                                                                    <label for="productTitle" class="mb-2">Alert
                                                                        Quantity</label>
                                                                    <input type="text" class="form-control"
                                                                        placeholder="Alert Quantity" name="alert_qty"
                                                                        value="{{ old('alert_qty') }}">
                                                                </div>
                                                            </div>

                                                            <div class="col-md-4 mb-2">
                                                                <div class="form-group">
                                                                    <label for="productTitle" class="mb-2">Expire
                                                                        In(Days)</label>
                                                                    <input type="text" class="form-control"
                                                                        placeholder="Expire In(Days)" name="expire_in"
                                                                        value="{{ old('expire_in') }}">
                                                                </div>
                                                            </div>

                                                            <div class="col-md-4 mb-2">
                                                                <div class="form-group">
                                                                    <label for="productTitle" class="mb-2">Expire
                                                                        Date</label>
                                                                    <input type="date" class="form-control"
                                                                        id="productTitle" placeholder="Expire Date"
                                                                        name="expire_date"
                                                                        value="{{ old('expire_date') }}">
                                                                </div>
                                                            </div>

                                                            <div class="col-md-4 mb-2">
                                                                <div class="form-group">
                                                                    <label for="productTitle" class="mb-2">Rack</label>
                                                                    <input type="text" class="form-control"
                                                                        placeholder="Rack" name="rack"
                                                                        value="{{ old('rack') }}">
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4 mb-2">
                                                                <div class="form-group">
                                                                    <label for="productTitle" class="mb-2">Row</label>
                                                                    <input type="text" class="form-control"
                                                                        placeholder="Row" name="row"
                                                                        value="{{ old('row') }}">
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4 mb-2">
                                                                <div class="form-group">
                                                                    <label for="productTitle"
                                                                        class="mb-2">Possition</label>
                                                                    <input type="text" class="form-control"
                                                                        placeholder="Possition" name="possition"
                                                                        value="{{ old('possition') }}">
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4 mb-2">
                                                                <div class="form-group">
                                                                    <label for="productTitle" class="mb-2">Opening
                                                                        Stock</label>
                                                                    <input type="number" class="form-control"
                                                                        placeholder="Opening Stock" name="opening_stock"
                                                                        value="{{ old('opening_stock') }}">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane fade" id="variation" role="tabpanel">
                                                        @foreach ($variation_types as $key => $vtype)
                                                            @if ($vtype->variation_values->count() > 0)
                                                                <div class="row mb-2"
                                                                    style="border-bottom:1px #ccc solid;padding:10px;">
                                                                    <div class="col-md-3">
                                                                        <span style="font-size:14px;">
                                                                            {{ $vtype->name }}</span>
                                                                    </div>
                                                                    <div class="col-md-9">
                                                                        <ul>
                                                                            @foreach ($vtype->variation_values as $vvalue)
                                                                                <li>
                                                                                    <input type="checkbox"
                                                                                        id="checkbox_{{ $vvalue->id }}"
                                                                                        name="variation_id[]"
                                                                                        value="{{ $vvalue->id }}">

                                                                                    <label
                                                                                        for="checkbox_{{ $vvalue->id }}"
                                                                                        style="font-size:14px;">{{ $vvalue->name }}</label>
                                                                                </li>
                                                                            @endforeach
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            @endif
                                                        @endforeach
                                                    </div>
                                                    <!-- Shipping Tab -->
                                                    <div class="tab-pane fade" id="shipping" role="tabpanel">

                                                        <div class="form-group mb-2">
                                                            <label for="weight" class="mb-2">Weight (kg)</label>
                                                            <input type="text" class="form-control"
                                                                placeholder="weight" name="weight">
                                                        </div>
                                                        <div class="form-group mb-2">
                                                            <label for="dimensions" class="mb-2">Dimensions (L x W x H
                                                                in
                                                                cm)</label>
                                                            <input type="text" class="form-control"
                                                                placeholder="dimensions" name="dimensions">
                                                        </div>
                                                    </div>

                                                    <div class="tab-pane fade" id="custom" role="tabpanel">
                                                        <div class="row">
                                                            @foreach ($custom_fields as $i => $field)
                                                                <input type="hidden"
                                                                    name="custom_field_id[{{ $i }}]"
                                                                    value="{{ $field->id }}">
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label for="productTitle"
                                                                            class="mb-2">{{ Str::ucfirst($field->name) }}</label>
                                                                        <input type="text" class="form-control"
                                                                            name="custom_information[{{ $i }}]"
                                                                            placeholder="{{ $field->name }}">
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div>
                                                <h5>Feature Image</h5>
                                                <div class="img-preview mt-3 mb-2" id="imgPreview">
                                                    <span>Click to upload</span>
                                                    <img id="previewImage" alt="Image Preview">
                                                </div>
                                                <input type="file" class="form-control mt-3" id="featureImageInput"
                                                    accept="image/*" style="display: none;" name="image">
                                            </div>

                                            <div class="mb-2">

                                                <div class="form-group mb-1">
                                                    <label for="productTitle" class="mb-1">Brand</label>
                                                    <select class="form-select form-control selectpicker" name="brand_id"
                                                        aria-label="Default select example" data-live-search="true">
                                                        <option value="">Select or Search</option>
                                                        @foreach ($brands as $brand)
                                                            <option value="{{ $brand->id }}">{{ $brand->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <div class="form-group mb-1">
                                                    <label for="productTitle" class="mb-1">Category</label>
                                                    <select class="form-select form-control selectpicker"
                                                        name="category_id" id="category_id"
                                                        aria-label="Default select example" data-live-search="true">
                                                        <option value="">Select or Search</option>
                                                        @foreach ($categories as $category)
                                                            <option value="{{ $category->id }}">{{ $category->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <div class="form-group mb-1">
                                                    <label for="productTitle" class="mb-1">Sub Category</label>
                                                    <select class="form-select form-control selectpicker"
                                                        name="sub_category_id" id="sub_category_id"
                                                        aria-label="Default select example" data-live-search="true">
                                                        <option value="">Select or Search</option>
                                                    </select>
                                                </div>

                                                <div class="form-group mb-1">
                                                    <label for="productTitle" class="mb-1">Status</label>
                                                    <select name="status" class="form-control">
                                                        <option value="active">Active</option>
                                                        <option value="inactive">Inactive</option>
                                                    </select>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <button type="submit" class="btn btn-primary">Save</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@push('script')
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.4.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function() {
            // Trigger file input click when img-preview is clicked
            $('#imgPreview').click(function() {
                $('#featureImageInput').click();
            });

            // Display image preview when file is selected
            $('#featureImageInput').change(function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $('#previewImage').attr('src', e.target.result).show();
                        $('#imgPreview span').hide();
                    };
                    reader.readAsDataURL(file);
                }
            });


            function subcategory() {
                $('#sub_category_id').empty();
                var category_id = $("#category_id").val();
                console.log(category_id);
                if (category_id == '') {
                    $('#sub_category_id').append('<option value="">Select or Search</option>');
                    return false;
                }
                $.ajax({
                    url: "{{ route('sub_category.getSubcategory') }}",
                    type: 'get',
                    datatype: 'html',
                    data: {
                        category_id: category_id
                    },
                    success: function(data) {
                        $('#sub_category_id').html('<option value="" selected>Choose...</option>' +
                            data); // Add default empty option
                        $('#sub_category_id').selectpicker('refresh'); // Refresh selectpicker

                    },
                    error: function(data) {
                        console.log(data);
                    }
                });
            }

            $("#category_id").change(function() {
                subcategory();
            })

        });
    </script>
@endpush