@extends('layouts.app')

@section('title')
    {{ __('Gán cổng đối tác') }}
@endsection

@section('gate')
    active
@endsection

@section('section.content')
    <section class="content">
        <div class="container-fluid">
            <div class="pg-desktop-wrap">
                <div class="pg-header mb-3">
                    <div class="pg-title">
                        <h4 class="mb-1">Quản lý đối tác</h4>
                        <div class="text-muted small">Gán cổng IN/OUT • Ưu tiên đối tác</div>
                    </div>

                    {{-- TOAST --}}
                    <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 99999">
                        {{-- SUCCESS --}}
                        @if (session('success'))
                            <div id="toastSuccess" class="toast toast-success" role="alert" data-bs-delay="2500">
                                <div class="toast-body">
                                    <i class="fas fa-check-circle"></i>
                                    {{ session('success') }}
                                </div>
                            </div>
                        @endif

                        {{-- WARNING --}}
                        @if (session('warning'))
                            <div id="toastWarning" class="toast toast-warning" role="alert" data-bs-delay="3000">
                                <div class="toast-body">
                                    <i class="fas fa-exclamation-circle"></i>
                                    {{ session('warning') }}
                                </div>
                            </div>
                        @endif

                        {{-- ERROR --}}
                        @if (session('error'))
                            <div id="toastError" class="toast toast-error" role="alert" data-bs-delay="3500">
                                <div class="toast-body">
                                    <i class="fas fa-times-circle"></i>
                                    {{ session('error') }}
                                </div>
                            </div>
                        @endif
                    </div>

                    <form class="pg-filter" method="GET">
                        <div class="pg-search">
                            <i class="fas fa-search"></i>
                            <input class="form-control" name="search" placeholder="Tìm username / tên"
                                value="{{ request('search') }}">
                        </div>

                        <label class="pg-check">
                            <input class="form-check-input" type="checkbox" name="only_priority" value="1"
                                {{ request('only_priority') ? 'checked' : '' }}>
                            <span>Ưu tiên</span>
                        </label>

                        <button class="btn btn-primary">
                            <i class="fas fa-filter me-1"></i> Lọc
                        </button>
                    </form>
                </div>

                {{-- BULK ACTION BAR --}}
                <div class="card pg-toolbar mb-3">
                    <div class="card-body">
                        <div class="toolbar-row">
                            <div class="toolbar-left">
                                <div class="picked">
                                    <div class="picked-label">Đã chọn</div>
                                    <div class="picked-count"><span id="selectedCount">0</span> đối tác</div>
                                </div>

                                <div class="divider"></div>

                                <form id="bulkGateForm" class="toolbar-form" method="POST"
                                    action="{{ route('app.partners.gates.bulk') }}">
                                    @csrf
                                    <input type="hidden" name="mode" id="bulkMode" value="gate_in">
                                    <div id="selectedInputs"></div>

                                    <select class="form-select" id="modeSelect">
                                        <option value="gate_in">Gán cổng IN</option>
                                        <option value="gate_out">Gán cổng OUT</option>
                                    </select>

                                    <select class="form-select" name="gate" id="gateSelect">
                                        @foreach ($gates as $gate)
                                            <option value="{{ $gate->name }}">Cổng {{ $gate->name }}</option>
                                        @endforeach
                                    </select>

                                    <button class="btn btn-success">
                                        <i class="fas fa-check me-1"></i> Gán
                                    </button>
                                </form>
                            </div>

                            <div class="toolbar-right">
                                <form id="bulkPriorityForm" class="toolbar-form" method="POST"
                                    action="{{ route('app.partners.gates.priority') }}">
                                    @csrf
                                    <input type="hidden" name="is_priority" id="priorityValue" value="1">
                                    <div id="selectedInputs2"></div>

                                    <div class="priority-input">
                                        <i class="fas fa-sticky-note"></i>
                                        <input class="form-control" name="priority_note"
                                            placeholder="Ghi chú ưu tiên (tuỳ chọn)">
                                    </div>

                                    <button class="btn btn-warning text-dark" type="submit"
                                        onclick="document.getElementById('priorityValue').value='1'">
                                        <i class="fas fa-star me-1"></i> Ưu tiên
                                    </button>

                                    <button class="btn btn-outline-secondary" type="submit"
                                        onclick="document.getElementById('priorityValue').value='0'">
                                        Bỏ ưu tiên
                                    </button>
                                </form>
                            </div>
                        </div>

                        <div class="toolbar-hint text-muted small mt-2">
                            Tip: tick checkbox ở bảng để chọn nhiều đối tác. “IN/OUT” sẽ cập nhật hàng loạt.
                        </div>
                    </div>
                </div>

                {{-- TABLE --}}
                <div class="card">
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0 pg-table">
                                <thead>
                                    <tr>
                                        <th class="text-center" style="width:58px">
                                            <div class="chk-wrap">
                                                <input type="checkbox" id="checkAll" class="chk-lg">
                                            </div>
                                        </th>
                                        <th>Đối tác</th>
                                        <th style="width:160px">Gate IN</th>
                                        <th style="width:160px">Gate OUT</th>
                                        <th style="width:140px">Ưu tiên</th>
                                        <th>Ghi chú</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($partners as $p)
                                        <tr>
                                            <td class="text-center">
                                                <div class="chk-wrap">
                                                    <input class="form-check-input row-check chk-lg" type="checkbox"
                                                        value="{{ $p->username }}">
                                                </div>
                                            </td>
                                            <td>
                                                <div class="fw-semibold">{{ $p->username }}</div>
                                                @if (!empty($p->name))
                                                    <div class="text-muted small">{{ $p->name }}</div>
                                                @endif
                                            </td>
                                            <td><span class="badge bg-info">{{ $p->gate_name ?? '-' }}</span></td>
                                            <td><span class="badge bg-dark">{{ $p->gate_out ?? '-' }}</span></td>
                                            <td>
                                                @if ($p->is_priority)
                                                    <span class="badge bg-warning text-dark">Ưu tiên</span>
                                                @else
                                                    <span class="text-muted">—</span>
                                                @endif
                                            </td>
                                            <td class="text-muted small">{{ $p->priority_note ?? '—' }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center text-muted py-4">
                                                Không có đối tác nào phù hợp bộ lọc.
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            ['toastSuccess', 'toastWarning', 'toastError'].forEach(id => {
                const el = document.getElementById(id);
                if (!el) return;
                const t = new bootstrap.Toast(el);
                t.show();
            });
            const checkAll = document.getElementById('checkAll');
            const selectedCount = document.getElementById('selectedCount');
            const selectedInputs = document.getElementById('selectedInputs');
            const selectedInputs2 = document.getElementById('selectedInputs2');

            const modeSelect = document.getElementById('modeSelect');
            const bulkMode = document.getElementById('bulkMode');
            const gateSelect = document.getElementById('gateSelect');

            if (!checkAll || !selectedCount || !selectedInputs || !selectedInputs2) return;

            const getRowChecks = () => Array.from(document.querySelectorAll('.row-check'));

            function rebuildHiddenInputs() {
                const selected = getRowChecks().filter(i => i.checked).map(i => i.value);
                selectedCount.textContent = selected.length;

                const html = selected.map(u => `<input type="hidden" name="usernames[]" value="${u}">`).join('');
                selectedInputs.innerHTML = html;
                selectedInputs2.innerHTML = html;
            }

            // sync mode -> hidden input
            if (modeSelect && bulkMode) {
                bulkMode.value = modeSelect.value;
                modeSelect.addEventListener('change', function() {
                    bulkMode.value = modeSelect.value;
                });
            }

            checkAll.addEventListener('change', function() {
                getRowChecks().forEach(i => i.checked = checkAll.checked);
                rebuildHiddenInputs();
            });

            getRowChecks().forEach(i => i.addEventListener('change', function() {
                // cập nhật trạng thái checkAll
                const all = getRowChecks();
                checkAll.checked = all.length && all.every(x => x.checked);
                rebuildHiddenInputs();
            }));

            rebuildHiddenInputs();
        });
    </script>
@endsection

@section('styles')
    <style>
        .toast {
            min-width: 320px;
            border-radius: 12px;
            color: #fff;
            font-weight: 500;
            box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
        }

        .toast-body {
            display: flex;
            gap: 10px;
            align-items: center;
            padding: 12px 14px;
        }

        .toast-body i {
            font-size: 18px;
        }

        /* SUCCESS = xanh */
        .toast-success {
            background: #1f8f4d;
        }

        /* WARNING = vàng */
        .toast-warning {
            background: #f2b705;
            color: #222;
        }

        /* ERROR = đỏ */
        .toast-error {
            background: #d93025;
        }

        /* Chỉ giới hạn width ở desktop, còn mobile/tablet full width */
        .pg-desktop-wrap {
            width: 100%;
            margin: 0 auto;
        }

        /* Desktop: thu hẹp đúng kiểu bạn khoanh đỏ */
        @media (min-width: 992px) {
            .pg-desktop-wrap {
                max-width: 1180px;
                /* bạn chỉnh số này để đúng "tầm khoanh đỏ" */
                padding-left: 12px;
                padding-right: 12px;
            }
        }

        /* Màn hình rất lớn: vẫn không vượt quá */
        @media (min-width: 1400px) {
            .pg-desktop-wrap {
                max-width: 1200px;
            }
        }

        /* ===== Header ===== */
        .pg-header {
            display: flex;
            gap: 16px;
            align-items: flex-end;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .pg-title h4 {
            font-weight: 700;
        }

        .pg-filter {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }

        .pg-search {
            position: relative;
            min-width: 280px;
        }

        .pg-search i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            opacity: .6;
        }

        .pg-search input {
            padding-left: 36px;
            border-radius: 10px;
        }

        .pg-check {
            display: flex;
            gap: 8px;
            align-items: center;
            padding: 8px 10px;
            border: 1px solid rgba(0, 0, 0, .1);
            border-radius: 10px;
            background: #fff;
            user-select: none;
        }

        /* ===== Toolbar ===== */
        .pg-toolbar .card-body {
            padding: 14px 14px 12px;
        }

        .toolbar-row {
            display: flex;
            gap: 12px;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .toolbar-left,
        .toolbar-right {
            display: flex;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
        }

        .picked {
            display: flex;
            flex-direction: column;
            line-height: 1.1;
            padding: 6px 10px;
            border-radius: 10px;
            background: rgba(0, 0, 0, .03);
            border: 1px solid rgba(0, 0, 0, .06);
        }

        .picked-label {
            font-size: 12px;
            color: #6c757d;
        }

        .picked-count {
            font-weight: 700;
            font-size: 14px;
        }

        .divider {
            width: 1px;
            height: 36px;
            background: rgba(0, 0, 0, .12);
        }

        .toolbar-form {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }

        .toolbar-form .form-select {
            min-width: 160px;
            border-radius: 10px;
        }

        .toolbar-form .btn {
            border-radius: 10px;
            white-space: nowrap;
        }

        .priority-input {
            position: relative;
            min-width: 260px;
        }

        .priority-input i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            opacity: .55;
        }

        .priority-input input {
            padding-left: 36px;
            border-radius: 10px;
        }

        /* ===== Table ===== */
        .pg-table thead th {
            background: #f8f9fa;
            font-weight: 700;
            border-bottom: 1px solid rgba(0, 0, 0, .06);
        }

        /* Checkbox: to + cân giữa chuẩn */
        .chk-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        .chk-lg {
            width: 22px !important;
            height: 22px !important;
            cursor: pointer;
            margin: 0 !important;
        }

        /* nếu bootstrap add padding/margin lạ */
        .pg-table td.text-center,
        .pg-table th.text-center {
            vertical-align: middle;
        }

        @media (max-width: 768px) {
            .chk-lg {
                width: 26px !important;
                height: 26px !important;
            }
        }

        /* căn giữa đẹp hơn trong cell */
        .pg-table td.text-center,
        .pg-table th.text-center {
            vertical-align: middle;
        }

        /* tăng vùng click cho mobile */
        .pg-table .form-check-input {
            margin: 6px auto;
        }

        .pg-table td,
        .pg-table th {
            padding: 14px 12px;
        }

        /* ===== Mobile ===== */
        @media (max-width: 768px) {
            .pg-search {
                min-width: 100%;
            }

            .pg-filter {
                width: 100%;
                justify-content: flex-start;
            }

            .pg-filter button {
                width: 100%;
            }

            .divider {
                display: none;
            }

            .toolbar-left,
            .toolbar-right {
                width: 100%;
            }

            .toolbar-form {
                width: 100%;
            }

            .toolbar-form .form-select,
            .priority-input {
                width: 100%;
                min-width: unset;
            }

            .toolbar-form .btn {
                width: 100%;
            }
        }

        /* Thu hẹp trang cho dễ nhìn */
        .pg-narrow {
            max-width: 1100px;
            margin: 0 auto;
        }

        @media (max-width: 1200px) {
            .pg-narrow {
                max-width: 980px;
            }
        }

        @media (max-width: 992px) {
            .pg-narrow {
                max-width: 100%;
            }
        }

        .pg-search {
            min-width: 220px;
        }

        .pg-search input {
            height: 40px;
        }

        .pg-check {
            height: 40px;
            padding: 6px 10px;
        }

        .pg-filter .btn {
            height: 40px;
            border-radius: 10px;
        }

        @media (min-width: 992px) {
            .pg-search {
                width: 260px;
                min-width: 260px;
            }
        }

        .pg-table td,
        .pg-table th {
            padding: 12px 10px;
        }

        .pg-table {
            width: 100%;
        }

        @media (min-width: 992px) {
            .pg-table {
                width: 100%;
            }

            /* giảm độ rộng các cột cố định */
            .pg-table th:nth-child(3),
            .pg-table th:nth-child(4) {
                width: 140px !important;
            }

            .pg-table th:nth-child(5) {
                width: 120px !important;
            }
        }

        .pg-toolbar .card-body {
            padding: 12px;
        }

        .toolbar-left,
        .toolbar-right {
            gap: 10px;
        }

        .toolbar-form .form-select {
            min-width: 180px;
            height: 40px;
        }

        .toolbar-form .btn {
            height: 40px;
        }
    </style>
@endsection