@extends('admin.layout.master')

@section('content')
    <style>
        .select2-container--default .select2-selection--single {
            height: 100%;
        }
    </style>
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Inventory</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Inventory</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>


    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            @foreach (['danger', 'warning', 'success', 'info'] as $msg)
                @if (Session::has('alert-' . $msg))
                    <p class="alert alert-{{ $msg }}">{{ Session::get('alert-' . $msg) }}
                        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                    </p>
                @endif
            @endforeach
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('admin.inventory') }}" id="frm_search" method="get">
                        <div class="row mb-2">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="product">Select Product</label>
                                    <select name="product" id="product" class="form-control" value="{{$productCode}}" onChange="getProductData(this.value)" style="height: 40px;">
                                    </select>
                                </div>
                            </div>
                            <div class="col-3">
                                <label for="form-label">PIN</label>
                                <input type="text" name="pin" id="pin" value="{{ !empty($pin) ? $pin : '' }}" class="form-control" placeholder="PIN">
                            </div>
                            <div class="col-3">
                                <label for="form-label">Location</label>
                                <input type="text" name="location" id="location" value="{{ !empty($location) ? $location : '' }}" class="form-control" placeholder="Location">
                            </div>
                            <div class="col-md-2" style="margin-top:30px;">
                                <div>
                                    <button class="btn btn-success " type="submit">Submit</button>
                                    <a class="btn btn-warning" href="{{ route('admin.inventory') }}">Reset</a>
                                </div>
                            </div>
                        </button>
                        </div>
                    </form>
                </div>
            </div>


            <div class="row">
                <div class="col-12">
                    <div class="card card-primary card-tabs">
                        <div class="card-header p-0 pt-1">
                            <ul class="nav nav-tabs" id="custom-tabs-two-tab" role="tablist">

                                <li class="nav-item">
                                    <a class="nav-link active" id="custom-tabs-two-home-tab" data-toggle="pill"
                                        href="#custom-tabs-two-home" role="tab" aria-controls="custom-tabs-two-home"
                                        aria-selected="true">Inventory</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="custom-tabs-two-profile-tab" data-toggle="pill"
                                        href="#custom-tabs-profile-home" role="tab"
                                        aria-controls="custom-tabs-two-profile" aria-selected="false">Historical Location</a>
                                </li>

                            </ul>
                        </div>
                        <div class="card-body">
                            <div class="tab-content" id="custom-tabs-two-tabContent">
                                <div class="tab-pane fade active show" id="custom-tabs-two-home" role="tabpanel"
                                    aria-labelledby="custom-tabs-two-home-tab">
                                    <div id="inventorydiv">
                                        <section class="content">
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="card">
                                                            <div class="">
                                                                <form id="inventoryForm" action="{{ route('admin.inventory-update') }}" method="post">
                                                                    @csrf
                                                                <table id="userList" class="table table-bordered table-striped">
                                                                    <thead class="thead-dark">
                                                                    <tr>
                                                                        <th>Product Code</th>
                                                                        <th>PIN</th>
                                                                        <th>Product Name</th>
                                                                        <th>List Price</th>
                                                                        <th>Product Price</th>
                                                                        <th>Product Weight</th>
                                                                        <th>Popularity</th>
                                                                        <th width="10%">Texas</th>
                                                                        <th>Location (ASS)</th>
                                                                        <th>Image</th>
                                                                    </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @php
                                                                            $pi = 0;
                                                                        @endphp
                                                                        @foreach ($product as $u)
                                                                        <input type="hidden" name="mfgcount[]" value="{{ $pi }}" id="mfg_sku">
                                                                        <input type="hidden" name="mfg_sku[{{ $pi }}]" value="{{ $u->PIN }}" id="mfg_sku">
                                                                            <tr>
                                                                                <td>{{ $u->Parent }}</td>
                                                                                <td>{{ $u->PIN }}</td>
                                                                                <td>{{ $u->Name }}</td>
                                                                                <td>{{ $u->SalePrice }}</td>
                                                                                <td>{{ $u->ProductPrice }}</td>
                                                                                <td>{{ $u->Weight }}</td>
                                                                                <td>{{ $u->Popularity }}</td>
                                                                                <td width="15%">
                                                                                    <input type="number" class="form-control verify_qty" name="verify_qty[{{ $pi }}]"
                                                                                    value="{{ $u->TX }}" placeholder="Enter Texas" autocomplete="off">
                                                                                </td>

                                                                                <td width="15%">
                                                                                    <input type="text" class="form-control qb_asset_account"
                                                                                    name="qb_asset_account[{{ $pi }}]"
                                                                                    placeholder="Enter Location (ASS)" value="{{ $u->Location }}" autocomplete="off" >
                                                                                </td>
                                                                                <td>
                                                                                    <a onclick="getImageModal('{{ $u->Parent }}')" style="cursor: pointer;">
                                                                                        <img  src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ $u->Parent }}-2.jpg" onerror="this.onerror=null;this.src='https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-Parts.jpg';" id="productimage"  alt="Product Image" width="60px">
                                                                                    </a>
                                                                                </td>

                                                                            </tr>
                                                                            @php
                                                                            $pi++;
                                                                        @endphp
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                                <div class="card-footer">
                                                                    <input type="submit" value="Update" @if(count($product) <= 0) disabled @endif name="save" class="btn btn-primary">
                                                                    <a href="{{ route('admin.inventory') }}" class="btn btn-info">Back</a>
                                                                </div>
                                                            </form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </section>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="custom-tabs-profile-home" role="tabpanel"
                                    aria-labelledby="custom-tabs-profile-home-tab">
                                    <div id="historical_location_div">
                                        <section class="content">
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="card">
                                                            <div class="">

                                                                <table id="userList" class="table table-bordered table-striped">
                                                                    <thead class="thead-dark">
                                                                    <tr>
                                                                        <th>MFG SKU</th>
                                                                        <th>Location Moved</th>
                                                                        <th>LastMod</th>
                                                                    </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @foreach ($historicalLocationData as $u)
                                                                            <tr>
                                                                                <td>{{ $u->MFG_SKU }}</td>
                                                                                <td>{{ $u->Location_Moved }}</td>
                                                                                <td>{{ $u->LastMod }}</td>
                                                                            </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </section>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>


        </div>

        <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="imageModalLabel"></h5>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12 text-center">
                                <div id="imageModalContent">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>

    <script>


        function getImageModal(productCode) {

            $('#imageModalContent').empty();
            var imageUrl = 'https://s3.us-central-1.wasabisys.com/partswarehouse/photos/' + productCode + '-2.jpg';
            var imgElement = '<img src="' + imageUrl + '" onerror="this.onerror=null;this.src=\'https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-Parts.jpg\';" id="productimage" alt="Product Image" width="200px">';
            $('#imageModalContent').append(imgElement);
            $('#imageModalLabel').text("Product Code : "+productCode);
            $('#imageModal').modal('show');
        }

        function getProductData(t) {
            $("#frm_search").submit();
        }
        $(document).ready(function() {

            $('#product').select2({
                placeholder: "Search By Product Code",
            });

            var CSRF_TOKEN = "{{ csrf_token() }}";
            $('#product').select2({
                ajax: {
                    type: 'POST',
                    url: '{{ route('admin.product-search') }}',
                    data: function(params) {
                        return {
                            _token: CSRF_TOKEN,
                            search: params.term
                        };
                    },
                    processResults: function(response) {
                        return {
                            results: response
                        };
                    },
                },
                placeholder: 'Search By Product Code',
                minimumInputLength: 3
            });

            @if($productCode)

                var defaultProduct = "{{ $productCode }}";  // The default value, e.g., the product ID
                $.ajax({
                    type: 'POST',
                    url: '{{ route('admin.product-search') }}',
                    data: {
                        _token: CSRF_TOKEN,
                        search: defaultProduct
                    },
                    success: function(data) {
                        // Assuming the response returns the product details in the required format for Select2
                        var defaultOption = new Option(data[0].text, data[0].id, true, true);
                        $('#product').append(defaultOption);
                    }
                });

            @endif
        });
    </script>

    <script>
        $(document).ready(function() {

            setTimeout(function() {
                $(".alert").alert('close');
            }, 5000);

        });

        $(document).on('keyup keypress', '#frm_search input[type="text"], #frm_search .select2', function(e) {
            if(e.keyCode == 13) {
                e.preventDefault();
                $("#frm_search").submit();
                return false;
            }
        });

        $(document).on('keyup keypress', '#inventoryForm input[type="text"]', function(e) {
              if(e.keyCode == 13) {
                  e.preventDefault();
                  $("#inventoryForm").submit();
                  return false;
              }
        });


        $(document).ready(function() {
            // Bind a submit event to your form or the relevant button
            $('#inventoryForm').on('submit', function(e) {
                // Prevent the default form submission
                e.preventDefault();

                // Flag to check if any input is blank
                let isLocationBlank = false;

                // Loop through each .qb_asset_account input
                $('.qb_asset_account').each(function() {
                    if ($(this).val().trim() === '') {
                        isLocationBlank = true; // Set the flag to true if any input is blank
                        return false; // Break out of the loop
                    }
                });

                if (isLocationBlank) {
                    // Show SweetAlert
                    Swal.fire({
                        title: 'Stock Update',
                        text: 'Are you sure you want to UPDATE the stock without providing a location?',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Continue',
                        cancelButtonText: 'Go Back'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            // If user clicks 'Continue', submit the form
                            this.submit(); // Note: 'this' refers to the form
                        }
                    });
                } else {
                    // If all locations are provided, just submit the form
                    this.submit();
                }
            });
        });
    </script>
@endsection