@extends('layout.app')

@push('styles')
    <style>
        /* Vertical scroll happens inside this wrapper so the header can stick to it.
           .table-responsive cannot: with no height cap it never scrolls vertically,
           and sticky then has nothing to pin against. */
        .ct-table-wrap {
            max-height: calc(100vh - 340px);
            overflow: auto;
            position: relative;
        }

        .ct-table-wrap #clientTokensTable {
            margin-bottom: 0;
        }

        #clientTokensTable thead th,
        #clientTokensTable tfoot td {
            position: sticky;
            z-index: 10;
            /* border-collapse drops a sticky cell's borders once it detaches,
               so draw them as insets instead. */
            box-shadow: inset 0 1px 0 #dee2e6, inset 0 -1px 0 #dee2e6;
        }

        /* .bg-gray and .bg-light are only 90% opaque, so rows would scroll
           through them - repeat the colours solid. */
        #clientTokensTable thead th {
            top: 0;
            background-color: #6c757d !important;
            color: #fff !important;
        }

        #clientTokensTable tfoot td {
            bottom: 0;
            background-color: #f8f9fa !important;
        }
    </style>
@endpush

@section('content')
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">Clients Tokens Report</h5>
        </div>
        <div class="card-body">
            <form id="searchForm">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>From Date</label>
                            <div class="input-group date" id="searchFrom" data-target-input="nearest">
                                <input type="text" name="from_date" value="{{ $start->format('m/d/y') }}"
                                    class="form-control datetimepicker-input"
                                    data-toggle="datetimepicker" data-target="#searchFrom" autocomplete="off">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>To Date</label>
                            <div class="input-group date" id="searchTo" data-target-input="nearest">
                                <input type="text" name="to_date" value="{{ $end->format('m/d/y') }}"
                                    class="form-control datetimepicker-input"
                                    data-toggle="datetimepicker" data-target="#searchTo" autocomplete="off">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Reseller</label>
                            <select name="reseller_id" id="resellerSelect" class="form-control select2">
                                <option value="">All Resellers</option>
                                @foreach ($resellers as $reseller)
                                    <option value="{{ $reseller->id }}">{{ $reseller->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>POP</label>
                            <select name="pop_id" id="popSelect" class="form-control select2">
                                <option value="">All POPs</option>

                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Category</label>
                            <select name="token_category" id="tokenCategorySelect" class="form-control select2">
                                <option value="">All Categories</option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->tokenCategory }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Code</label>
                            <select name="token_code" id="tokenCodeSelect" class="form-control select2">
                                <option value="">All Codes</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group float-right mt-2">
                            <button type="submit" class="btn btn-primary" id="searchBtn">
                                <i class="fa fa-search"></i> Search
                            </button>
                            <button type="reset" class="btn btn-info" id="resetBtn">Reset</button>
                        </div>
                    </div>
                </div>
            </form>

            <div id="result" class="mt-3"></div>
        </div>
    </div>
@endsection

@section('ajax')
    <script>
        $(function () {
            // Cache all POP options on load before Select2 is applied
            var allPops = [];
            $('#popSelect option').each(function () {
                if (!$(this).val()) return;
                allPops.push({
                    id: $(this).val(),
                    text: $(this).text().trim(),
                    reseller_id: $(this).data('reseller')
                });
            });

            // When reseller changes, rebuild POP options and reinitialise Select2
             $('#resellerSelect').on('change', function(e) {
                e.preventDefault();
                $('#popSelect').html('<option value="">All POPs</option>'); // Clear current options
                $('body').append('<div class="hidden" id="loading">Loading.....</div>');

                $.ajax({
                    type: 'get',
                    url: '{{ route('getResellerPopList') }}',
                    data: {
                        id: $(this).val()
                    },
                    success: function(result) {
                        $('#popSelect').html(result);
                        $('#loading').remove();

                    }
                });

            });

            // Codes belong to a category, so the list is rebuilt whenever it changes.
            // Replacing the options leaves the Select2 instance intact.
            $('#tokenCategorySelect').on('change', function () {
                var categoryId = $(this).val();
                $('#tokenCodeSelect').html('<option value="">All Codes</option>').trigger('change');

                if (!categoryId) return;

                $.get('{{ route('getTokenCodeList') }}', { id: categoryId }, function (result) {
                    // The endpoint leads with its own blank option; keep ours instead.
                    var $codes = $('<select>').html(result).find('option').filter(function () {
                        return $(this).val();
                    });
                    $('#tokenCodeSelect').append($codes);
                });
            });

            // Date pickers
            $('#searchFrom').datetimepicker({ format: 'MM/DD/YY' });
            $('#searchTo').datetimepicker({ format: 'MM/DD/YY', useCurrent: false });

            $('#resetBtn').on('click', function () {
                $('#result').html('');
                $('#tokenCodeSelect').html('<option value="">All Codes</option>');
                $('#resellerSelect, #popSelect, #tokenCategorySelect, #tokenCodeSelect')
                    .val('').trigger('change');
            });

            $('#searchForm').on('submit', function (e) {
                e.preventDefault();
                var btn = $('#searchBtn');
                btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Searching...');

                $.ajax({
                    type: 'GET',
                    url: '{{ route('clients-tokens-report') }}',
                    data: $(this).serialize(),
                    success: function (html) {
                        $('#result').html(html);
                    },
                    error: function () {
                        $('#result').html('<div class="alert alert-danger">Something went wrong. Please try again.</div>');
                    },
                    complete: function () {
                        btn.prop('disabled', false).html('<i class="fa fa-search"></i> Search');
                    }
                });
            });

            $(document).on('click', '.token-detail-btn', function () {
                var $btn      = $(this);
                var clientId  = $btn.data('client-id');
                var $detailRow = $('[data-for="' + clientId + '"]');
                var $inner     = $detailRow.find('.token-detail-inner');

                // Toggle collapse if already loaded
                if ($btn.data('loaded') == 1) {
                    $detailRow.toggle();
                    return;
                }

                $inner.html('<i class="fa fa-spinner fa-spin"></i> Loading...');
                $detailRow.show();

                $.ajax({
                    type: 'GET',
                    url: '{{ route('clients-tokens-detail') }}',
                    data: {
                        client_id:      clientId,
                        from_date:      $('[name="from_date"]').val(),
                        to_date:        $('[name="to_date"]').val(),
                        token_category: $('[name="token_category"]').val(),
                        token_code:     $('[name="token_code"]').val()
                    },
                    success: function (tokens) {
                        if (tokens.length === 0) {
                            $inner.html('<div class="alert alert-warning mb-0">No tokens found.</div>');
                        } else {
                            var html = '<table class="table table-sm table-bordered mb-0">'
                                + '<thead class="bg-gray"><tr>'
                                + '<th>#</th><th>Token</th><th>Category</th><th>Code</th>'
                                + '<th>Type</th><th>Assigned To</th><th>Status</th>'
                                + '<th>Description</th><th>Date</th>'
                                + '</tr></thead><tbody>';
                            $.each(tokens, function (i, t) {
                                var badge = t.status === 'Active'
                                    ? '<span class="badge badge-warning">Open</span>'
                                    : '<span class="badge badge-success">Closed</span>';
                                html += '<tr>'
                                    + '<td>' + (i + 1) + '</td>'
                                    + '<td>' + (t.token || '-') + '</td>'
                                    + '<td>' + t.category + '</td>'
                                    + '<td>' + t.code + '</td>'
                                    + '<td>' + t.type + '</td>'
                                    + '<td>' + t.assigned_to + '</td>'
                                    + '<td>' + badge + '</td>'
                                    + '<td>' + (t.description || '-') + '</td>'
                                    + '<td>' + t.created_at + '</td>'
                                    + '</tr>';
                            });
                            html += '</tbody></table>';
                            $inner.html(html);
                        }
                        $btn.data('loaded', 1);
                    },
                    error: function () {
                        $inner.html('<div class="alert alert-danger mb-0">Failed to load tokens.</div>');
                    }
                });
            });
        });
    </script>
@endsection