@extends('layouts.admin')
@section('title', 'Item | Mintavia Admin')
@section('css')
    <link href="{{ asset('bootstrap-tagsinput/bootstrap-tagsinput.css') }}" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" />
    <style>
        /* Make Select2 look like Bootstrap's .form-select */
        .select2-container--default .select2-selection--single {
            height: calc(2.25rem + 2px);
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            line-height: 1.5;
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 1.5;
            padding-left: 0;
            color: #212529;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 100%;
            top: 0.5rem;
            right: 0.5rem;
        }

        .select2-container--default .select2-selection--single:focus {
            border-color: #86b7fe;
            outline: 0;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }

        /* Fix the tagsinput container */
        .bootstrap-tagsinput {
            display: flex !important;
            flex-wrap: wrap;
            min-height: 38px;
            /* Adjust as needed */
            width: 100%;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
            overflow-y: auto;
            max-height: 300px;
            /* Optional: to limit the height */
            background-color: white;
        }

        /* Ensure individual tag spacing */
        .bootstrap-tagsinput .tag {
            margin: 2px;
            background-color: #007bff;
            color: #fff;
            padding: 5px 10px;
            border-radius: 4px;
            display: inline-block;
        }

        /* Ensure input inside tagsinput appears correctly */
        .bootstrap-tagsinput input {
            border: none;
            outline: none;
            background: transparent;
            padding: 5px;
            margin: 2px;
            min-width: 100px;
            flex: 1;
            /* Makes input fill remaining space */
        }
    </style>

@endsection

@section('content')
    <style>
        .typeahead {
            width: 99%;
        }
    </style>
    <div class="row">
        <div class="col-12">
            <div class="card card-primary">
                <div class="card-header d-flex align-items-center">
                    <h3 class="card-title">Create Item</h3>
                    <div class="ml-auto">
                        <a href="{{ route('admin.items.index') }}">
                            <button class="btn btn-sm btn-flat shadow rounded-0 btn-danger"><i
                                    class="fa fa-arrow-circle-left"></i> Back
                            </button>
                        </a>
                    </div>
                </div>
                <form action="{{ route('admin.items.store') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <!-- /.card-header -->
                    <div class="card-body">
                        <div class="row no-gutters">

                            <div class="col-md-9">
                                <div class="row">
                                    <!-- Your Form Fields -->
                                    <div class="col-md-6 form-group">
                                        <label for="Item_name">Item Name</label>
                                        <input type="text"
                                            class="form-control autocomplet-input @error('item_name') is-invalid @enderror"
                                            placeholder="Item Name" name="item_name" id="item_name">
                                        @error('item_name')
                                            <span class="invalid-feedback d-block" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 form-group">
                                        <label for="print_as">Print As</label>
                                        <input type="text"
                                            class="form-control autocomplet-input @error('print_as') is-invalid @enderror"
                                            placeholder="Print As" name="print_as" id="print_as" readonly>
                                        @error('print_as')
                                            <span class="invalid-feedback d-block" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>

                                    <div class="col-md-3">
                                        <label for="part_no_select" class="form-label">Select Part No</label>
                                        <select id="part_no_select" class="form-select select2">
                                            <option value="">-- Select Part No --</option>
                                            @foreach ($allPartNumbers as $partNo)
                                                <option value="{{ $partNo->part_no }}">{{ $partNo->part_no }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-12">
                                        <label for="part_no_input" class="form-label">Part No</label>
                                        <input type="text" name="part_no" id="part_no_input" class="form-control"
                                            data-role="tagsinput" />

                                        @error('part_no')
                                            <span class="invalid-feedback d-block" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>

                                </div>
                                <div class="row">
                                    <div class="col-md-2 form-group">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="is_serial_number"
                                                id="is_serial_number" value="1" onclick="onlyOne(this)">
                                            <label class="form-check-label" for="is_serial_number">Serial No.</label>
                                        </div>
                                    </div>
                                    <div class="col-md-2 form-group">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="is_batch_number"
                                                id="is_batch_number" value="1"
                                                onclick="onlyOne(this); toggleDropdown();">
                                            <label class="form-check-label" for="is_batch_number">Batch No.</label>
                                        </div>

                                        <!-- Dropdown for Subcategories -->
                                        <div id="batchDropdown" class="collapse mt-2">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" name="is_mafg_date"
                                                    id="is_mafg_date" value="1">
                                                <label class="form-check-label" for="mafg_date">MFG Date</label>
                                            </div>
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" name="is_expiry_date"
                                                    id="is_expiry_date" value="1">
                                                <label class="form-check-label" for="expiry_date">Expiry Date</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="is_lot_number"
                                                id="is_lot_number" value="1" onclick="onlyOne(this)">
                                            <label class="form-check-label" for="lot_number">Lot No.</label>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="col-md-3">
                                <div class="col-12">
                                    <label class="w-100">Logo</label>
                                </div>
                                <div class="col-md-12 text-center">
                                    <img src="{{ asset('noimage.jpg') }}" alt="" class="img-fluid"
                                        id="product-image-img-1"><br>

                                    <input name="item_img"
                                        class="form-control form-control-sm-file image-select w-100 d-none" type="file"
                                        id="item_img" data-img="#product-image-img-1" style="z-index:83"
                                        onchange="validateImage(this)">

                                    <button type="button" class="btn btn-info btn-sm btn-block"
                                        onclick="document.getElementById('item_img').click()">Select Image</button>

                                    {{-- Error message placeholder --}}
                                    <div id="image-error-msg" class="text-danger mt-2" style="font-size: 14px;"></div>
                                </div>
                            </div>
                            <div class="col-md-2 col-12 px-1 text-center">
                                <div class="row no-gutters">

                                </div>
                                <div class="form-group">

                                </div>
                            </div>

                        </div>
                        <div class="row">
                            <div class="row">
                                <div class="col-6">
                                    <div class="form-group">

                                    </div>
                                </div>


                                <div class="col-6 mb-2">



                                </div>


                                @error('is_part_no')
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <!--end max-->

                        </div>

                    </div>
                    <!-- /.card-body -->
                    <div class="card-footer">
                        <button class="btn btn-success" type="submit">Create</button>

                    </div>
                </form>

            </div>
            <!-- /.card -->
        </div>
    </div>
@endsection

@section('js')
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- Select2 -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <!-- Bootstrap TagsInput -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css"
        rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>

    </script>
    <script>
        $(document).ready(function() {
            // ✅ Initialize TagsInput manually
            $('#part_no_input').tagsinput();

            // ✅ Initialize Select2
            $('#part_no_select').select2({
                placeholder: 'Search or select part number',
                allowClear: true,
                width: '100%'
            });

            // ✅ On dropdown value selected
            $('#part_no_select').on('change', function() {
                let selectedValue = $(this).val();

                if (selectedValue) {
                    // Add to TagsInput
                    $('#part_no_input').tagsinput('add', selectedValue);

                    // Clear selection
                    $(this).val(null).trigger('change');
                }
            });
        });

        function transliterateToTamil(text, callback) {
            const url = `https://inputtools.google.com/request?text=${encodeURIComponent(text)}&itc=ta-t-i0-und&num=1`;

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    if (data[0] === "SUCCESS" && data[1][0][1].length > 0) {
                        callback(data[1][0][1][0]); // Return only Tamil
                    } else {
                        callback(""); // Nothing found
                    }
                })
                .catch(() => callback(""));
        }

        function updateTamil() {
            const text = document.getElementById("item_name").value.trim();
            if (text.length === 0) return;

            transliterateToTamil(text, function(tamil) {
                document.getElementById("print_as").value = tamil;
            });
        }

        const itemInput = document.getElementById("item_name");
        itemInput.addEventListener("input", updateTamil);
        itemInput.addEventListener("blur", updateTamil); // On leaving field
        itemInput.addEventListener("change", updateTamil); // On selecting from dropdown/autocomplete


        function onlyOne(checkbox) {
            const checkboxes = ['is_serial_number', 'is_batch_number', 'is_lot_number'];

            checkboxes.forEach(function(id) {
                if (checkbox.id !== id) {
                    document.getElementById(id).checked = false;
                }
            });

            // Collapse batch dropdown if Batch No. unchecked
            if (checkbox.id !== 'is_batch_number') {
                document.getElementById('batchDropdown').classList.remove('show');
            }
        }

        function toggleDropdown() {
            const batchBox = document.getElementById('is_batch_number');
            const dropdown = document.getElementById('batchDropdown');
            if (batchBox.checked) {
                dropdown.classList.add('show');
            } else {
                dropdown.classList.remove('show');
            }
        }


        $('input.autocomplet-input').typeahead({
            source: function(query, process) {
                return $.get('{{ route('admin.items.autocomplet-search') }}', {
                    query: query
                }, function(data) {
                    return process(data);
                });
            },
            updater: function(item) {
                return item;
            }
        });
        $(document).ready(function() {
            $('.js-select2').select2({
                width: '100%'
            });

            $('.image-select').on('change', function() {
                const $img = $(this).attr('data-img');
                window.readURL(this, $img)
            });
        });

        let part_no = 1;
        $(document).on('click', '#add_part_no', function(e) {
            let part_no = $('#part_no_input').val();
            $('#part_no').append($("<option></option>")
                .attr("value", part_no)
                .text(part_no));
            $('#part_no_input').val("");

        });

        function openItemDescription() {
            console.log("dfjsdkjfhksdhfksdfk");

            $('#ItemDescriptionModal').modal('show')
        }

        function toggleDropdown() {
            const batchCheckbox = document.getElementById('is_batch_number');
            const dropdown = document.getElementById('batchDropdown');

            if (batchCheckbox.checked) {
                dropdown.classList.add('show'); // Show dropdown
            } else {
                dropdown.classList.remove('show'); // Hide dropdown
            }
        }

        function validateImage(input) {
            const file = input.files[0];
            const errorDiv = document.getElementById('image-error-msg');
            errorDiv.innerHTML = ''; // clear old error

            if (file) {
                const fileSizeKB = file.size / 1024;
                if (fileSizeKB < 0 || fileSizeKB > 60) {
                    errorDiv.innerHTML = "Image size must be between 40 KB and 60 KB.";
                    input.value = ''; // clear the input so image won't be submitted
                    document.getElementById('product-image-img-1').src = "{{ asset('noimage.jpg') }}"; // reset preview
                    return;
                }

                // Preview image if valid
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('product-image-img-1').src = e.target.result;
                }
                reader.readAsDataURL(file);
            }
        }
    </script>
@endsection