@extends('theme.layout')

@section('title',"Favourite Consultants")
@push('styles')
    <style>
        /* ===== Favourite Consultants Table Section ===== */
        .sec-favourite-table {
            background: linear-gradient(135deg, #f8faff 0%, #f0f5ff 100%);
            position: relative;
            overflow: hidden;
            min-height: 100vh;
            padding: 60px 0;
        }

        .sec-favourite-table::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(255,217,102,0.1) 0%, rgba(255,255,255,0) 70%);
            border-radius: 50%;
            z-index: 0;
        }

        .container {
            position: relative;
            z-index: 1;
        }

        /* Page Header */
        .page-header {
            margin-bottom: 40px;
        }

        .page-title {
            color: #0b1f3b;
            font-size: 2.8rem;
            font-weight: 700;
            background: linear-gradient(135deg, #0b1f3b 0%, #2a4a7a 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 15px;
            letter-spacing: -0.5px;
        }

        .title-decoration {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }

        .title-decoration span {
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, #ffd966, #ffb347);
            border-radius: 50px;
        }

        .title-decoration i {
            color: #ffd966;
            font-size: 1.5rem;
            animation: heartBeat 1.5s ease infinite;
        }

        @keyframes heartBeat {
            0% { transform: scale(1); }
            14% { transform: scale(1.3); }
            28% { transform: scale(1); }
            42% { transform: scale(1.3); }
            70% { transform: scale(1); }
        }

        /* Stats Cards */
        .stats-wrapper {
            margin-bottom: 40px;
        }

        .stat-card {
            background: white;
            border-radius: 25px;
            padding: 25px;
            text-align: center;
            box-shadow: 0 15px 35px rgba(11,31,59,0.1);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(255,217,102,0.2);
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, #ffd966, #ffb347);
        }

        .stat-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 50px rgba(11,31,59,0.15);
        }

        .stat-icon {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, rgba(255,217,102,0.2), rgba(255,180,70,0.2));
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }

        .stat-icon i {
            font-size: 2.2rem;
            color: #ff9f1c;
        }

        .stat-card h3 {
            font-size: 2.2rem;
            font-weight: 800;
            color: #0b1f3b;
            margin-bottom: 5px;
        }

        .stat-card p {
            color: #6c757d;
            font-weight: 500;
            margin: 0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-size: 0.9rem;
        }

        /* Table Card */
        .table-card {
            background: white;
            border-radius: 35px;
            padding: 35px;
            box-shadow: 0 30px 60px rgba(11,31,59,0.12);
            border: 1px solid rgba(255,217,102,0.3);
            transition: all 0.3s ease;
        }

        .table-card:hover {
            box-shadow: 0 40px 80px rgba(11,31,59,0.15);
        }

        /* Table Header */
        .table-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            flex-wrap: wrap;
            gap: 20px;
        }

        .table-header h4 {
            font-size: 1.8rem;
            font-weight: 700;
            color: #0b1f3b;
            margin: 0;
            position: relative;
            padding-left: 20px;
        }

        .table-header h4::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 5px;
            height: 35px;
            background: linear-gradient(135deg, #ffd966, #ffb347);
            border-radius: 50px;
        }

        /* Search Box */
        .search-box {
            position: relative;
            width: 300px;
        }

        .search-box input {
            width: 100%;
            padding: 15px 25px;
            padding-left: 55px;
            border: 2px solid #eef2f7;
            border-radius: 50px;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            background: white;
        }

        .search-box input:focus {
            outline: none;
            border-color: #ffd966;
            box-shadow: 0 10px 25px rgba(255,217,102,0.2);
        }

        .search-box i {
            position: absolute;
            left: 25px;
            top: 50%;
            transform: translateY(-50%);
            color: #ffd966;
            font-size: 1.2rem;
        }

        /* Table Styles */
        .favourite-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0 15px;
            margin-bottom: 0;
        }

        .favourite-table thead th {
            background: linear-gradient(135deg, #0b1f3b, #1e3a5f);
            color: white;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.9rem;
            letter-spacing: 0.5px;
            padding: 18px 20px;
            border: none;
        }

        .favourite-table thead th:first-child {
            border-radius: 20px 0 0 20px;
        }

        .favourite-table thead th:last-child {
            border-radius: 0 20px 20px 0;
        }

        .favourite-table tbody tr {
            background: white;
            border-radius: 20px;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }

        .favourite-table tbody tr:hover {
            transform: scale(1.02);
            box-shadow: 0 15px 35px rgba(255,217,102,0.2);
            background: linear-gradient(145deg, #ffffff, #fffaf0);
        }

        .favourite-table tbody td {
            padding: 20px;
            vertical-align: middle;
            border: none;
            color: #495057;
            font-weight: 500;
        }

        .favourite-table tbody td:first-child {
            border-radius: 20px 0 0 20px;
            font-weight: 700;
            color: #0b1f3b;
        }

        .favourite-table tbody td:last-child {
            border-radius: 0 20px 20px 0;
        }

        /* Company Name Cell */
        .company-cell {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .company-icon {
            width: 45px;
            height: 45px;
            background: linear-gradient(135deg, rgba(255,217,102,0.2), rgba(255,180,70,0.2));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .company-icon i {
            font-size: 1.5rem;
            color: #ff9f1c;
        }

        .company-name {
            font-weight: 700;
            color: #0b1f3b;
            font-size: 1.1rem;
        }

        /* Date Badge */
        .date-badge {
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            padding: 8px 18px;
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 600;
            color: #495057;
            display: inline-block;
            border: 1px solid rgba(255,217,102,0.3);
        }

        .date-badge i {
            color: #ffd966;
            margin-right: 8px;
        }

        /* Delete Button */
        .delete-btn {
            background: transparent;
            border: 2px solid #ff6b6b;
            color: #ff6b6b;
            width: 45px;
            height: 45px;
            border-radius: 15px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            font-size: 1.2rem;
            cursor: pointer;
        }

        .delete-btn:hover {
            background: #ff6b6b;
            color: white;
            transform: rotate(8deg) scale(1.1);
            border-color: #ff6b6b;
            box-shadow: 0 10px 25px rgba(255,107,107,0.3);
        }

        /* Pagination */
        .pagination-wrapper {
            margin-top: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }

        .pagination-info {
            color: #6c757d;
            font-size: 0.95rem;
        }

        .pagination {
            display: flex;
            gap: 8px;
            margin: 0;
        }

        .page-item .page-link {
            width: 45px;
            height: 45px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
            border: 2px solid #eef2f7;
            color: #495057;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .page-item .page-link:hover {
            background: #ffd966;
            border-color: #ffd966;
            color: #0b1f3b;
            transform: translateY(-3px);
        }

        .page-item.active .page-link {
            background: linear-gradient(135deg, #0b1f3b, #1e3a5f);
            border-color: #0b1f3b;
            color: #ffd966;
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
        }

        .empty-state i {
            font-size: 5rem;
            color: #ffd966;
            margin-bottom: 20px;
            opacity: 0.5;
        }

        .empty-state h5 {
            font-size: 1.8rem;
            font-weight: 700;
            color: #0b1f3b;
            margin-bottom: 10px;
        }

        .empty-state p {
            color: #6c757d;
            font-size: 1.1rem;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .page-title {
                font-size: 2rem;
            }

            .table-card {
                padding: 20px;
            }

            .search-box {
                width: 100%;
            }

            .favourite-table {
                font-size: 0.9rem;
            }

            .favourite-table thead th {
                padding: 12px 10px;
                font-size: 0.8rem;
            }

            .favourite-table tbody td {
                padding: 15px 10px;
            }

            .delete-btn {
                width: 35px;
                height: 35px;
                font-size: 1rem;
            }
        }
    </style>
@endpush

@section('content')
    <!-- ================= FAVOURITE CONSULTANTS TABLE SECTION ================= -->
    <section class="sec-favourite-table" style="margin-top: 60px;">
        <div class="container">

            <!-- Page Header -->
            <div class="page-header text-center">
                <h1 class="page-title">My Favourite Consultants</h1>
                <div class="title-decoration">
                    <span></span>
                    <i class="fas fa-heart"></i>
                    <span></span>
                </div>
                <p class="text-muted mt-3 fs-5">Manage your saved consultant profiles</p>
            </div>
            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show">
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <!-- Stats Cards -->
            <div class="row stats-wrapper g-4">
                <div class="col-md-4">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-heart"></i>
                        </div>
                        <h3>{{$data->count()}}</h3>
                        <p>Total Favourites</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-building"></i>
                        </div>
                        <h3>1</h3>
                        <p>Active Companies</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-calendar-plus"></i>
                        </div>
                        <h3>{{$thisMonth}}</h3>
                        <p>Added This Month</p>
                    </div>
                </div>
            </div>

            <!-- Main Table Card -->
            <div class="table-card">

                <!-- Table Header with Search -->
                <div class="table-header">
                    <h4>
                        <i class="fas fa-list-ul me-3 text-warning"></i>
                        Saved Consultants List
                    </h4>

                    <div class="search-box">
                        <i class="fas fa-search"></i>
                        <input type="text" placeholder="Search consultants..." id="tableSearch">
                    </div>
                </div>

                <!-- Favourite Consultants Table -->
                <div class="table-responsive">
                    <table class="favourite-table" id="favouriteTable">
                        <thead>
                        <tr>
                            <th width="80">SL</th>
                            <th>Company Name</th>
                            <th width="200">Created At</th>
                            <th width="120">Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($data as $d)
                            <tr>
                                <td>
                                    <span class="fw-bold text-primary">{{$loop->iteration}}</span>
                                </td>
                                <td>
                                    <div class="company-cell">
                                        <div class="company-icon">
                                            <i class="fas fa-building"></i>
                                        </div>
                                        <span class="company-name">{{$d->consultant->u_name}}</span>
                                    </div>
                                </td>
                                <td>
                                        <span class="date-badge">
                                            <i class="far fa-calendar-alt"></i>
                                            {{\Carbon\Carbon::parse($d->created_at)->format('d M, Y')}}
                                        </span>
                                </td>
                                <td>
                                    <form action="{{route('favourite-list.destroy',$d->id)}}" method="post">
                                        @csrf
                                        @method('DELETE')
                                    <button onclick="return confirm('Are you sure ?');" class="delete-btn"  title="Remove from favourites">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>

            </div>


        </div>
    </section>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

    <!-- JavaScript for Delete Functionality -->
    <script>
        // Delete function with confirmation
        function deleteConsultant(id) {
            if(confirm('Are you sure you want to remove this consultant from your favourites?')) {
                // Here you would typically make an AJAX call to delete the record
                alert('Consultant #' + id + ' removed from favourites!');

                // Optional: Remove the row from table
                // var row = event.target.closest('tr');
                // row.remove();
            }
        }

        // Search functionality
        document.getElementById('tableSearch').addEventListener('keyup', function() {
            let searchText = this.value.toLowerCase();
            let tableRows = document.querySelectorAll('#favouriteTable tbody tr');

            tableRows.forEach(row => {
                let companyName = row.querySelector('.company-name').textContent.toLowerCase();
                let dateText = row.querySelector('.date-badge').textContent.toLowerCase();

                if(companyName.includes(searchText) || dateText.includes(searchText)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        });

        // Optional: Add animation on page load
        document.addEventListener('DOMContentLoaded', function() {
            const rows = document.querySelectorAll('#favouriteTable tbody tr');
            rows.forEach((row, index) => {
                setTimeout(() => {
                    row.style.animation = `fadeInUp 0.5s ease forwards`;
                }, index * 100);
            });
        });
    </script>

    <style>
        /* Additional animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        #favouriteTable tbody tr {
            opacity: 0;
            animation: fadeInUp 0.5s ease forwards;
        }

        .btn-glow {
            background: linear-gradient(135deg, #0b1f3b, #1e3a5f);
            color: white;
            border-radius: 50px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 10px 25px rgba(11,31,59,0.2);
            transition: all 0.3s ease;
            border: none;
        }

        .btn-glow:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(11,31,59,0.3);
            color: #ffd966;
        }

        .btn-outline-warning {
            border: 2px solid #ffd966;
            color: #0b1f3b;
            border-radius: 50px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
        }

        .btn-outline-warning:hover {
            background: #ffd966;
            color: #0b1f3b;
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(255,217,102,0.3);
        }
    </style>
@endsection