@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: 80px;
            /* 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')
    <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">Edit 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.update', $item->id) }}" method="post" enctype="multipart/form-data">
                    @csrf
                    @method('PATCH')
                    <!-- /.card-header -->
                    <div class="card-body">
                        <div class="row no-gutters">

                            <div class="col-md-9">
                                <div class="row">
                                    <div class="col-md-6 form-group">
                                        <label for="Item_name">Item Name</label>
                                        <input type="text" class="form-control @error('brand_name') is-invalid @enderror"
                                            placeholder="Item Name" name="item_name" id="item_name"
                                            value="{{ $item->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"
                                            value="{{ $item->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" value="{{ $partnumber }}" 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 @error('is_serial_number') is-invalid @enderror"
                                                name="is_serial_number" id="is_serial_number" value="1"
                                                {{ $item->is_serial_number == 1 ? 'checked' : '' }}>
                                            <label class="form-check-label" for="is_serial_number">Serial No.</label>
                                        </div>
                                        @error('is_serial_number')
                                            <span class="invalid-feedback d-block" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                    <div class="col-md-2 form-group">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="is_batch_number"
                                                name="is_batch_number" value="1"
                                                {{ $item->is_batch_number == 1 ? 'checked' : '' }}
                                                onclick="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"
                                                    {{ $item->is_mafg_date == 1 ? 'checked' : '' }}>
                                                <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"
                                                    {{ $item->is_expiry_date == 1 ? 'checked' : '' }}>
                                                <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"
                                                {{ $item->is_lot_number == 1 ? 'checked' : '' }}>
                                            <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="{{ isset($item->item_img) ? asset('uploads/item_img/' . $item->item_img) : asset('uploads/item_img/default.png') }}"
                                        class="img-fluid" id="product-image-img-1">

                                    <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" value=""
                                        onchange="validateImage(this)">

                                    <div class="d-flex justify-content-center mt-2">
                                        <button type="button" class="btn btn-info btn-sm mr-2"
                                            onclick="document.getElementById('item_img').click()">Select
                                            Image</button>

                                        <button type="button" class="btn btn-danger btn-sm"
                                            onclick="removeCompanyLogo()">Remove Image</button>
                                    </div>

                                    {{-- 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">Update</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>
        function removeCompanyLogo() {
            const img = document.getElementById('product-image-img-1');
            const input = document.getElementById('item_logo');

            // Reset image preview
            img.src = "{{ asset('images/default-logo.png') }}"; // fallback/default image path

            // Clear file input
            input.value = "";

            // Optionally clear hidden fields or backend value
            // Example: <input type="hidden" name="remove_logo" value="1">
        }
    </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
    </script>
    <script>
        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 input so image won't be submitted
                    document.getElementById('product-image-img-1').src = "{{ $item_logo }}"; // 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);
            }
        }

        $(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 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
            }
        }
    </script>
@endsection