@extends('layouts.master')

@section('title')
    @lang('translation.Chat')
@endsection

@section('content')
    <style>
        .active-user {
            background: #eef0fc;
            border-radius: 8px;
        }
    </style>

<div class="row">
    <div class="col-md-12 bg-white">
        <div class="row p-3 p-4">
            <h4 class='px-2 p-2 font-weight-bold'>@lang('translation.Visitor_History')</h4>
            <div class="col-md-6">
                <div class="mb-3 row">
                    <label for="industry" class="col-md-4 col-form-label">@lang('translation.Store') :</label>
                    <div class="col-md-8">
                        <select onchange='fetchloc()' name="store_user_list" class='form-control' id="store_user_list">
                            @foreach ($store_user_list as $d)
                                <option value="{{ $d->id }}">{{ $d->company }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="mb-3 row">
                    <label for="industry" class="col-md-4 col-form-label">@lang('translation.Location')</label>
                    <div class="col-md-8">
                        <select name="location_val" class='form-control' id="location_val">
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="mb-3 row">
                    <label for="fdate" class="col-md-4 col-form-label">@lang('translation.From_Date')</label>
                    <div class="col-md-8">
                        <input type="date" class="form-control" name="fdate" id="fdate" value="{{ date('Y-m-d') }}">
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="mb-3 row">
                    <label for="tdate" class="col-md-4 col-form-label">@lang('translation.To_Date')</label>
                    <div class="col-md-8">
                        <input type="date" class="form-control" name="tdate" id="tdate" value="{{ date('Y-m-d') }}">
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="bg-white rounded">
                    <h4 class="py-3">@lang('translation.Visitor_History')</h4>
                    <table class="table table-bordered yajra-datatable">
                        <thead>
                            <tr>
                                <th>@lang('translation.No')</th>
                                <th>@lang('translation.Visitor')</th>
                                <th>@lang('translation.Clerk')</th>
                                <th>@lang('translation.Service')</th>
                                <th>@lang('translation.Began_Waiting')</th>
                                <th>@lang('translation.Wait_Time')</th>
                                <th>@lang('translation.Service_Time')</th>
                                <th>@lang('translation.Label')</th>
                            </tr>
                        </thead>
                        <tbody id='tablevalue'>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <script>
            fetchloc();

            function fetchloc() {
                var store_id = $('#store_user_list').val();
                $.ajax({
                    url: "{{ env('APP_URL') }}/api/get-locations",
                    type: 'post',
                    headers: {
                        'Authorization': 'Bearer {{ auth()->user()->createToken('chat')->plainTextToken }}',
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        store_id: store_id,
                    },
                    success: function(response) {
                        var opt = '';
                        if (response.success) {
                            response.data.forEach(d => {
                                opt += `<option value="${d.id}">${d.location}</option>`;
                            });
                        }
                        $('#location_val').html(opt);
                        searchhis();
                    },
                    error: function(xhr, status, error) {
                        console.error('Error:', error);
                    }
                });
            }
            $('#store_user_list, #location_val, #fdate, #tdate').on('change', searchhis);

            function searchhis() {
                var store_id = $('#store_user_list').val();
                var loc_id = $('#location_val').val();
                var from_date = $('#fdate').val();
                var to_date = $('#tdate').val();

                $.ajax({
                    url: "{{ env('APP_URL') }}/api/get-visitor-report",
                    type: 'post',
                    headers: {
                        'Authorization': 'Bearer {{ auth()->user()->createToken('chat')->plainTextToken }}',
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        store_id: store_id,
                        loc_id: loc_id,
                        from_date: from_date,
                        to_date: to_date,
                    },
                    success: function(response) {
                        if (response.success) {
                            if (response.tabel != '') {
                                $("#tablevalue").html(response.tabel);
                                $('.yajra-datatable').DataTable();
                            } else {
                                $("#tablevalue").html(
                                    `<tr><td colspan="8" style="text-align: center; vertical-align: middle;">@lang('translation.NO_Data_Found')</td></tr>`
                                );
                            }
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Error:', error);
                    }
                });
            }
        </script>
    </div>
</div>

    <!-- end row -->
@endsection