@extends('layout.app')
@section('content')
    <div class="card">
        <div class="card-body">
            <form action="" id="search" class="resellerRechargeLog">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Select Manager</label>
                            <select name="reseller" id="reseller" class="form-control form-control-sm select2">
                                <option value="">Select One</option>
                                @foreach ($reseller as $r)
                                    <option value="{{ $r->id }}">{{ $r->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label> Select POP </label>
                        <select name="pop" id="pop" class="form-control form-control-sm select2">
                            <option value=""> Select One</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group float-right mt-4">
                            <button @click="search" class="btn btn-primary" type="submit" id="searchBtn">
                                <i class="fa fa-search"></i> Search
                            </button>
                            <button class="btn btn-info" type="reset" id="reset">Reset</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <br>
            <div id="result">
                <div>
                    <table id="dataTable" class="table table-bordered table-striped table-condensed"
                        style="width: 100%; table-layout: fixed;">
                        <thead style="position: sticky; top: 0; z-index: 10;">
                            <tr class="bg-black text-center text-white" style="font-size: 14px;">
                                <th style="width: 4%; background-color: #000; color: #fff;">ID</th>
                                <th style="width: 8%; background-color: #000; color: #fff;">Token</th>
                                <th style="width: 7%; background-color: #000; color: #fff;">Token Code</th>
                                <th style="width: 8%; background-color: #000; color: #fff;">Date</th>
                                <th style="width: 9%; background-color: #000; color: #fff;">Description</th>
                                <th style="width: 7%; background-color: #000; color: #fff;">Username</th>
                                <th style="width: 18%; background-color: #000; color: #fff;">Address</th>
                                <th style="width: 8%; background-color: #000; color: #fff;">Contact</th>
                                <th style="width: 8%; background-color: #000; color: #fff;">Created By</th>
                                <th style="width: 9%; background-color: #000; color: #fff;">Created By Client</th>
                                <th style="width: 14%; background-color: #000; color: #fff;">Assign To</th>
                            </tr>
                        </thead>
                        <tbody style="font-size: 14px; word-break: break-word;">
                            @foreach ($token as $r)
                                <tr>
                                    <td>{{ $r->id }}</td>
                                    <td>{{ $r->token }}</td>
                                    <td>{{ $r->Code->tokenCode ?? '' }}</td>
                                    <td>{{ $r->created_at }}</td>
                                    <td>{{ $r->description }}</td>
                                    <td>{{ $r->clients->userid ?? '' }}</td>
                                    <td>
                                        <p style="font-size: 14px; margin: 0;">
                                            @if (!empty($r->clients->clientsinfo->flat_no))
                                                Flat No: {{ $r->clients->clientsinfo->flat_no ?? '' }},
                                            @endif
                                            @if (!empty($r->clients->clientsinfo->building_name))
                                                Building: {{ $r->clients->clientsinfo->building_name ?? '' }},<br>
                                            @endif
                                            @if (!empty($r->clients->clientsinfo->road_no))
                                                Road No: {{ $r->clients->clientsinfo->road_no ?? '' }},<br>
                                            @endif
                                            @if (!empty($r->clients->clientsinfo->block_sector))
                                                Block: {{ $r->clients->clientsinfo->block_sector ?? '' }},
                                            @endif
                                            @if (!empty($r->clients->clientsinfo->area))
                                                Area: {{ $r->clients->clientsinfo->area ?? '' }},<br>
                                            @endif
                                            @if (!empty($r->clients->clientsinfo->box))
                                                Box: {{ $r->clients->clientsinfo->box ?? '' }}
                                            @endif
                                        </p>
                                    </td>
                                    <td>{{ $r->reporterContact }}</td>
                                    <td>{{ $r->creator->name ?? '' }}</td>
                                    <td>{{ $r->createByClient }}</td>
                                    <td>
                                        <form action="{{ route('assignStore', $r->id) }}" method="POST" name="editForm">
                                            @csrf
                                            <input type="hidden" name="assignUserId" value="{{ Auth::user()->id }}">
                                            <div class="d-flex flex-column gap-1">
                                                <select class="select2 form-control form-control-sm" name="assignToken[]"
                                                    multiple style="width: 100%; font-size: 11px;">
                                                    <option value="">Select Employee(s)</option>
                                                    @forelse ($employees as $item)
                                                        <option value="{{ $item->id }}">{{ $item->name }} -
                                                            {{ $item->user_id }}</option>
                                                    @empty
                                                    @endforelse
                                                </select>
                                                <button type="submit" class="btn btn-primary btn-sm mt-1"
                                                    style="font-size: 11px;">
                                                    Assign
                                                </button>
                                            </div>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="p-5">
                {{-- {{ $employees->links() }} --}}
            </div>
        </div>
    </div>
@endsection

@section('ajax')
<style>
    #dataTable thead tr th {
        position: sticky;
        top: 0;
        z-index: 10;
        background-color: #000 !important;
        color: #fff !important;
    }
</style>
    <script type="text/javascript">
        function initDataTable() {
            if ($.fn.DataTable.isDataTable('#dataTable')) {
                $('#dataTable').DataTable().destroy();
                $('#dataTable').off();
            }
            $('#dataTable').DataTable({
                autoWidth: false,
                pageLength: 100,
                order: [
                    [0, 'desc']
                ],
                fixedHeader: false,
            });
        }

        $(document).ready(function() {
            if ($('#dataTable').length) {
                initDataTable();
            }
        });

        $(function() {
            $('#reset').click(function() {
                if ($.fn.DataTable.isDataTable('#dataTable')) {
                    $('#dataTable').DataTable().destroy();
                }
                $('#result').html('');
                $('#pop').html('<option value="">Select One</option>');
            });

            $('#searchBtn').on('click', function(e) {
                e.preventDefault();
                $('body').append('<div id="processing">processing.....</div>');

                if ($.fn.DataTable.isDataTable('#dataTable')) {
                    $('#dataTable').DataTable().destroy();
                    $('#dataTable').off();
                }

                $.ajax({
                    type: 'get',
                    url: '{{ route('assignSearch') }}',
                    data: $('#search').serialize(),
                    success: function(result) {
                        $('#result').html(result);
                        $('#processing').remove();

                        if ($('#dataTable').length) {
                            initDataTable();
                        }
                    }
                });
            });

            $('#reseller').on('change', function(e) {
                e.preventDefault();
                $('body').append('<div class="hidden" id="processing">processing.....</div>');
                $.ajax({
                    type: 'get',
                    url: '{{ route('getResellerPopList') }}',
                    data: {
                        id: $(this).val()
                    },
                    success: function(result) {
                        $('#pop').html(result);
                        $('#processing').remove();
                    }
                });
            });
        });
    </script>
@endsection
