@extends('admin.layout')
@section('content')

<style type="text/css">
.content-header {
    background: #fff;
}
</style>
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="container-fluid">
    <div class="row">
        <div class="col-md-8">

            <section class="content-header">
                <h4>Add Item</h4>
                 {!! Form::open(array('url' =>'admin/addcount', 'method'=>'post', 'class' => 'form-horizontal form-validate', 'enctype'=>'multipart/form-data')) !!}
                <hr> @if(session()->has('message'))
                <div class="alert alert-success"> Product Count Saved </div> @endif
                <div class="row">
                    <div class="col-md-4">
                        <label>Outlet</label>
                        <select class="form-control" name="outlet" id="outlet">
                            <option value="0">Main Outlet</option> @foreach($results['outlet'] as $outlets)
                            <option value="{{$outlets->manufacturers_id}}">{{$outlets->manufacturers_name}}</option> @endforeach </select>
                          
                    </div>
                    <div class="col-md-4">
                        <label>Start Date</label>
                        <input type="date" class="form-control" name="start_date" value="2026-05-25"> </div>
                    <div class="col-md-4">
                        <label>Start Time</label>
                        <input type="time" class="form-control" name="start_time" value="14:17:08"> </div>
                    <div class="col-md-12">
                        <label>Count Name</label>
                        <input type="text" class="form-control" name="count_name" required> </div>
                </div>
               
                <div class="row">
                    <div class="col-md-12">
                        <br>
                        <center><button type="button" class="ecom-btn" onclick="foundall();">Click Here to Count All</button></center>
                    </div>
                    <div class="col-md-12" style="padding-top: 20px;">
                        <h4 align="center">OR</h4> </div>
                    <div class="col-md-12">
                        <label>Count List</label>
                        <p style="font-size:10px;">Create your list of item to count using product name . </p>
                        <input type="text" name="search" id="searchable" class="form-control" placeholder="Enter Product Name/ SKU Code" list="productsname" onchange="found();" />
                        <datalist id="productsname" class="scrollables"> </datalist>
                    </div>
                </div>
                <hr>
                <div class="row" style="margin-top: 20px;">
                    <div class="col-md-12">
                        <table class="table table-striped table-bordered" style="font-size: 14px;">
                            <thead>
                                <tr style="background: #a1ddf11f;">
                                    <td colspan="1"><b>Product Details</b></td>
                                    <td colspan="1"><b>Expected</b></td>
                                    <td colspan="1"><b>Count</b></td>
                                </tr>
                            </thead>
                            <tbody class="tbody1">
                                <tr>
                                    <td colspan="3"> No Products Added</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr style="background: #a1ddf11f;">
                                    <td align="right" colspan="3">
                                        <button class="ecom-btn" type="submit" name="save" value="save">Save</button>
                                        <!-- <button class="btn btn-default" type="submit" name="start" value="start">Start</button> -->
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>{!! Form::close() !!} </section>
        </div>
        <div class="col-md-4">
            <section class="content-header">
                <table style="width: 100%">
                    <thead>
                        <tr>
                            <td colspan="2">Your Last Counted Items</td>
                        </tr>
                    </thead>
                    <tr>
                        <td colspan="2">
                            <hr>
                        </td>
                    </tr>
                    <tbody class="tbodyn">
                        <tr>
                            <td align="left" style="font-size:14px;">
                                <p>No Count Added..</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </section>
        </div>
    </div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        fetch_customer_data();

        function fetch_customer_data(query = '',outletId='') {
            $.ajax({
                url: "{{ route('live_search.searchproductAdmin') }}",
                method: 'GET',
                data: {
                    query: query
                },
                dataType: 'json',
                success: function(data) {
                    $('#productsname').html(data.table_data);
                }
            })
        }
        $(document).on('keyup', '#searchable', function() {
            var query = $(this).val();
            var outletId=$('#outlet').val();
            console.log(outletId)
            fetch_customer_data(query,outletId);
        });
    });

    function found() {
          var outletId = $('#outlet').val();
        var val = $("#productsname option[value='" + $('#searchable').val() + "']").attr('data-id');
        $.ajax({
            url: "{{ route('live_search.addactioncountadminAdmin') }}",
            method: 'GET',
            data: {
                query: val,
                outletId:outletId
            },
            dataType: 'json',
            success: function(data) {
                $('.tbody1').html(data.table_data);
                $('#searchable').val('');
            }
        });
    }

    function foundall() {

         var outletId = $('#outlet').val();
       // console.log(outletId);
        var val = 1;
        $.ajax({
            url: "{{ route('live_search.addactioncountadminall') }}",
            method: 'GET',
            data: {
                query: val,
                outletId:outletId
            },
            dataType: 'json',
            success: function(data) {
                 $('.tbody1').html('');
                // console.log(data.table_data);
                $('.tbody1').html(data.table_data);
            }
        });
    }

</script>
<!-- <script type="text/javascript">
    $(document).ready(function(){
        $('#outlet').on('change',function(){
            var outletId= $('#outlet').val();
            $('#outletId1').val(outletId);
        })
    })
</script> -->

@endsection