@extends('layouts.frontend')
@section('title_page', 'Manage Team Members - Rusizi Veterinary')

@section('content')

<!--Start breadcrumb area-->
<section class="breadcrumb-area style2" style="background-image: url({{asset('images/resources/breadcrumb-bg-2.jpg')}});">
    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="inner-content-box clearfix">
                    <div class="title-s2 text-center">
                        <span>My Account</span>
                        <h1>Welcome <label style="color: rgb(25, 210, 96)" for="">{{ Auth::user()->name }}</label></h1>
                    </div>
                    <div class="breadcrumb-menu float-left">
                        <ul class="clearfix">
                            <li><a href="/">Home</a></li>
                            <li class="active">Team Members</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--End breadcrumb area-->

<!--Start Single Service Area-->
<section class="single-service-area">
    <div class="container">
        <div class="row">
            @include('frontend.partials.sidebar')

            <div class="col-xl-8 col-lg-7 col-md-12 col-sm-12">
                <!--Start login register area-->
                <section class="login-register-area">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-xl-12">
                                <div class="form">
                                    <div class="form-header text-center">
                                        <div class="form-icon">
                                            <i class="fas fa-users"></i>
                                        </div>
                                        <h1 class="form-title">Manage <span>Team</span> Members</h1>
                                        <p class="form-subtitle">View, edit, and manage your team members</p>
                                    </div>
                                    
                                    <!-- Success/Error Messages -->
                                    @if(session('success'))
                                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                                            <i class="fa fa-check-circle"></i> {{ session('success') }}
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                    @endif

                                    @if(session('error'))
                                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                            <i class="fa fa-exclamation-circle"></i> {{ session('error') }}
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                    @endif

                                    <div class="form-container">
                                        <!-- Action Buttons -->
                                        <div class="action-buttons mb-4">
                                            <a href="{{ route('team-members.create') }}" class="btn btn-success">
                                                <i class="fas fa-user-plus"></i> Add New Team Member
                                            </a>
                                        </div>

                                        <!-- Team Members Table -->
                                        @if($teamMembers->count() > 0)
                                            <div class="table-responsive">
                                                <table class="table table-hover team-members-table">
                                                    <thead>
                                                        <tr>
                                                            <th>Image</th>
                                                            <th>Name</th>
                                                            <th>Professional</th>
                                                            <th>Status</th>
                                                            <th>Order</th>
                                                            <th>Actions</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach($teamMembers as $member)
                                                            <tr>
                                                                <td>
                                                                    @if($member->image_path)
                                                                        <img src="{{ asset('public/'.$member->image_path) }}" 
                                                                             alt="{{ $member->full_names }}" 
                                                                             class="member-thumbnail">
                                                                    @else
                                                                        <div class="no-image">
                                                                            <i class="fas fa-user-circle"></i>
                                                                        </div>
                                                                    @endif
                                                                </td>
                                                                <td>
                                                                    <strong>{{ $member->full_names }}</strong>
                                                                    @if($member->description)
                                                                        <br><small class="text-muted">{{ Str::limit($member->description, 50) }}</small>
                                                                    @endif
                                                                </td>
                                                                <td>{{ $member->professional }}</td>
                                                                <td>
                                                                    <span class="status-badge status-{{ $member->is_active ? 'active' : 'inactive' }}">
                                                                        {{ $member->is_active ? 'Active' : 'Inactive' }}
                                                                    </span>
                                                                </td>
                                                                <td>{{ $member->display_order }}</td>
                                                                <td>
                                                                    <div class="btn-group" role="group">
                                                                        <a href="{{ route('team-members.edit', $member->id) }}" 
                                                                           class="btn btn-sm btn-primary" 
                                                                           title="Edit">
                                                                            <i class="fas fa-edit"></i>
                                                                        </a>
                                                                      
                                                                        <form action="{{ route('team-members.destroy', $member->id) }}" 
                                                                              method="POST" 
                                                                              class="d-inline delete-form">
                                                                            @csrf
                                                                            @method('DELETE')
                                                                            <button type="submit" 
                                                                                    class="btn btn-sm btn-danger" 
                                                                                    title="Delete"
                                                                                    onclick="return confirm('Are you sure you want to delete this team member?')">
                                                                                <i class="fas fa-trash"></i>
                                                                            </button>
                                                                        </form>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        @else
                                            <div class="empty-state text-center py-5">
                                                <i class="fas fa-users fa-3x text-muted mb-3"></i>
                                                <h3>No Team Members Found</h3>
                                                <p class="text-muted">Get started by adding your first team member.</p>
                                                <a href="{{ route('team-members.create') }}" class="btn btn-success">
                                                    <i class="fas fa-user-plus"></i> Add Team Member
                                                </a>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!--End login register area-->
            </div>
        </div>
    </div>
</section>
<!--End Single Service Area-->

<style>
    .action-buttons {
        text-align: right;
    }

    .btn-success {
        background: linear-gradient(135deg, #27ae60, #219653);
        border: none;
        border-radius: 50px;
        padding: 12px 25px;
        font-weight: 600;
        box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
        transition: all 0.3s ease;
    }

    .btn-success:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4);
    }

    .team-members-table {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    }

    .team-members-table thead {
        background: linear-gradient(135deg, #27ae60, #219653);
        color: white;
    }

    .team-members-table th {
        border: none;
        padding: 15px;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.85rem;
        letter-spacing: 0.5px;
    }

    .team-members-table td {
        padding: 15px;
        vertical-align: middle;
        border-color: #f0f5f7;
    }

    .member-thumbnail {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #f0f5f7;
    }

    .no-image {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #f8fafc;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #7f8c8d;
        border: 2px dashed #e8f0fe;
    }

    .status-badge {
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .status-active {
        background: #d4f3e0;
        color: #155724;
    }

    .status-inactive {
        background: #fde8e8;
        color: #721c24;
    }

    .btn-group .btn {
        margin: 0 2px;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .btn-group .btn:hover {
        transform: translateY(-2px);
    }

    .empty-state {
        background: #f8fafc;
        border-radius: 12px;
        border: 2px dashed #e8f0fe;
    }

    .empty-state i {
        opacity: 0.5;
    }

    /* Responsive design */
    @media (max-width: 768px) {
        .team-members-table {
            font-size: 0.9rem;
        }

        .team-members-table th,
        .team-members-table td {
            padding: 10px 8px;
        }

        .btn-group .btn {
            padding: 5px 8px;
            font-size: 0.8rem;
        }

        .action-buttons {
            text-align: center;
        }
    }
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // Auto-dismiss alerts after 5 seconds
    $(document).ready(function() {
        setTimeout(function() {
            $('.alert').fadeOut('slow');
        }, 5000);

        // Enhanced delete confirmation
        $('.delete-form').on('submit', function(e) {
            if (!confirm('Are you sure you want to delete this team member? This action cannot be undone.')) {
                e.preventDefault();
            }
        });
    });
</script>

@endsection