@extends('admin.layout.app')

@section('title', $pageTitle . ' | LVT ')

@section('content')
    <div id="loading-overlay">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
    <div class="container-fluid {{ Auth::check() && Auth::user()->is_layout_two == 1 ? 'mt-2 p-0' : '' }}">
        <div class="row g-3 mb-2">
            <!-- <div class="col-md-1">
                <button class="btn btn-primary btn-refresh" id="btn-refresh"><i class="fas fa-sync-alt"></i></button>
            </div> -->
            <div class="col-md-3">
                <select id="app-select" class="form-control" name="apps[]" multiple="multiple">
                    @foreach ($apps as $app)
                        <option value="{{ $app->id }}" {{ in_array($app->id, $appIds ?? []) ? 'selected' : '' }}>
                            {{ $app->app_name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <input type="date" id="date-select" class="form-control" name="date" value="{{ $date }}">
            </div>

            <div class="col-md-2">
                @if(auth()->user()->role_id == 1)
                    <button class="btn btn-primary btn-user" id="btn-modal-warning">&#43; Thiết lập</button>
                @endif
            </div>
        </div>

        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered custom-table">
                    <thead>
                        <tr>
                            <th>App name</th>
                            <th>Đơn vị quảng cáo</th>
                            <th>Tỷ lệ có khớp</th>
                            <th>CTR</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($reports as $packageName => $adUnits)
                            @foreach ($adUnits as $i => $row)
                                <tr>
                                    @if ($i === 0)
                                        <td rowspan="{{ count($adUnits) }}" class="align-middle fw-bold text-primary">
                                            {{ $packageName }}
                                        </td>
                                    @endif
                                    <td>{{ $row->ad_unit_name }}</td>
                                    <td class="{{ ($row->match_rate_operator == '>' ? $row->match_rate > $row->match_rate_threshold : $row->match_rate < $row->match_rate_threshold) ? 'text-danger fw-bold text-right' : 'text-right' }}">
                                        {{ $row->match_rate }}%
                                        @if ($row->match_rate_operator == '>' ? $row->match_rate > $row->match_rate_threshold : $row->match_rate < $row->match_rate_threshold)
                                            <span class="badge bg-danger ms-1">⚠ {{ $row->match_rate_operator }} {{ $row->match_rate_threshold }}%</span>
                                        @endif
                                    </td>
                                    <td class="{{ ($row->ctr_operator == '>' ? $row->ctr > $row->ctr_threshold : $row->ctr < $row->ctr_threshold) ? 'text-danger fw-bold text-right' : 'text-right' }}">
                                        {{ $row->ctr }}%
                                        @if ($row->ctr_operator == '>' ? $row->ctr > $row->ctr_threshold : $row->ctr < $row->ctr_threshold)
                                            <span class="badge bg-danger ms-1">⚠ {{ $row->ctr_operator }} {{ $row->ctr_threshold }}%</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted py-4">
                                    Không có đơn vị quảng cáo nào vi phạm ngưỡng cảnh báo hôm nay.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal Thiết lập -->
    <div class="modal fade" id="modalWarning" tabindex="-1" aria-labelledby="modalWarningLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="modalWarningLabel">Thiết lập cảnh báo</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-bordered align-middle" id="table-setup">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 40%">Đơn vị quảng cáo</th>
                                    <th style="width: 25%">Tỷ lệ có khớp (%)</th>
                                    <th style="width: 20%">CTR (%)</th>
                                    <th style="width: 15%">Hành động</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($settings as $setting)
                                    <tr>
                                        <td><input type="text" class="form-control" name="adunit_name[]"
                                                value="{{ $setting->ad_unit_name }}" placeholder="Đơn vị quảng cáo"></td>
                                        <td>
                                            <div class="input-group">
                                                <select class="form-select" name="match_rate_operator[]" style="max-width: 65px;">
                                                    <option value=">" {{ $setting->match_rate_operator == '>' ? 'selected' : '' }}>></option>
                                                    <option value="<" {{ $setting->match_rate_operator == '<' ? 'selected' : '' }}><</option>
                                                </select>
                                                <input type="number"  class="form-control" name="match_rate[]"
                                                    value="{{ $setting->match_rate_threshold }}" placeholder="0">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="input-group">
                                                <select class="form-select" name="ctr_operator[]" style="max-width: 65px;">
                                                    <option value=">" {{ $setting->ctr_operator == '>' ? 'selected' : '' }}>></option>
                                                    <option value="<" {{ $setting->ctr_operator == '<' ? 'selected' : '' }}><</option>
                                                </select>
                                                <input type="number"  class="form-control" name="ctr[]"
                                                    value="{{ $setting->ctr_threshold }}" placeholder="0">
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <button class="btn btn-outline-danger btn-sm btn-delete-row">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-3">
                        <button class="btn btn-success btn-sm" id="btn-add-row">
                            <i class="fas fa-plus"></i> Thêm hàng
                        </button>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Đóng</button>
                    <button type="button" class="btn btn-primary px-4" id="btn-save-setup">Lưu</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .table th {
            background-color: #495057 !important;
            color: white !important;
            font-size: 0.85rem;
            white-space: nowrap;
        }

        .custom-table {
            border-collapse: separate;
            border-spacing: 0;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }


        .custom-table thead th {
            background-color: #495057 !important;
            color: white !important;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 0.025em;
            border: 0.5px solid #343a40 !important;
        }

        .custom-table tbody td {
            padding: 4px 16px;
            vertical-align: middle;
            border: 0.5px solid #343a40 !important;
        }



        .custom-table .text-primary {
            color: #3b82f6 !important;
        }

        .badge {
            font-weight: 500;
            padding: 0.5em 0.75em;
        }

        /* Loading Overlay */
        #loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            display: none;
        }
    </style>
@endpush
@push('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush
@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function () {
            $('#app-select').select2({
                placeholder: "Chọn ứng dụng...",
                allowClear: true,
                width: '100%',
                tags: true, // cho phép nhập text mới nếu muốn
                tokenSeparators: [',', ' ']
            });

            $('#app-select, #date-select').on('change', function () {
                $('#loading-overlay').css('display', 'flex'); // Show loading

                let appIds = $('#app-select').val();
                let date = $('#date-select').val();
                let url = new URL(window.location.href);

                url.searchParams.delete('apps[]');
                if (appIds) {
                    appIds.forEach(id => url.searchParams.append('apps[]', id));
                }
                url.searchParams.set('date', date);

                window.location.href = url.toString();
            });

            // Mở modal
            $('#btn-modal-warning').on('click', function () {
                $('#modalWarning').modal('show');
            });

            // Thêm hàng mới
            $('#btn-add-row').on('click', function () {
                let newRow = `
                                    <tr>
                                        <td><input type="text" class="form-control" name="adunit_name[]" placeholder="Đơn vị quảng cáo"></td>
                                        <td>
                                            <div class="input-group">
                                                <select class="form-select" name="match_rate_operator[]" style="max-width: 65px;">
                                                    <option value=">">></option>
                                                    <option value="<"><</option>
                                                </select>
                                                <input type="number" class="form-control" name="match_rate[]" placeholder="0">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="input-group">
                                                <select class="form-select" name="ctr_operator[]" style="max-width: 65px;">
                                                    <option value=">">></option>
                                                    <option value="<"><</option>
                                                </select>
                                                <input type="number"  class="form-control" name="ctr[]" placeholder="0">
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <button class="btn btn-outline-danger btn-sm btn-delete-row">
                                                <i class="fas fa-trash"></i> Xóa
                                            </button>
                                        </td>
                                    </tr>`;
                $('#table-setup tbody').append(newRow);
            });

            // Xóa hàng
            $(document).on('click', '.btn-delete-row', function () {
                if ($('#table-setup tbody tr').length > 1) {
                    $(this).closest('tr').remove();
                } else {
                    alert('Phải có ít nhất một hàng thiết lập!');
                }
            });

            $('#btn-refresh').on('click', function () {
                $('#loading-overlay').css('display', 'flex'); // Show loading

                let url = new URL(window.location);
                url.searchParams.set('date', $('#date-select').val());
                
                let appIds = $('#app-select').val();
                url.searchParams.delete('apps[]');
                if (appIds) {
                    appIds.forEach(id => url.searchParams.append('apps[]', id));
                }

                window.location.href = url.toString();
            });

            $('#btn-save-setup').on('click', function () {
                const $btn = $(this);

                // Show loading
                $btn.prop('disabled', true)
                    .html('<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span> Đang lưu...');

                let adunit = [];
                let match_rate = [];
                let ctr = [];
                let match_rate_operator = [];
                let ctr_operator = [];

                $('#table-setup tbody tr').each(function () {
                    adunit.push($(this).find('input[name="adunit_name[]"]').val());
                    match_rate.push($(this).find('input[name="match_rate[]"]').val());
                    ctr.push($(this).find('input[name="ctr[]"]').val());
                    match_rate_operator.push($(this).find('select[name="match_rate_operator[]"]').val());
                    ctr_operator.push($(this).find('select[name="ctr_operator[]"]').val());
                });

                $.post("{{ route('admob_adunit_warning.store') }}", {
                    _token: "{{ csrf_token() }}",
                    adunit: adunit,
                    match_rate: match_rate,
                    ctr: ctr,
                    match_rate_operator: match_rate_operator,
                    ctr_operator: ctr_operator
                }, function (data) {
                    if (data.success) {
                        $('#modalWarning').modal('hide');
                        window.location.reload();
                    }
                }).fail(function (error) {
                    alert(error.responseJSON.message);
                }).always(function () {
                    // Restore button
                    $btn.prop('disabled', false).html('Lưu');
                });
            });
        });
    </script>
@endpush