@extends('admin.layout.app')

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

@section('content')
    <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 ">Cấu hình</h6>
            </div>

            <div class="card-body">
                <form id="addProductForm" method="POST" action="{{ route('setting.store') }}">
                    @csrf

                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs mb-3" id="settingTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general"
                                type="button" role="tab" aria-controls="general" aria-selected="true">
                                Cấu hình chung
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="layout-tab" data-bs-toggle="tab" data-bs-target="#layout"
                                type="button" role="tab" aria-controls="layout" aria-selected="false">
                                Giao diện
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="filter-tab" data-bs-toggle="tab" data-bs-target="#filter"
                                type="button" role="tab" aria-controls="filter" aria-selected="false">
                                <i class="fas fa-filter"></i> Tùy chỉnh lọc dữ liệu
                            </button>
                        </li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content" id="settingTabsContent">
                        <!-- Tab 1: Cấu hình chung -->
                        <div class="tab-pane fade show active" id="general" role="tabpanel" aria-labelledby="general-tab">
                            @if(Auth::user()->role_id == 1)
                                <div class="mb-3">
                                    <label for="exchange_rate" class="form-label required">
                                        <i class="bi bi-box me-1"></i>
                                        Giá $
                                    </label>
                                    <input type="text" class="form-control" id="exchange_rate" name="exchange_rate"
                                        placeholder="Nhập giá $" required
                                        value="{{ old('exchange_rate', $setting->exchange_rate) }}">
                                </div>
                            @endif

                            
                            <div class="mb-3">
                                <label for="loading_fee" class="form-label required">
                                    <i class="bi bi-box me-1"></i>
                                    Giá lỗ mặc định
                                </label>
                                <input type="text" class="form-control" id="default_loss_price" name="default_loss_price"
                                    placeholder="Phí nạp"
                                    value="{{ number_format(old('default_loss_price', $setting->default_loss_price) )}}">
                            </div>
                        </div>

                        <!-- Tab 2: Layout -->
                        <div class="tab-pane fade" id="layout" role="tabpanel" aria-labelledby="layout-tab">
                            <div class="mb-3 d-flex justify-content-start gap-2">

                                <div class="form-check d-flex align-items-center">
                                    <input class="form-check-input" type="radio" name="layout" id="layout1"
                                        value="1" {{ !Auth::check() && Auth::user()->is_layout_two ? 'checked' : '' }}>
                                    <label class="form-check-label" for="layout1">
                                        <img src="{{ asset('svg_layout/layout-svgrepo-com.svg') }}" alt="Layout 1"
                                            width="40" height="40">
                                    </label>
                                </div>
                                <div class="form-check d-flex align-items-center">
                                    <input class="form-check-input" type="radio" name="layout" id="layout2"
                                        value="2" {{ Auth::check() && Auth::user()->is_layout_two ? 'checked' : '' }}>
                                    <label class="form-check-label" for="layout2">
                                        <img src="{{ asset('svg_layout/layout7-svgrepo-com.svg') }}" alt="Layout 2"
                                            width="40" height="40">
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Tab 3: Filter Preferences -->
                        <div class="tab-pane fade" id="filter" role="tabpanel" aria-labelledby="filter-tab">
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle"></i>
                                <strong>Lưu ý:</strong> Cài đặt filter chỉ áp dụng cho phiên làm viếc hiện tại của bạn.
                            </div>
                            <div class="d-grid gap-2">
                                <a href="{{ route('filter.preferences.index') }}" class="btn btn-primary btn-lg">
                                    <i class="fas fa-filter"></i> Tùy chỉnh lọc dữ liệu
                                </a>
                                <p class="text-muted mt-2">
                                    <small>
                                        Bấm vào nút trên để mở màn hình tùy chỉnh filter. 
                                        Bạn có thể bật/tắt auto-submit cho từng filter trong Daily Day, Daily Month, và Daily Year.
                                    </small>
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Buttons -->
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-3">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-plus-lg me-1"></i>
                            Lưu
                        </button>
                    </div>
                </form>

            </div>
        </div>

    </div>
@endsection
<style scoped>
    .dataTables_filter {
        float: right;
    }

    @media (max-width:768px) {
        .dataTables_filter {
            float: left;
        }
    }
</style>
@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const input = document.getElementById('default_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);
            });

            // 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, '');
            });
        });
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $('.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) {
                        let url = '{{ route('role.delete', ':id') }}'.replace(':id', id);
                        $.ajax({
                            url: url,
                            type: 'DELETE',
                            success: function(response) {
                                Swal.fire('Đã xóa!', response.message, 'success').then(
                                    () => {
                                        location.reload();
                                    });
                            }
                        });

                    }
                })
            });
        });
    </script>
@endpush