@extends('layouts.master')
@section('title')
    Branch Setup - Team Members
@endsection

@section('content')
    <style>
        .step-sidebar {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 20px;
        }

        .step-item {
            display: flex;
            align-items: flex-start;
            padding: 20px;
            margin-bottom: 15px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .step-item.active {
            background: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .step-item.completed {
            opacity: 0.7;
            background: #e8f5e9;
        }

        .step-icon {
            width: 48px;
            height: 48px;
            background: #e9ecef;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 24px;
        }

        .step-item.active .step-icon {
            background: #f3e8ff;
            color: #7c3aed;
        }

        .step-item.completed .step-icon {
            background: #4caf50;
            color: white;
        }

        .step-content h6 {
            margin: 0 0 5px 0;
            font-weight: 600;
            font-size: 16px;
        }

        .step-content p {
            margin: 0;
            font-size: 13px;
            color: #6c757d;
        }

        .step-badge {
            background: #fbbf24;
            color: #92400e;
            padding: 2px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            margin-left: 8px;
        }

        .step-badge.completed {
            background: #4caf50;
            color: white;
        }

        .form-section {
            background: #fff;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .form-section h4 {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .form-section .subtitle {
            color: #6c757d;
            font-size: 14px;
            margin-bottom: 30px;
        }

        .team-member-card {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 15px;
            transition: all 0.3s ease;
        }

        .team-member-card:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .member-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .member-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .member-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 18px;
        }

        .member-details h6 {
            margin: 0 0 5px 0;
            font-weight: 600;
            font-size: 16px;
        }

        .member-details p {
            margin: 0;
            font-size: 13px;
            color: #6b7280;
        }

        .member-actions {
            display: flex;
            gap: 10px;
        }

        .btn-icon {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            border: 1px solid #d1d5db;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-icon:hover {
            background: #f3f4f6;
        }

        .btn-icon.delete:hover {
            background: #fee;
            border-color: #ef4444;
            color: #ef4444;
        }

        .add-member-btn {
            border: 2px dashed #d1d5db;
            border-radius: 8px;
            padding: 30px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background: #f9fafb;
            margin-bottom: 20px;
        }

        .add-member-btn:hover {
            border-color: #7c3aed;
            background: #f3e8ff;
        }

        .add-member-btn i {
            font-size: 40px;
            color: #7c3aed;
            margin-bottom: 10px;
        }

        .role-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }

        .role-badge.manager {
            background: #dbeafe;
            color: #1e40af;
        }

        .role-badge.staff {
            background: #fef3c7;
            color: #92400e;
        }

        .role-badge.captain {
            background: #e0e7ff;
            color: #4338ca;
        }

        .btn-next {
            background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
            color: white;
            padding: 12px 30px;
            border-radius: 8px;
            border: none;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-next:hover {
            background: linear-gradient(135deg, #6d28d9 0%, #9333ea 100%);
            color: white;
        }

        .btn-previous {
            background: transparent;
            color: #6b7280;
            padding: 12px 30px;
            border-radius: 8px;
            border: 1px solid #d1d5db;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-previous:hover {
            background: #f9fafb;
            color: #374151;
        }

        .btn-skip {
            background: transparent;
            color: #9ca3af;
            padding: 12px 30px;
            border: none;
            font-weight: 600;
            text-decoration: underline;
        }

        .btn-skip:hover {
            color: #6b7280;
        }

        .form-label {
            font-weight: 500;
            margin-bottom: 8px;
            color: #374151;
        }

        .form-control,
        .form-select {
            border: 1px solid #d1d5db;
            border-radius: 6px;
            padding: 10px 14px;
            font-size: 14px;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: #7c3aed;
            box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
        }

        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #9ca3af;
        }

        .empty-state i {
            font-size: 48px;
            margin-bottom: 15px;
            opacity: 0.5;
        }
    </style>

    <div class="row">
        <!-- Sidebar Steps -->
        <div class="col-lg-3">
            <div class="step-sidebar">
                <div class="step-item completed">
                    <div class="step-icon">✓</div>
                    <div class="step-content">
                        <h6>Branch Details <span class="step-badge completed">Completed</span></h6>
                        <p>Add name and address of your business branch</p>
                    </div>
                </div>

                <div class="step-item completed">
                    <div class="step-icon">✓</div>
                    <div class="step-content">
                        <h6>Table Management <span class="step-badge completed">Completed</span></h6>
                        <p>Manage tables on your branch for advanced seating</p>
                    </div>
                </div>

                <div class="step-item active">
                    <div class="step-icon">👥</div>
                    <div class="step-content">
                        <h6>Team Members <span class="step-badge">In Progress</span></h6>
                        <p>Add your team members working in this branch</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Form -->
        <div class="col-lg-9">
            <form id="teamForm" method="POST">
                @csrf
                <input type="hidden" name="current_step" value="3">
                <input type="hidden" name="branch_id" value="{{ $branch->id }}">

                <div class="form-section">
                    <h4>Team Members</h4>
                    <p class="subtitle">Add team members who will work at this branch. They'll receive login credentials
                        via email.</p>

                    <div class="alert alert-info">
                        <strong>💡 Tip:</strong> You can assign different roles like Manager, Captain, or Staff. Each role
                        has different permissions.
                    </div>

                    <!-- Team Members List -->
                    <div id="teamMembersList">
                        <div class="empty-state">
                            <i class="fas fa-users"></i>
                            <p>No team members added yet. Click "Add Team Member" to get started.</p>
                        </div>
                    </div>

                    <!-- Add Member Button -->
                    <div class="add-member-btn" onclick="openMemberModal()">
                        <i class="fas fa-user-plus"></i>
                        <div style="font-weight: 600; color: #374151;">Add Team Member</div>
                        <div style="font-size: 12px; color: #6b7280;">Click to invite a new team member</div>
                    </div>

                    <!-- Form Actions -->
                    <div class="d-flex justify-content-between align-items-center mt-4">
                        <button type="button" class="btn btn-previous"
                            onclick="window.location.href='{{ route('branch.step2', $branch->id) }}'">
                            <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                <path fill-rule="evenodd"
                                    d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
                            </svg>
                            Previous
                        </button>
                        <div>
                            <button type="button" class="btn btn-skip" onclick="skipStep()">
                                Skip for now
                            </button>
                            <button type="submit" class="btn btn-next">
                                Complete Setup
                                <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd"
                                        d="M10.854 8.354a.5.5 0 000-.708l-3-3a.5.5 0 10-.708.708L9.293 7.5H4.5a.5.5 0 000 1h4.793l-2.147 2.146a.5.5 0 00.708.708l3-3z" />
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Add Member Modal -->
    <div class="modal fade" id="memberModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Team Member</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="addMemberForm">
                        <div class="mb-3">
                            <label class="form-label">Full Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="memberName" placeholder="Enter full name"
                                required>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Email Address <span class="text-danger">*</span></label>
                            <input type="email" class="form-control" id="memberEmail"
                                placeholder="email@example.com" required>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Phone Number <span class="text-danger">*</span></label>
                            <input type="tel" class="form-control" id="memberPhone" placeholder="10-digit phone number"
                                maxlength="10" required>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Role <span class="text-danger">*</span></label>
                            <select class="form-select" id="memberRole" required>
                                <option value="">-- Select Role --</option>
                                @foreach ($roles as $role)
                                    <option value="{{ $role->id }}">{{ $role->role_name }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="alert alert-warning" style="font-size: 13px;">
                            <strong>Note:</strong> An invitation email with login credentials will be sent to this email
                            address.
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" onclick="addMember()">Add Member</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        let teamMembers = [];
        let memberModal;
        const roles = @json($roles);

        $(document).ready(function() {
            // Initialize Bootstrap modal
            memberModal = new bootstrap.Modal(document.getElementById('memberModal'));

            // Load existing team members if any
            loadExistingMembers();

            // Phone number validation - only digits
            $('#memberPhone').on('input', function() {
                this.value = this.value.replace(/[^0-9]/g, '');
            });

            // Clear validation errors on input
            $('#addMemberForm input, #addMemberForm select').on('input change', function() {
                $(this).removeClass('is-invalid');
                $(this).next('.invalid-feedback').text('');
            });
        });

        function loadExistingMembers() {
            // TODO: Fetch existing members from API if editing
            renderMembers();
        }

        function openMemberModal() {
            document.getElementById('addMemberForm').reset();
            // Clear any validation errors
            $('#addMemberForm .is-invalid').removeClass('is-invalid');
            $('#addMemberForm .invalid-feedback').text('');
            memberModal.show();
        }

        function validateMemberForm() {
            let isValid = true;
            const name = $('#memberName');
            const email = $('#memberEmail');
            const phone = $('#memberPhone');
            const role = $('#memberRole');

            // Clear previous errors
            $('#addMemberForm .is-invalid').removeClass('is-invalid');
            $('#addMemberForm .invalid-feedback').text('');

            // Validate name
            if (!name.val().trim()) {
                name.addClass('is-invalid');
                name.next('.invalid-feedback').text('Please enter full name');
                isValid = false;
            } else if (name.val().trim().length < 3) {
                name.addClass('is-invalid');
                name.next('.invalid-feedback').text('Name must be at least 3 characters');
                isValid = false;
            }

            // Validate email
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!email.val().trim()) {
                email.addClass('is-invalid');
                email.next('.invalid-feedback').text('Please enter email address');
                isValid = false;
            } else if (!emailPattern.test(email.val())) {
                email.addClass('is-invalid');
                email.next('.invalid-feedback').text('Please enter a valid email address');
                isValid = false;
            }

            // Validate phone
            if (!phone.val().trim()) {
                phone.addClass('is-invalid');
                phone.next('.invalid-feedback').text('Please enter phone number');
                isValid = false;
            } else if (phone.val().length !== 10) {
                phone.addClass('is-invalid');
                phone.next('.invalid-feedback').text('Phone number must be 10 digits');
                isValid = false;
            }

            // Validate role
            if (!role.val()) {
                role.addClass('is-invalid');
                role.next('.invalid-feedback').text('Please select a role');
                isValid = false;
            }

            return isValid;
        }

        function addMember() {
            if (!validateMemberForm()) {
                return;
            }

            const name = $('#memberName').val().trim();
            const email = $('#memberEmail').val().trim();
            const phone = $('#memberPhone').val().trim();
            const roleId = $('#memberRole').val();

            // Check for duplicate email
            if (teamMembers.some(m => m.email.toLowerCase() === email.toLowerCase())) {
                $('#memberEmail').addClass('is-invalid');
                $('#memberEmail').next('.invalid-feedback').text('This email is already added');
                return;
            }

            // Check for duplicate phone
            if (teamMembers.some(m => m.phone === phone)) {
                $('#memberPhone').addClass('is-invalid');
                $('#memberPhone').next('.invalid-feedback').text('This phone number is already added');
                return;
            }

            // Get role details
            const role = roles.find(r => r.id == roleId);

            const member = {
                id: Date.now(),
                name: name,
                email: email,
                phone: phone,
                role_id: roleId,
                role_name: role ? role.role_name : 'Unknown'
            };

            teamMembers.push(member);
            renderMembers();
            memberModal.hide();
        }

        function removeMember(id) {
            if (confirm('Are you sure you want to remove this team member?')) {
                teamMembers = teamMembers.filter(m => m.id !== id);
                renderMembers();
            }
        }

        function getInitials(name) {
            return name.split(' ').map(n => n[0]).join('').toUpperCase().substring(0, 2);
        }

        function getRoleBadgeClass(roleName) {
            const name = roleName.toLowerCase();
            if (name.includes('manager')) return 'manager';
            if (name.includes('captain')) return 'captain';
            return 'staff';
        }

        function renderMembers() {
            const container = document.getElementById('teamMembersList');

            if (teamMembers.length === 0) {
                container.innerHTML = `
                    <div class="empty-state">
                        <i class="fas fa-users"></i>
                        <p>No team members added yet. Click "Add Team Member" to get started.</p>
                    </div>
                `;
                return;
            }

            container.innerHTML = '';

            teamMembers.forEach(member => {
                const card = `
                    <div class="team-member-card">
                        <div class="member-header">
                            <div class="member-info">
                                <div class="member-avatar">${getInitials(member.name)}</div>
                                <div class="member-details">
                                    <h6>${member.name}</h6>
                                    <p>${member.email} • ${member.phone}</p>
                                    <span class="role-badge ${getRoleBadgeClass(member.role_name)}">${member.role_name}</span>
                                </div>
                            </div>
                            <div class="member-actions">
                                <button type="button" class="btn-icon delete" onclick="removeMember(${member.id})" title="Remove">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                `;
                container.innerHTML += card;
            });
        }

        function skipStep() {
            if (confirm(
                    'Are you sure you want to skip adding team members? You can add them later from branch settings.'
                )) {
                submitForm();
            }
        }

        // Form submission
        $('#teamForm').on('submit', function(e) {
            e.preventDefault();
            submitForm();
        });

        function submitForm() {
            const submitBtn = $('#teamForm').find('button[type="submit"]');
            const skipBtn = $('#teamForm').find('.btn-skip');
            const originalText = submitBtn.html();

            submitBtn.prop('disabled', true).html(
                '<span class="spinner-border spinner-border-sm me-2"></span>Completing Setup...</span>');
            skipBtn.prop('disabled', true);

            const formData = {
                _token: '{{ csrf_token() }}',
                branch_id: {{ $branch->id }},
                current_step: 3,
                team_members: teamMembers
            };

            $.ajax({
                url: "{{ route('branch.completeSetup', $branch->id) }}",
                type: "POST",
                data: formData,
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        // Show success message with animation
                        const successAlert = `
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <strong>🎉 Success!</strong> ${response.message || 'Branch setup completed successfully!'}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        `;
                        $('.form-section').prepend(successAlert);

                        // Redirect after short delay
                        setTimeout(function() {
                            window.location.href = "{{ route('tenant.index') }}";
                        }, 1500);
                    } else {
                        submitBtn.prop('disabled', false).html(originalText);
                        skipBtn.prop('disabled', false);
                        alert(response.message || 'An error occurred. Please try again.');
                    }
                },
                error: function(xhr) {
                    submitBtn.prop('disabled', false).html(originalText);
                    skipBtn.prop('disabled', false);

                    let errorMessage = 'An error occurred. Please try again.';

                    if (xhr.responseJSON) {
                        if (xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        } else if (xhr.responseJSON.errors) {
                            const errors = Object.values(xhr.responseJSON.errors).flat();
                            errorMessage = errors.join('\n');
                        }
                    }

                    alert(errorMessage);
                }
            });
        }
    </script>
@endsection