@extends('layouts.template.main')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/project-follow.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
    <style>
        .supervisor-card {
            max-width: 960px;
        }

        .platform-tab {
            cursor: pointer;
        }

        .role-badge {
            font-size: 10px;
            padding: 2px 7px;
            border-radius: 20px;
            font-weight: 600;
            background: #e9ecef;
            color: #495057;
        }

        .role-badge.Developer {
            background: #dbeafe;
            color: #1d4ed8;
        }

        .role-badge.Designer {
            background: #fce7f3;
            color: #9d174d;
        }

        .role-badge.Tester {
            background: #dcfce7;
            color: #15803d;
        }

        .role-badge.Marketing {
            background: #fff7ed;
            color: #c2410c;
        }

        .arrow-icon {
            color: #6c757d;
        }

        .supervisor-row:hover {
            background: #f8f9fa;
        }

        /* Select2 custom style */
        .select2-container--default .select2-selection--multiple {
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            min-height: 38px;
            padding: 2px 6px;
        }
        .select2-container--default.select2-container--focus .select2-selection--multiple {
            border-color: #86b7fe;
            box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
        }
        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background-color: #0d6efd;
            border: none;
            color: #fff;
            border-radius: 20px;
            padding: 1px 10px;
            font-size: 11px;
        }
        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            color: rgba(255,255,255,0.8);
            margin-right: 4px;
        }
        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
            color: #fff;
            background: transparent;
        }
        .select2-container { width: 100% !important; }
        .select2-dropdown { border-color: #86b7fe; border-radius: 0.375rem; }
        .select2-search--dropdown .select2-search__field {
            border-radius: 0.25rem;
            border: 1px solid #dee2e6;
            padding: 4px 8px;
        }
        .select2-results__option[aria-selected=true] {
            background-color: #e7f0ff;
            color: #0d6efd;
        }
        .select2-results__option--highlighted {
            background-color: #0d6efd !important;
        }
        .selected-count-badge {
            font-size: 11px;
            background: #0d6efd;
            color: #fff;
            border-radius: 20px;
            padding: 1px 8px;
            margin-left: 4px;
        }
    </style>
@endpush

@section('title', 'Quản lý người phụ trách')

@section('content')
    <main>
        <header class="page-header page-header-compact page-header-light border-bottom bg-white mb-1">
            <div class="container-full px-4">
                <div class="page-header-content">
                    <div class="row align-items-center justify-content-between pt-1">
                        <div class="col-auto py-2">
                            <h1 class="page-header-title">
                                <div class="page-header-icon">
                                    <i data-feather="users"></i>
                                </div>
                                Quản lý người phụ trách
                            </h1>
                        </div>
                        <div class="col-auto py-2 d-flex gap-2">
                            <a href="{{ route('app_follow') }}" class="btn btn-outline-secondary btn-sm">
                                <i data-feather="arrow-left" class="me-1" style="width:14px;height:14px;"></i>
                                Project Follow LVT
                            </a>
                            <a href="{{ route('app_ios') }}" class="btn btn-outline-secondary btn-sm">
                                <i data-feather="arrow-left" class="me-1" style="width:14px;height:14px;"></i>
                                Project Follow IOS
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <div class="container-full px-4 mt-3">

            {{-- Thông báo --}}
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fa-solid fa-circle-check me-2"></i>{{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif
            @if (session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fa-solid fa-circle-exclamation me-2"></i>{{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            {{-- Platform tabs --}}
            <ul class="nav nav-tabs mb-3">
                <li class="nav-item">
                    <a class="nav-link {{ $platform === 'android' ? 'active fw-bold' : '' }}"
                        href="{{ route('app_supervisors.index', ['platform' => 'android']) }}">
                        <i class="fa-brands fa-android me-1"></i> Project Follow LVT
                        @if ($platform === 'android')
                            <span class="badge bg-primary ms-1">{{ $supervisors->count() }}</span>
                        @endif
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ $platform === 'ios' ? 'active fw-bold' : '' }}"
                        href="{{ route('app_supervisors.index', ['platform' => 'ios']) }}">
                        <i class="fa-brands fa-apple me-1"></i> Project Follow IOS
                        @if ($platform === 'ios')
                            <span class="badge bg-primary ms-1">{{ $supervisors->count() }}</span>
                        @endif
                    </a>
                </li>
            </ul>

            <div class="row">
                {{-- Cột trái: form thêm mới --}}
                <div class="col-lg-4 mb-4">
                    <div class="card h-100">
                        <div class="card-header py-3">
                            <h6 class="mb-0 fw-bold">
                                <i data-feather="plus-circle" style="width:15px;height:15px;" class="me-1"></i>
                                Thêm quan hệ phụ trách
                            </h6>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('app_supervisors.store') }}" method="POST">
                                @csrf
                                <input type="hidden" name="platform" value="{{ $platform }}">

                                <div class="mb-3">
                                    <label class="form-label fw-semibold small">
                                        Người phụ trách
                                        <span class="text-muted fw-normal">(được xem app của người kia)</span>
                                    </label>
                                    <select name="user_id" class="form-select form-select-sm" required>
                                        <option value="">-- Chọn user --</option>
                                        @foreach ($allUsers as $u)
                                            <option value="{{ $u->id }}"
                                                {{ old('user_id') == $u->id ? 'selected' : '' }}>
                                                {{ $u->name }}
                                                @if ($u->role)
                                                    ({{ $u->role }})
                                                @endif
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('user_id')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="text-center text-muted mb-3">
                                    <i data-feather="arrow-down" style="width:16px;height:16px;"></i>
                                    <span class="small">phụ trách / theo dõi</span>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label fw-semibold small">
                                        Người được phụ trách
                                        <span class="text-muted fw-normal">(user có tên trong app)</span>
                                        <span id="target-count-badge" class="selected-count-badge d-none">0</span>
                                    </label>
                                    <select name="target_ids[]" id="target_ids" class="form-select form-select-sm" multiple required>
                                        @foreach ($allUsers as $u)
                                            <option value="{{ $u->id }}"
                                                {{ in_array($u->id, old('target_ids', [])) ? 'selected' : '' }}>
                                                {{ $u->name }}{{ $u->role ? ' (' . $u->role . ')' : '' }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('target_ids')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                    @error('target_ids.*')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="alert alert-light border small py-2 mb-3">
                                    <i class="fa fa-info-circle me-1 text-primary"></i>
                                    <strong>Ví dụ:</strong> Quangnv phụ trách Ducnm
                                    → Quangnv sẽ thấy tất cả app
                                    {{ $platform === 'android' ? 'Android' : 'iOS' }}
                                    mà Ducnm đang là Designer/Developer/Tester/MKT/Data.
                                </div>

                                <button type="submit" class="btn btn-primary btn-sm w-100" id="btn-add-supervisor">
                                    <i data-feather="plus" style="width:14px;height:14px;" class="me-1"></i>
                                    Thêm quan hệ phụ trách
                                </button>
                            </form>
                        </div>
                    </div>
                </div>

                {{-- Cột phải: danh sách hiện tại --}}
                <div class="col-lg-8 mb-4">
                    <div class="card">
                        <div class="card-header py-3 d-flex align-items-center justify-content-between">
                            <h6 class="mb-0 fw-bold">
                                <i data-feather="list" style="width:15px;height:15px;" class="me-1"></i>
                                Danh sách quan hệ phụ trách
                                <span class="badge bg-secondary ms-1">{{ $supervisors->count() }}</span>
                            </h6>
                        </div>
                        <div class="card-body p-0">
                            @if ($supervisors->isEmpty())
                                <div class="text-center py-5 text-muted">
                                    <i data-feather="inbox" style="width:36px;height:36px;opacity:0.3;"
                                        class="mb-2 d-block mx-auto"></i>
                                    Chưa có quan hệ phụ trách nào cho platform này.
                                </div>
                            @else
                                <div class="table-responsive">
                                    <table class="table table-hover align-middle mb-0">
                                        <thead class="table-light">
                                            <tr>
                                                <th class="ps-3" style="width:40%">Người phụ trách</th>
                                                <th style="width:5%;text-align:center">→</th>
                                                <th style="width:40%">Người được phụ trách</th>
                                                <th style="width:15%;text-align:center">Xóa</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($supervisors as $sv)
                                                <tr class="supervisor-row">
                                                    <td class="ps-3">
                                                        <div class="d-flex align-items-center gap-2">
                                                            <div class="rounded-circle d-flex align-items-center justify-content-center text-white fw-bold"
                                                                style="width:30px;height:30px;font-size:11px;background:#6366f1;flex-shrink:0;">
                                                                {{ strtoupper(substr($sv->user->name ?? '?', 0, 1)) }}
                                                            </div>
                                                            <div>
                                                                <div class="fw-semibold small">
                                                                    {{ $sv->user->name ?? '(đã xóa)' }}</div>
                                                                @if ($sv->user?->role)
                                                                    <span
                                                                        class="role-badge {{ $sv->user->role }}">{{ $sv->user->role }}</span>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="text-center arrow-icon">
                                                        <i data-feather="arrow-right" style="width:14px;height:14px;"></i>
                                                    </td>
                                                    <td>
                                                        <div class="d-flex align-items-center gap-2">
                                                            <div class="rounded-circle d-flex align-items-center justify-content-center text-white fw-bold"
                                                                style="width:30px;height:30px;font-size:11px;background:#10b981;flex-shrink:0;">
                                                                {{ strtoupper(substr($sv->target->name ?? '?', 0, 1)) }}
                                                            </div>
                                                            <div>
                                                                <div class="fw-semibold small">
                                                                    {{ $sv->target->name ?? '(đã xóa)' }}</div>
                                                                @if ($sv->target?->role)
                                                                    <span
                                                                        class="role-badge {{ $sv->target->role }}">{{ $sv->target->role }}</span>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="text-center">
                                                        <form action="{{ route('app_supervisors.destroy', $sv->id) }}"
                                                            method="POST"
                                                            onsubmit="return confirm('Xóa quan hệ phụ trách này?')">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-sm btn-outline-danger"
                                                                title="Xóa">
                                                                <i data-feather="trash-2"
                                                                    style="width:13px;height:13px;"></i>
                                                            </button>
                                                        </form>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @endif
                        </div>
                    </div>

                    {{-- Ghi chú logic --}}
                    {{-- <div class="alert alert-light border mt-3 small">
                    <i class="fa fa-info-circle me-1 text-info"></i>
                    <strong>Cách hoạt động:</strong>
                    Khi A phụ trách B, A sẽ thấy tất cả app mà B đang được gán vào (Designer / Developer / Tester / MKT / Data).
                    A <em>không</em> được chỉnh sửa các app đó trừ khi A được cấp quyền riêng.
                    Một user có thể phụ trách nhiều người, và một người có thể bị phụ trách bởi nhiều người.
                </div> --}}
                </div>
            </div>
        </div>
    </main>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function () {
            // Khởi tạo Select2 cho "Người được phụ trách"
            $('#target_ids').select2({
                placeholder: '-- Chọn một hoặc nhiều người --',
                allowClear: true,
                closeOnSelect: false,
                language: {
                    noResults: function () { return 'Không tìm thấy user'; },
                    searching: function () { return 'Đang tìm...'; },
                    removeAllItems: function () { return 'Xóa tất cả'; },
                },
            });

            // Cập nhật badge đếm + text button
            function updateTargetUI() {
                var count = $('#target_ids').val() ? $('#target_ids').val().length : 0;
                var $badge = $('#target-count-badge');
                var $btn   = $('#btn-add-supervisor');

                if (count > 0) {
                    $badge.text(count + ' người').removeClass('d-none');
                    if (count === 1) {
                        $btn.html('<i data-feather="plus" style="width:14px;height:14px;" class="me-1"></i> Thêm quan hệ phụ trách');
                    } else {
                        $btn.html('<i data-feather="plus" style="width:14px;height:14px;" class="me-1"></i> Thêm ' + count + ' quan hệ phụ trách');
                    }
                } else {
                    $badge.addClass('d-none');
                    $btn.html('<i data-feather="plus" style="width:14px;height:14px;" class="me-1"></i> Thêm quan hệ phụ trách');
                }

                // Re-init feather icons
                if (typeof feather !== 'undefined') { feather.replace(); }
            }

            $('#target_ids').on('change', updateTargetUI);
            updateTargetUI();
        });
    </script>
@endpush