@extends('layout.app')

@section('content')
    <div class="card">
        <div class="card-body">
            <form action="" id="search">

                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="block text-gray-700 text-sm font-bold mb-2" for="from_date">
                                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 input-group-append"
                                    data-toggle="datetimepicker" data-target="#searchFrom" autocomplete="off">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="block text-gray-700 text-sm font-bold mb-2" for="to_date">
                                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 input-group-append"
                                    data-toggle="datetimepicker" data-target="#searchTo" autocomplete="off">
                            </div>
                        </div>
                    </div>
                    {{-- @if (auth()->user()->hasrole('Admin')) --}}
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Select Manager Type</label>
                                <select name="reseller_type" id="reseller_type" class="select2 form-control">
                                    <option value="">All Manager </option>
                                    <option value="own">Own</option>
                                    <option value="other">Other</option>
                                </select>
                            </div>
                        </div>
                    {{-- @endif --}}
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Select Manager </label>
                            <select name="reseller_id" id="reseller_id" class="select2 form-control">
                                <option value="">All Manager </option>
                                @foreach ($reseller as $r)
                                    <option value="{{ $r->id }}">{{ $r->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group float-right">
                            @can('commission_percentage_change_log')
                                <a href="{{ route('resellerCommissionPercentageLog') }}" class="btn btn-secondary"
                                    target="_blank"><i class="fa fa-history"></i> Commission (%) Change Log</a>
                            @endcan
                            <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>

                <div id="result"></div>

            </form>
        </div>
    </div>

    @can('change_commission_percentage_reseller_balance_log')
        {{-- Rewrites the commission rate of the clicked row only: that manager, that old
             rate, inside the date range currently in the search form. --}}
        <div class="modal fade" id="commissionRateModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Change Commission Rate</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-warning py-2 mb-3" id="rateModalScope"></div>

                        <input type="hidden" id="rateResellerId">
                        <input type="hidden" id="rateOldPercentage">

                        <div class="form-group">
                            <label>Current Commission (%)</label>
                            <input type="text" class="form-control" id="rateOldPercentageView" readonly>
                        </div>
                        <div class="form-group">
                            <label>New Commission (%) <span class="text-danger">*</span></label>
                            <input type="number" step="0.01" min="0" max="100" class="form-control"
                                id="rateNewPercentage" placeholder="e.g. 12.50" autocomplete="off">
                        </div>
                        <div class="form-group mb-0">
                            <label>Remarks</label>
                            <input type="text" class="form-control" id="rateRemarks" maxlength="255"
                                placeholder="Why is it being changed?" autocomplete="off">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary" id="rateSaveBtn">Update</button>
                    </div>
                </div>
            </div>
        </div>
    @endcan
@endsection

@section('ajax')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#reset').click(function() {
                $('#result').html('');
            });
            $('#searchBtn').on('click', function(e) {
                e.preventDefault();
                $('#processing').show();
                $.ajax({
                    type: 'get',
                    url: '{{ route('resellerWiseTotalCostResult') }}',
                    data: $('#search').serialize(),
                    success: function(result) {
                        $('#result').html(result);
                        $('#processing').hide();

                    }
                });
            });
            @can('change_commission_percentage_reseller_balance_log')
                // Delegated: the result table is replaced on every search.
                $('#result').on('click', '.editCommissionRate', function() {
                    var $btn = $(this);

                    $('#rateResellerId').val($btn.data('reseller-id'));
                    $('#rateOldPercentage').val($btn.data('old-percentage'));
                    $('#rateOldPercentageView').val($btn.data('old-percentage') + '%');
                    $('#rateNewPercentage').val('');
                    $('#rateRemarks').val('');
                    $('#rateModalScope').text(
                        'Manager: ' + $btn.data('reseller-name') +
                        ' | Period: ' + $('input[name=from_date]').val() + ' to ' + $('input[name=to_date]')
                        .val() +
                        ' | Only the recharges currently at ' + $btn.data('old-percentage') +
                        '% will be changed.');

                    $('#commissionRateModal').modal('show');
                });

                $('#rateSaveBtn').on('click', function() {
                    var $btn = $(this);
                    var newPercentage = $('#rateNewPercentage').val();

                    if (newPercentage === '' || isNaN(newPercentage)) {
                        alert('Please enter the new commission percentage.');
                        return;
                    }

                    $btn.prop('disabled', true).text('Updating...');

                    $.ajax({
                        type: 'post',
                        url: '{{ route('resellerCommissionPercentageUpdate') }}',
                        data: {
                            reseller_id: $('#rateResellerId').val(),
                            from_date: $('input[name=from_date]').val(),
                            to_date: $('input[name=to_date]').val(),
                            old_percentage: $('#rateOldPercentage').val(),
                            new_percentage: newPercentage,
                            remarks: $('#rateRemarks').val(),
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(res) {
                            $('#commissionRateModal').modal('hide');
                            alert(res.message);
                            $('#searchBtn').trigger('click');
                        },
                        error: function(xhr) {
                            var message = 'Could not update the commission rate.';

                            if (xhr.responseJSON) {
                                if (xhr.responseJSON.message) {
                                    message = xhr.responseJSON.message;
                                }
                                if (xhr.responseJSON.errors) {
                                    message = Object.values(xhr.responseJSON.errors).join('\n');
                                }
                            }

                            alert(message);
                        },
                        complete: function() {
                            $btn.prop('disabled', false).text('Update');
                        }
                    });
                });
            @endcan

            $('#reseller_id').on('change', function(e) {
                e.preventDefault();
                $('body').append('<div class="hidden" id="loading">Loading.....</div>');

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

                    }
                });
            });
        });
    </script>

    <script>
        function export2csv() {
            const rows = document.querySelectorAll("table#tableId tr");
            const data = [];

            // Extract table data
            for (const row of rows) {
                const rowData = [];
                for (const column of row.querySelectorAll("th:not(.no-export), td:not(.no-export)")) {
                    rowData.push(column.innerText.trim());
                }
                data.push(rowData);
            }

            // Create worksheet
            const ws = XLSX.utils.aoa_to_sheet(data);

            // Set column 3 (index 3, which is column D) as text format
            const range = XLSX.utils.decode_range(ws['!ref']);
            for (let R = range.s.r; R <= range.e.r; ++R) {
                const cellAddress = XLSX.utils.encode_cell({
                    r: R,
                    c: 3
                }); // Column 3
                if (ws[cellAddress]) {
                    ws[cellAddress].t = 's'; // 's' = string/text type
                    ws[cellAddress].z = '@'; // '@' = text format code
                }
            }

            // Optional: Set column width
            ws['!cols'] = ws['!cols'] || [];
            ws['!cols'][3] = {
                wch: 15
            }; // Set width for column 3

            // Create workbook and download
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "Data");
            XLSX.writeFile(wb, "data.xlsx");
        }
    </script>
@endsection