@extends('layouts.business')

@section('title', 'Client Details')
@section('breadcrumb_title', 'Clients')
@section('breadcrumb_title_route', route('business.clients.index'))
@section('breadcrumb_sub_title', 'Client View')
@section('page_title', 'Client Details')

@section('content')
    <div class="min-h-screen bg-gray-50">
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <!-- Back Button -->
                        <div class="d-flex justify-content-end align-items-center mb-4">
                            <a href="{{ route('business.clients.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-1"></i>Back
                            </a>
                        </div>

                        <div class="row mt-4">
                            <!-- Client Profile Card -->
                            <div class="col-xl-4 col-lg-5 col-md-12 col-sm-12 mb-4 mb-lg-0">
                                <div class="card h-100">
                                    <div class="card-header pb-0 p-3">
                                        <div class="row">
                                            <div class="col-12 d-flex align-items-center">
                                                <h6 class="mb-0">Client Profile</h6>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body p-3">
                                        <div class="text-center">
                                            <div class="avatar avatar-xl position-relative">
                                                <img src="{{ asset('img/user.png') }}"
                                                    alt="{{ $client->full_name }}" class="avatar avatar-xl rounded-circle">
                                            </div>
                                            <h5 class="mt-3 mb-1">{{ $client->full_name }}</h5>
                                            <p class="text-muted mb-0 text-break">{{ $client->email }}</p>
                                            <p class="text-sm text-muted mb-3">{{ $client->phone }}</p>
                                        </div>

                                        <hr class="horizontal gray-light my-4">

                                        <div class="row text-center g-2">
                                            <div class="col-12 col-sm-6">
                                                <div class="border-radius-lg border border-dashed">
                                                    <div class="p-3">
                                                        <h6 class="text-primary text-gradient font-weight-bold text-sm mb-0">
                                                            {{ $client->bookings->count() }}
                                                        </h6>
                                                        <p class="text-sm mb-0">Total Bookings</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-12 col-sm-6">
                                                <div class="border-radius-lg border border-dashed">
                                                    <div class="p-3">
                                                        <h6 class="text-success text-gradient font-weight-bold text-sm mb-0">
                                                            Rs. {{ number_format($client->bookings->sum('total_price'), 2) }}
                                                        </h6>
                                                        <p class="text-sm mb-0">Total Spent</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Client Information -->
                            <div class="col-xl-8 col-lg-7 col-md-12 col-sm-12">
                                <div class="card h-100">
                                    <div class="card-header pb-0 p-3">
                                        <h6 class="mb-0">Client Information</h6>
                                    </div>
                                    <div class="card-body p-3">
                                        <ul class="list-group">
                                            <li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
                                                <div class="d-flex align-items-center">
                                                    <div class="icon icon-shape icon-sm me-3 bg-gradient-primary shadow text-center">
                                                        <i class="ni ni-single-02 text-white opacity-10 mt-2"></i>
                                                    </div>
                                                    <div class="d-flex flex-column">
                                                        <h6 class="mb-1 text-dark text-sm">Full Name</h6>
                                                        <span class="text-xs">{{ $client->full_name }}</span>
                                                    </div>
                                                </div>
                                            </li>

                                            <li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
                                                <div class="d-flex align-items-center">
                                                    <div class="icon icon-shape icon-sm me-3 bg-gradient-info shadow text-center">
                                                        <i class="ni ni-email-83 text-white opacity-10 mt-2"></i>
                                                    </div>
                                                    <div class="d-flex flex-column">
                                                        <h6 class="mb-1 text-dark text-sm">Email</h6>
                                                        <span class="text-xs text-break">{{ $client->email }}</span>
                                                    </div>
                                                </div>
                                            </li>

                                            <li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
                                                <div class="d-flex align-items-center">
                                                    <div class="icon icon-shape icon-sm me-3 bg-gradient-success shadow text-center">
                                                        <i class="ni ni-mobile-button text-white opacity-10 mt-2"></i>
                                                    </div>
                                                    <div class="d-flex flex-column">
                                                        <h6 class="mb-1 text-dark text-sm">Phone</h6>
                                                        <span class="text-xs">{{ $client->phone }}</span>
                                                    </div>
                                                </div>
                                            </li>

                                            <li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
                                                <div class="d-flex align-items-center">
                                                    <div class="icon icon-shape icon-sm me-3 bg-gradient-secondary shadow text-center">
                                                        <i class="ni ni-calendar-grid-58 text-white opacity-10 mt-2"></i>
                                                    </div>
                                                    <div class="d-flex flex-column">
                                                        <h6 class="mb-1 text-dark text-sm">Member Since</h6>
                                                        <span class="text-xs">{{ $client->created_at->format('M d, Y') }}</span>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Booking History Section -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header pb-0 p-3">
                                        <h6 class="mb-0">
                                            <i class="fas fa-calendar-check me-2"></i>
                                            Booking History ({{ $client->bookings->count() }})
                                        </h6>
                                    </div>
                                    <div class="card-body p-3">
                                        @if($client->bookings && $client->bookings->count() > 0)
                                            <div class="table-responsive">
                                                <table class="table table-sm" id="bookings-table">
                                                    <thead>
                                                        <tr>
                                                            <th>Vehicle</th>
                                                            <th>Pickup Date</th>
                                                            <th>Return Date</th>
                                                            <th>Location</th>
                                                            <th>Total Price</th>
                                                            <th>Status</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach($client->bookings as $booking)
                                                            <tr>
                                                                <td data-order="{{ $booking->vehicle ? $booking->vehicle->vehicle_name : 'ZZZ' }}">
                                                                    <div class="d-flex flex-column">
                                                                        <h6 class="mb-0 text-sm">{{ $booking->vehicle ? $booking->vehicle->vehicle_name : 'N/A' }}</h6>
                                                                        <p class="text-xs text-secondary mb-0">{{ $booking->vehicle ? $booking->vehicle->vehicle_no : '' }}</p>
                                                                    </div>
                                                                </td>
                                                                <td data-order="{{ $booking->pickup_date ? $booking->pickup_date->timestamp : 0 }}">
                                                                    {{ $booking->pickup_date ? $booking->pickup_date->format('M d, Y') : '-' }}
                                                                </td>
                                                                <td data-order="{{ $booking->return_date ? $booking->return_date->timestamp : 0 }}">
                                                                    {{ $booking->return_date ? $booking->return_date->format('M d, Y') : '-' }}
                                                                </td>
                                                                <td data-order="{{ $booking->location ?? 'ZZZ' }}">
                                                                    {{ $booking->location ?? '-' }}
                                                                </td>
                                                                <td data-order="{{ sprintf('%015.2f', $booking->total_price) }}">
                                                                    Rs. {{ number_format($booking->total_price, 2) }}
                                                                </td>
                                                                <td data-order="{{ $booking->status }}">
                                                                    @php
                                                                        $statusValue = (int)$booking->status;
                                                                        $statusLabel = '';
                                                                        $statusClass = '';

                                                                        switch($statusValue) {
                                                                            case 0:
                                                                                $statusLabel = 'Pending';
                                                                                $statusClass = 'warning';
                                                                                break;
                                                                            case 1:
                                                                                $statusLabel = 'Confirmed';
                                                                                $statusClass = 'success';
                                                                                break;
                                                                            case 2:
                                                                                $statusLabel = 'Handover to Client';
                                                                                $statusClass = 'info';
                                                                                break;
                                                                            case 3:
                                                                                $statusLabel = 'Return by Client';
                                                                                $statusClass = 'primary';
                                                                                break;
                                                                            case 4:
                                                                                $statusLabel = 'Rejected';
                                                                                $statusClass = 'danger';
                                                                                break;
                                                                            default:
                                                                                $statusLabel = 'Unknown';
                                                                                $statusClass = 'secondary';
                                                                                break;
                                                                        }
                                                                    @endphp
                                                                    <span class="badge badge-{{ $statusClass }}">
                                                                        {{ $statusLabel }}
                                                                    </span>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        @else
                                            <div class="text-center text-muted py-4">
                                                <i class="fas fa-calendar-times fa-2x mb-2"></i>
                                                <p>No bookings found for this client.</p>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

<style>
    /* Table alignment - Force left alignment */
    .table thead th {
        padding: 10px 15px !important;
        text-align: left !important;
        vertical-align: middle;
    }

    .table tbody td {
        padding: 10px 15px !important;
        text-align: left !important;
        vertical-align: middle;
    }

    /* Override any centered alignment */
    #bookings-table th,
    #bookings-table td {
        text-align: left !important;
    }

    /* Fix DataTable sorting overlap */
    .dataTable-sorter {
        padding-right: 20px !important;
    }

    .dataTable-table th {
        white-space: nowrap !important;
        padding-right: 25px !important;
        position: relative !important;
    }

    .dataTable-table td {
        white-space: nowrap !important;
    }

    .dataTable-table th a {
        display: inline-block !important;
        padding-right: 20px !important;
        position: relative !important;
    }

    .dataTable-table th.dataTable-ascending a::after,
    .dataTable-table th.dataTable-descending a::after {
        position: absolute !important;
        right: 5px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* Prevent text overflow and overlap */
    .dataTable-table th,
    .dataTable-table td {
        overflow: visible !important;
        text-overflow: ellipsis !important;
    }

    /* Prevent sorting arrow overlap */
    .dataTable-sorter::before,
    .dataTable-sorter::after {
        right: 8px !important;
    }

    /* Responsive improvements */
    @media (max-width: 991px) {
        /* Stack profile and info cards on tablets and below */
        .col-lg-7,
        .col-lg-5 {
            margin-bottom: 1rem;
        }
    }

    @media (max-width: 768px) {
        /* Adjust card padding on mobile */
        .card-body {
            padding: 1rem !important;
        }

        /* Reduce stats card padding on mobile */
        .border-radius-lg .p-3 {
            padding: 0.5rem !important;
        }

        /* Adjust avatar size on mobile */
        .avatar-xl {
            width: 80px !important;
            height: 80px !important;
        }

        /* Better text sizing on mobile */
        h5 {
            font-size: 1.1rem;
        }

        h6 {
            font-size: 0.9rem;
        }

        /* Adjust list items on mobile */
        .list-group-item {
            padding-left: 0.5rem !important;
            padding-right: 0.5rem !important;
        }

        .icon-shape {
            width: 35px !important;
            height: 35px !important;
            margin-right: 0.75rem !important;
        }

        /* Better back button on mobile */
        .btn {
            font-size: 0.875rem;
            padding: 0.5rem 1rem;
        }
    }

    @media (max-width: 576px) {
        /* Smaller stats cards */
        .text-sm {
            font-size: 0.75rem !important;
        }

        /* Stack stats vertically on very small screens */
        .row.g-2>.col-12 {
            margin-bottom: 0.5rem;
        }

        /* Compact table on mobile */
        .table {
            font-size: 0.8rem;
        }

        .table thead th,
        .table tbody td {
            padding: 0.5rem 0.5rem !important;
            text-align: left !important;
        }

        /* Adjust card margins */
        .card {
            margin-bottom: 1rem;
        }
    }

    @media (max-width: 420px) {
        /* Extra small screens - ultra compact */
        h5 {
            font-size: 1rem;
        }

        .avatar-xl {
            width: 70px !important;
            height: 70px !important;
        }

        .btn {
            font-size: 0.8rem;
            padding: 0.4rem 0.8rem;
        }
    }

    /* Ensure tables are scrollable on small screens */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    /* Fix word break for long emails and text */
    .text-break {
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
    }
</style>

@section('scripts')
    <script>
        $(document).ready(function() {
            // Initialize DataTable for bookings
            @if($client->bookings && $client->bookings->count() > 0)
                if (document.getElementById("bookings-table")) {
                    const table = document.getElementById("bookings-table");
                    
                    // Store original data-order values before initialization
                    const sortData = [];
                    const rows = table.querySelectorAll('tbody tr');
                    rows.forEach((row, rowIndex) => {
                        sortData[rowIndex] = [];
                        row.querySelectorAll('td').forEach((cell, colIndex) => {
                            sortData[rowIndex][colIndex] = cell.getAttribute('data-order') || cell.textContent.trim();
                        });
                    });
                    
                    const dataTable = new simpleDatatables.DataTable(table, {
                        searchable: true,
                        fixedHeight: false,
                        perPage: 10,
                        perPageSelect: [5, 10, 15, 20, 25],
                        columns: [
                            {
                                select: 0, // Vehicle - Sortable
                                sortable: true
                            },
                            {
                                select: 1, // Pickup Date - Sortable
                                sortable: true
                            },
                            {
                                select: 2, // Return Date - Sortable
                                sortable: true
                            },
                            {
                                select: 3, // Location - Sortable
                                sortable: true
                            },
                            {
                                select: 4, // Total Price - Sortable
                                sortable: true
                            },
                            {
                                select: 5, // Status - Not sortable
                                sortable: false
                            }
                        ],
                        labels: {
                            placeholder: "Search bookings...",
                            perPage: "{select} entries per page",
                            noRows: "No bookings found",
                            info: "Showing {start} to {end} of {rows} entries"
                        }
                    });

                    // Custom sort comparator using data-order attributes
                    dataTable.on('datatable.sort', function(column, direction) {
                        const tbody = dataTable.table.tBodies[0];
                        const rows = Array.from(tbody.querySelectorAll('tr'));
                        
                        rows.sort((rowA, rowB) => {
                            const cellA = rowA.cells[column];
                            const cellB = rowB.cells[column];
                            
                            if (!cellA || !cellB) return 0;
                            
                            // Get sort values from data-order attribute
                            let valueA = cellA.getAttribute('data-order') || cellA.textContent.trim();
                            let valueB = cellB.getAttribute('data-order') || cellB.textContent.trim();
                            
                            // Try to parse as numbers
                            const numA = parseFloat(valueA);
                            const numB = parseFloat(valueB);
                            
                            if (!isNaN(numA) && !isNaN(numB)) {
                                // Numeric comparison
                                return direction === 'desc' ? numB - numA : numA - numB;
                            } else {
                                // String comparison
                                if (direction === 'desc') {
                                    return valueB.toString().localeCompare(valueA.toString());
                                } else {
                                    return valueA.toString().localeCompare(valueB.toString());
                                }
                            }
                        });
                        
                        // Re-append rows in sorted order
                        rows.forEach(row => tbody.appendChild(row));
                    });
                }
            @endif
        });
    </script>
@endsection