@extends('admin.layout.app')

@section('title', 'Tùy chỉnh Filter')

@section('content')
<div class="container-fluid">
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Tùy chỉnh cách lọc dữ liệu</h6>
        </div>
        <div class="card-body">
            <p class="text-muted mb-4">
                <i class="fas fa-info-circle"></i> 
                Cài đặt này sẽ được lưu vào tài khoản của bạn và áp dụng cho tất cả các màn hình filter.
            </p>

            <form id="filter-preferences-form">
                <div class="card mb-4">
                    <div class="card-body">
                        <h5 class="card-title mb-4">
                            <i class="fas fa-filter text-primary"></i> Cài đặt Filter
                        </h5>
                        
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" 
                                   id="filter-auto-submit" name="filter_auto_submit"
                                   {{ Auth::user()->filter_auto_submit ? 'checked' : '' }}>
                            <label class="form-check-label" for="filter-auto-submit">
                                <strong>Tự động lọc khi thay đổi filter</strong>
                            </label>
                        </div>
                        
                        <div class="alert alert-info">
                            <i class="fas fa-lightbulb"></i> 
                            <strong>Giải thích:</strong>
                            <ul class="mb-0 mt-2">
                                <li><strong>Bật:</strong> Khi bạn chọn ngày, app, hoặc bất kỳ filter nào, hệ thống sẽ tự động tìm kiếm ngay lập tức (không cần bấm nút "Lọc")</li>
                                <li><strong>Tắt:</strong> Bạn cần bấm nút "Lọc" để tìm kiếm sau khi chọn các filter</li>
                            </ul>
                        </div>

                        <div class="d-flex gap-2 mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Lưu cài đặt
                            </button>
                            <button type="button" class="btn btn-secondary" onclick="resetPreferences()">
                                <i class="fas fa-undo"></i> Đặt lại mặc định
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function() {
    // Submit form
    $('#filter-preferences-form').on('submit', function(e) {
        e.preventDefault();
        
        const filterAutoSubmit = $('#filter-auto-submit').is(':checked') ? 1 : 0;
        
        $.ajax({
            url: '{{ route("filter.preferences.save") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                filter_auto_submit: filterAutoSubmit
            },
            success: function(response) {
                Swal.fire({
                    icon: 'success',
                    title: 'Đã lưu!',
                    text: response.message || 'Cài đặt filter đã được lưu thành công',
                    timer: 1500,
                    showConfirmButton: false
                });
            },
            error: function(xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Lỗi!',
                    text: xhr.responseJSON?.message || 'Không thể lưu cài đặt'
                });
            }
        });
    });
});

function resetPreferences() {
    Swal.fire({
        title: 'Đặt lại về mặc định?',
        text: 'Cài đặt sẽ được đặt về "Bấm nút lọc"',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Đồng ý',
        cancelButtonText: 'Hủy'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: '{{ route("filter.preferences.reset") }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Đã đặt lại!',
                        text: response.message || 'Cài đặt đã được đặt lại về mặc định',
                        timer: 1500,
                        showConfirmButton: false
                    }).then(() => {
                        location.reload();
                    });
                }
            });
        }
    });
}
</script>
@endpush

@endsection