@extends('layouts.app')

@section('title', 'My Products & Services - SecureSoftPay')

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
    body { background-color: #f8f9fa; }
    
    .page-wrapper { 
        display: flex; 
        max-width: 1400px; 
        margin: 120px auto 50px; 
        gap: 40px; 
        padding: 0 15px;
        align-items: flex-start;
    }

    /* === সাইডবার ডিজাইন === */
    .page-sidebar { 
        width: 250px; 
        flex-shrink: 0; 
        margin-top: 85px;
    }
    
    .sidebar-actions h3 { 
        font-size: 18px; 
        font-weight: 700; 
        margin-bottom: 15px; 
        color: #333;
    }
    
    .sidebar-actions ul { list-style: none; padding: 0; }
    .sidebar-actions ul li { margin-bottom: 10px; }
    
    .sidebar-actions ul li a { 
        display: flex; 
        align-items: center; 
        gap: 10px; 
        text-decoration: none; 
        color: #0052cc; 
        font-weight: 600;
        font-size: 14px;
        transition: color 0.2s;
    }
    .sidebar-actions ul li a:hover { color: #003d99; }
    .sidebar-actions ul a i { width: 20px; text-align: center; }

    /* === মেইন কন্টেন্ট ডিজাইন === */
    .page-main-content { flex-grow: 1; min-width: 0; }
    
    .page-header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
    
    .page-header { text-align: left; }
    .page-header h1 { font-size: 32px; font-weight: 700; color: #212529; margin-bottom: 5px; }
    .breadcrumb { color: #6c757d; font-size: 14px; }

    /* === কন্ট্রোলস এবং সার্চ বার === */
    .controls-container { display: flex; gap: 15px; }

    .btn-add-new {
        background-color: #eef2ff;
        color: #0052cc;
        border: 1px solid #0052cc;
        padding: 8px 15px;
        border-radius: 4px;
        text-decoration: none;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 14px;
    }
    .btn-add-new:hover { background-color: #0052cc; color: white; }

    .search-box { position: relative; }
    .search-box input { 
        padding: 8px 15px 8px 35px; 
        border-radius: 4px; 
        border: 1px solid #ced4da; 
        width: 250px; 
        font-size: 14px;
    }
    .search-box i { 
        position: absolute; 
        left: 12px; 
        top: 50%; 
        transform: translateY(-50%); 
        color: #adb5bd; 
    }

    /* === টেবিল ডিজাইন === */
    .table-card { 
        background: #fff; 
        border: 1px solid #dee2e6; 
        border-radius: 6px; 
        overflow: hidden; 
        box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    }

    .table-top-bar {
        padding: 15px;
        border-bottom: 1px solid #dee2e6;
        display: flex;
        align-items: center;
        gap: 10px;
        background-color: #fff;
    }

    .data-table { width: 100%; border-collapse: collapse; }
    
    .data-table thead tr { background-color: #f1f3f5; color: #495057; }
    
    .data-table th { 
        padding: 12px 15px; 
        text-align: left; 
        font-weight: 600; 
        font-size: 13px; 
        text-transform: uppercase;
        border-bottom: 1px solid #dee2e6;
    }
    
    .data-table td { 
        padding: 15px; 
        text-align: left; 
        border-bottom: 1px solid #e9ecef; 
        vertical-align: middle; 
        background-color: #fff;
    }
    
    .data-table tr:last-child td { border-bottom: none; }

    .product-title { font-size: 15px; font-weight: 700; color: #212529; display: block; margin-bottom: 2px;}
    .product-domain { font-size: 13px; color: #6c757d; }
    
    .price-amount { font-size: 15px; font-weight: 500; color: #333; display: block; }
    .price-cycle { font-size: 12px; color: #6c757d; }

    .status-container { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; }
    .status-icon-active { color: #28a745; font-size: 16px; }
    .status-icon-pending { color: #ffc107; font-size: 16px; }
    .status-text-active { color: #28a745; }
    .status-text-pending { color: #ffc107; }

    .btn-manage-simple { background-color: #fff; border: 1px solid #ced4da; color: #333; padding: 6px 12px; border-radius: 4px; text-decoration: none; font-size: 13px; font-weight: 500; transition: all 0.2s; display: inline-block; }
    .btn-manage-simple:hover { background-color: #f8f9fa; border-color: #adb5bd; color: #000; }

    .dropdown { position: relative; display: inline-block; }
    .btn-manage-dropdown { background-color: #fff; border: 1px solid #ced4da; color: #333; padding: 6px 12px; border-radius: 4px; font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
    .btn-manage-dropdown:hover { background-color: #f8f9fa; border-color: #adb5bd; }
    .dropdown-content { display: none; position: absolute; right: 0; background-color: #fff; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.15); z-index: 100; border: 1px solid #e9ecef; border-radius: 4px; margin-top: 2px; }
    .dropdown:hover .dropdown-content { display: block; }
    .dropdown-content a { color: #333; padding: 10px 15px; text-decoration: none; display: block; font-size: 13px; text-align: left; border-bottom: 1px solid #f1f1f1; }
    .dropdown-content a:last-child { border-bottom: none; }
    .dropdown-content a:hover { background-color: #f8f9fa; color: #0052cc; }

    /* ফুটার এবং পেজিনেশন ডানদিকে */
    .table-footer { 
        padding: 15px; 
        border-top: 1px solid #dee2e6; 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        background-color: #fff;
    }
    
    .showing-text { font-size: 13px; color: #6c757d; }
    
    .pagination { display: flex; gap: 5px; }
    .page-link { padding: 5px 10px; border: 1px solid #dee2e6; background: #fff; text-decoration: none; color: #0052cc; border-radius: 3px; font-size: 13px; }
    .page-link.active { background: #0052cc; color: white; border-color: #0052cc; }
    .page-link.disabled { color: #ccc; pointer-events: none; background-color: #f8f9fa; }

    @media (max-width: 992px) {
        .page-wrapper { flex-direction: column; }
        .page-sidebar { width: 100%; margin-top: 20px; order: 1; text-align: center; }
        .page-main-content { order: 2; }
        .page-header-container { flex-direction: column; align-items: flex-start; }
        .controls-container { width: 100%; margin-top: 15px; }
        .search-box input { width: 100%; }
        .table-footer { flex-direction: column; align-items: flex-end; }
    }
</style>
@endpush

@section('content')
<div class="page-wrapper">
    <!-- বাম পাশের সাইডবার -->
    <aside class="page-sidebar">
        <div class="sidebar-actions">
            <h3>Actions</h3>
            <ul>
                <li><a href="#"><i class="fas fa-sync-alt"></i> Renew Services</a></li>
                <li><a href="{{ route('pricing') }}"><i class="fas fa-shopping-bag"></i> Place a New Order</a></li>
                <li><a href="#"><i class="fas fa-puzzle-piece"></i> View Available Addons</a></li>
            </ul>
        </div>
    </aside>

    <!-- ডান পাশের মেইন কন্টেন্ট -->
    <main class="page-main-content">
        <!-- হেডার এবং কন্ট্রোলস একসাথে -->
        <div class="page-header-container">
            <div class="page-header">
                <h1>My Products & Services</h1>
                <div class="breadcrumb">Portal Home / Client Area / My Products & Services</div>
            </div>
            <div class="controls-container">
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" id="serviceSearchInput" placeholder="Enter search term...">
                </div>
                <a href="{{ route('pricing') }}" class="btn-add-new"><i class="fas fa-plus"></i> Add New</a>
            </div>
        </div>
        
        <!-- টেবিল কার্ড -->
        <div class="table-card">
            <div class="table-top-bar">
                <span style="font-size: 14px; color: #555;">View</span>
                <select style="padding: 5px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px;"><option>All Entries</option></select>
            </div>

            <div style="overflow-x:auto;">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th style="padding-left: 20px;">Product/Service <i class="fas fa-sort"></i></th>
                            <th>Pricing <i class="fas fa-sort"></i></th>
                            <th>Next Due Date <i class="fas fa-sort"></i></th>
                            <th>Status <i class="fas fa-sort"></i></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="servicesTableBody">
                        @include('partials.services_table_body', ['services' => $services])
                    </tbody>
                </table>
            </div>

            <!-- টেবিল ফুটার এবং পেজিনেশন -->
            <div class="table-footer" id="tableFooter">
                <div class="showing-text">
                    Showing {{ $services->firstItem() ?? 0 }} to {{ $services->lastItem() ?? 0 }} of {{ $services->total() }} entries
                </div>
                
                @if($services->lastPage() > 1)
                <div class="pagination">
                    <!-- Previous Button -->
                    <a href="{{ $services->previousPageUrl() }}" class="page-link {{ $services->onFirstPage() ? 'disabled' : '' }}">Previous</a>
                    
                    <!-- Page Numbers -->
                    @for ($i = 1; $i <= $services->lastPage(); $i++)
                        <a href="{{ $services->url($i) }}" class="page-link {{ ($services->currentPage() == $i) ? 'active' : '' }}">{{ $i }}</a>
                    @endfor
                    
                    <!-- Next Button -->
                    <a href="{{ $services->nextPageUrl() }}" class="page-link {{ !$services->hasMorePages() ? 'disabled' : '' }}">Next</a>
                </div>
                @endif
            </div>
        </div>
    </main>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('serviceSearchInput');
    const tableBody = document.getElementById('servicesTableBody');
    const tableFooter = document.getElementById('tableFooter');
    let searchTimeout;

    searchInput.addEventListener('keyup', function() {
        const query = this.value.trim();
        
        clearTimeout(searchTimeout);

        searchTimeout = setTimeout(() => {
            if (query.length > 0) {
                if(tableFooter) tableFooter.style.display = 'none';
            } else {
                if(tableFooter) tableFooter.style.display = 'flex';
                // Reload original to fix pagination view if cleared
                window.location.href = '{{ route("my-services") }}';
                return;
            }

            fetch(`{{ route('ajax.services.search') }}?q=${encodeURIComponent(query)}`)
                .then(response => response.text())
                .then(html => {
                    tableBody.innerHTML = html;
                })
                .catch(error => {
                    console.error('Search Error:', error);
                    tableBody.innerHTML = '<tr><td colspan="5" style="text-align:center; color:red;">Error loading search results.</td></tr>';
                });
        }, 300);
    });
});
</script>
@endpush