@extends('admin.layout.app')

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

@section('content')
    <div id="loadingOverlay" style="display: none;">
        <div class="loader">
            <i class="fas fa-spinner fa-spin fa-3x mb-3" style="color: #3498db;"></i>
            <p class="h5 text-dark">Đang xử lý, vui lòng đợi...</p>
        </div>
    </div>
    <div class="container-fluid {{ Auth::check() && Auth::user()->is_layout_two == 1 ? 'mt-2 p-0' : '' }}">

        <!-- Page Heading -->
        {{-- <h1 class="h3 mb-2 text-gray-800">Danh mục app</h1> --}}
        <!-- DataTales Example -->
        <div class="card shadow mb-4">
            <div class="card-header py-3 d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold text-primary ">Danh sách app</h6>
                <div class="d-flex gap-1">
                    {{-- @can('manage-crud')
                        <a class="btn btn-primary btn-user" href="{{ route('app.show.form') }}">&#43; Thêm mới</a>
                    @endcan --}}
                    <div class="d-flex gap-4 align-items-center">
                        <form method="GET" action="{{ route('app.index') }}" id="statusFilterForm">
                            <div class="d-flex align-items-center gap-2 justify-content-between mt-3">
                                <label for="status"></label>
                                <select name="status" id="status" class="form-control" onchange="document.getElementById('statusFilterForm').submit();">
                                    <option value="" {{ (isset($selectedStatus) && $selectedStatus == '') ? 'selected' : '' }}>All</option>
                                    <option value="0" {{ (isset($selectedStatus) && $selectedStatus === '0') ? 'selected' : '' }}>Live</option>
                                    <option value="1" {{ (isset($selectedStatus) && $selectedStatus === '1') ? 'selected' : '' }}>Unpublish</option>
                                    <option value="2" {{ (isset($selectedStatus) && $selectedStatus === '2') ? 'selected' : '' }}>Remove</option>
                                    <option value="3" {{ (isset($selectedStatus) && $selectedStatus === '3') ? 'selected' : '' }}>Suspended</option>
                                </select>
                             
                                <div class="">
                                    <a href="{{ route('app.index') }}" class="btn btn-secondary">
                                        <i class="fa fa-times"></i> 
                                    </a>
                                </div>
                            </div>
                        </form>
                        @if(Auth::user()->role_id == 1)
                            <a class="btn btn-primary btn-user" href="{{ route('app.show.form') }}">&#43; Thêm mới</a>
                        @endif
                    </div>
                    
                    
                </div>
            </div>

            <div class="card-body">
                <div class="table-responsive">
                    {{-- <div class="d-flex justify-content-between gap-2"> 
                        <input type="date" id="min-date" class="form-control">
                        <input type="date" id="max-date" class="form-control">
                    </div> --}}
                    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>App name</th>
                                <th>Package name</th>
                                <th>Google ADS Name</th>
                                <th>Người phụ trách</th>
                                <th>Giá lỗ</th>
                                <th>Daily</th>
                                <th>Hành động</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th>App name</th>
                                <th>Package name</th>
                                <th>Google ADS Name</th>
                                <th>Người phụ trách</th>
                                <th>Giá lỗ</th>
                                <th>Daily</th>
                                <th>Hành động</th>
                            </tr>
                        </tfoot>
                        <tbody>

                            @foreach ($apps as $app)
                                <tr>
                                    <td title="{{ $app['app_name'] }}">{{  \Illuminate\Support\Str::limit($app['app_name'], 50) }}</td>
                                    <td>{{ $app['package_name'] }}</td>
                                    <td>{{ $app['google_ads_name'] }}</td>
                                    <td>{{ $app->users->pluck('name')->implode(', ') }}</td>
                                    <td class="text-right">{{ number_format($app['loss_price'])  }}</td>
                                    <td>{!! $app['status_label'] !!}</td>
                                    <td>
                                            <div class="d-flex justify-content-center gap-1">
                                                @if(Auth::user()->role_id == 1)
                                                    <a href="{{ route('app.edit', ['id' => $app['id']]) }}" class="btn btn-warning"
                                                        style="width: 40px;height: 30px;"><i class="fa fa-edit"></i></a>
                                                    <button class="btn  btn-danger btn-delete" data-id="{{ $app['id'] }}">
                                                        <i class="fa fa-trash"></i>
                                                    </button>
                                                @endif
                                                    <button class="btn btn-secondary btn-edit-app" data-id="{{ $app['id'] }}"
                                                        data-loss-price="{{ $app['loss_price'] ?? '' }}"
                                                        data-loss-price-today="{{ $app['loss_price_today'] ?? '' }}"
                                                        data-notify="{{ $app['notify'] ?? 0 }}">
                                                        <i class="fa-solid fa-gear"></i>
                                                    </button>
                                            </div>
                                      
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>

    <!-- Modal Edit App -->
    <div class="modal fade" id="editAppModal" tabindex="-1" role="dialog" aria-labelledby="editAppModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editAppModalLabel">Cấu hình vượt ngưỡng</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="editAppForm">
                    <div class="modal-body">
                        <input type="hidden" id="app_id" name="id">
                        <div class="form-group">
                            <label for="loss_price">Giá lỗ</label>
                            <input type="text" class="form-control" id="loss_price" name="loss_price">
                        </div>
                        <div class="form-group">
                            <label for="loss_price_today">Giá lỗ hôm nay</label>
                            <input type="text" class="form-control" id="loss_price_today" name="loss_price_today">
                        </div>
                        <div class="form-group">
                            <label for="notify">Thông báo</label>
                            <select class="form-control" id="notify" name="notify">
                                <option value="0">Không hoạt động</option>
                                <option value="1">Hoạt động</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Hủy</button>
                        {{-- <button type="button" class="btn btn-warning" id="updateTodayBtn">Cập nhật giá lỗ hôm nay</button> --}}
                        <button type="submit" class="btn btn-primary">Cập nhật</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
<style scoped>
        .dataTables_filter {
            float: right;
        }

        @media (max-width:768px) {
            .dataTables_filter {
                float: left;
            }
        }

        #loadingOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.9);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 100000 !important;
            flex-direction: column;
        }

        .loader {
            text-align: center;
        }
    </style>
@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const input = document.getElementById('loss_price');
            const inputToday = document.getElementById('loss_price_today');

            // Format cho loss_price
            input.addEventListener('input', function(e) {
                // Xóa hết ký tự không phải số
                let value = this.value.replace(/[^0-9]/g, '');
                if (value === '') {
                    this.value = '';
                    return;
                }

                // Định dạng lại có dấu phẩy
                this.value = new Intl.NumberFormat('en-US').format(value);
            });

            // Format cho loss_price_today
            inputToday.addEventListener('input', function(e) {
                // Xóa hết ký tự không phải số
                let value = this.value.replace(/[^0-9]/g, '');
                if (value === '') {
                    this.value = '';
                    return;
                }

                // Định dạng lại có dấu phẩy
                this.value = new Intl.NumberFormat('en-US').format(value);
            });

            // Khi gửi form, bỏ dấu phẩy để lưu đúng kiểu số
            input.form?.addEventListener('submit', function() {
                input.value = input.value.replace(/,/g, '');
                inputToday.value = inputToday.value.replace(/,/g, '');
            });
        });
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Xử lý nút xóa
            $('.btn-delete').on('click', function(e) {
                e.preventDefault();
                var id = $(this).data('id');

                Swal.fire({
                    title: 'Bạn có chắc muốn xóa?',
                    text: "Thao tác này sẽ không thể hoàn tác!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Có',
                    cancelButtonText: 'Hủy'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $('#loadingOverlay').css('display', 'flex');
                        let url = '{{ route('app.delete', ':id') }}'.replace(':id', id);
                        $.ajax({
                            url: url,
                            type: 'DELETE',
                            success: function(response) {
                                if (response.success) {
                                    Swal.fire('Đã xóa!', response.message, 'success')
                                        .then(
                                            () => {
                                                location.reload();
                                            });
                                } else {
                                    Swal.fire('Xóa không thành công!', response.message,
                                        'error');
                                }
                            },
                            complete: function() {
                                $('#loadingOverlay').hide();
                            }
                        });

                    }
                })
            });

            // Xử lý nút edit app
            $('.btn-edit-app').on('click', function(e) {
                e.preventDefault();

                // Lấy dữ liệu từ data attributes
                var id = $(this).data('id');
                var lossPrice = $(this).data('loss-price');
                var lossPriceToday = $(this).data('loss-price-today');
                var notify = $(this).data('notify');

                // Điền dữ liệu vào modal
                $('#app_id').val(id);
                
                // Định dạng tiền cho loss_price
                if (lossPrice && lossPrice !== '') {
                    $('#loss_price').val(new Intl.NumberFormat('en-US').format(lossPrice));
                } else {
                    $('#loss_price').val('');
                }
                // Định dạng tiền cho loss_price
                if (lossPriceToday && lossPriceToday !== '') {
                    $('#loss_price_today').val(new Intl.NumberFormat('en-US').format(lossPriceToday));
                } else {
                    $('#loss_price_today').val('');
                }
                
                $('#notify').val(notify);

                // Hiển thị modal
                $('#editAppModal').modal('show');
            });

            // Xử lý nút cập nhật giá lỗ hôm nay
           

            // Xử lý submit form cập nhật
            $('#editAppForm').on('submit', function(e) {
                e.preventDefault();

                // Bỏ dấu phẩy khỏi loss_price trước khi gửi
                var lossPriceValue = $('#loss_price').val().replace(/,/g, '');
                $('#loss_price').val(lossPriceValue);

                var formData = $(this).serialize();
                var id = $('#app_id').val();

                $('#loadingOverlay').css('display', 'flex');

                $.ajax({
                    url: '{{ route('app.update.ajax', ':id') }}'.replace(':id', id),
                    type: 'PUT',
                    data: formData,
                    success: function(response) {
                        if (response.success) {
                            Swal.fire('Thành công!', response.message, 'success')
                                .then(() => {
                                    $('#editAppModal').modal('hide');
                                    location.reload();
                                });
                        } else {
                            Swal.fire('Lỗi!', response.message, 'error');
                        }
                    },
                    complete: function() {
                        $('#loadingOverlay').hide();
                    },
                    error: function(xhr) {
                        var errors = xhr.responseJSON.errors;
                        var errorMessage = '';
                        for (var field in errors) {
                            errorMessage += errors[field][0] + '\n';
                        }
                        Swal.fire('Lỗi!', errorMessage, 'error');
                    }
                });
            });
        });
    </script>
@endpush