@extends('layouts.master')

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

@section('content')
    <style>
        .active-user {
            background: #eef0fc;
            border-radius: 8px;
        }
    </style>
@section('css')
    <!--datatable  css-->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
@endsection
<div class="row ">
    <div class="col-md-12 bg-white">
        <form id='searchform' action="{{ route('visitor_report') }}" method="post">
            @csrf
            <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_id" class="form-control" id="store_user_list">
                                @foreach ($store_user_list as $d)
                                    <option value="{{ $d->id }}"
                                        {{ request('store_id') == $d->id ? 'selected' : '' }}>
                                        {{ $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="loc_id" 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="from_date" id="from_date"
                                value="{{ request('from_date', 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="to_date" id="to_date"
                                value="{{ request('to_date', 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>
                        <div class="d-flex justify-content-end pb-3 expert-btn-div">
                            <button type="button" class="btn btn-primary " onclick="downloadExcel()"><i
                                    class="fa-solid fa-table-cells"></i></button>
                            <button type="button" class="btn btn-warning mx-2" onclick="downloadPDF()"><i
                                    class="fa-solid fa-file-pdf"></i>
                            </button>
                        </div>
                        {{-- <table class="table table-bordered yajra-datatable"> --}}
                        <table id='exportTable' class="table table-bordered yajra-datatable">
                            <thead>
                                <tr>
                                    <th>@lang('translation.No')</th>
                                    <th>@lang('translation.Visitor')</th>
                                    <th>@lang('translation.Company')</th>
                                    <th>@lang('translation.Location')</th>
                                    <th>@lang('translation.Clerk')</th>
                                    <th>@lang('translation.Service')</th>
                                    <th>@lang('translation.Registered_Time')</th>
                                    <th>@lang('translation.Wait_Time')</th>
                                    <th>@lang('translation.Service_Time')</th>
                                    <th>@lang('translation.Add_member')</th>
                                    <th>@lang('translation.No_show')</th>
                                    <th>@lang('translation.status')</th>
                                    <th class='d-none'>@lang('translation.Label')</th>
                                </tr>
                            </thead>
                            <tbody id='tablevalue'>
                                @foreach ($data as $key => $d)
                                    <tr>
                                        <td>{{ $key + 1 }}</td>
                                        <td>{{ $d->f_name }}</td>
                                        <td>{{ $d->company }}</td>
                                        <td>{{ $d->location }}</td>
                                        <td>{{ $d->clerk_name }}</td>
                                        <td>{{ $d->services }}</td>
                                        <td>{{ $d->check_in_at }}</td>
                                        <td>{{ $d->wait_time }}</td>
                                        <td>{{ $d->service_time }}</td>
                                        <td>{{ $d->web_link }}</td>
                                        <td>{{ $d->no_show_used }}</td>
                                        <td>{{ $d->status }}</td>
                                        <th class='d-none'>@lang('translation.Label')</th>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap5.min.js"></script>

<script>
    $('.yajra-datatable').DataTable({
        "lengthMenu": [
            [10, 25, 50, 100, -1],
            [10, 25, 50, 100, "All"]
        ],
    });
</script>
<script>
    $('#from_date, #location_val, #to_date').on('change', function() {
        $('#searchform').submit();
    });


    $(document).ready(function() {
        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);

                $('#location_val').val({{ request()->loc_id }});


            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
            }
        });
    });


    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);
                $('#searchform').submit();
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
            }
        });
    }
</script>
@endsection