@extends('layouts.app')
@section('title', 'Customer Details')
@section('content')

<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Customer Details</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item active">Customer Details</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        <div class="row">
            <input type="hidden" id="user_id" value="{{ request()->query('user_id') }}">

            <!-- Left column: Profile -->
            <div class="col-md-3">
                <div class="card card-primary card-outline">
                    <div class="card-body box-profile text-center">
                        <img class="profile-user-img img-fluid img-circle" src="{{ $user->user_profile_image_url }}" alt="User profile picture">
                        <h3 class="profile-username text-center">{{ ucwords($user->name) }}</h3>

                        <strong><i class="fas fa-envelope mr-1"></i> Email</strong>
                        <p class="text-muted">
                            <a href="mailto:{{ $user->email }}">{{ $user->email }}</a>
                        </p>
                        <hr>

                        <strong><i class="fas fa-phone-alt mr-1"></i> Phone No</strong>
                        <p class="text-muted">
                            @if($user->phone_number_with_code)
                            <a href="tel:{{ preg_replace('/\s+/', '', $user->phone_number_with_code) }}">{{ $user->phone_number_with_code }}</a>
                            @else
                            NA
                            @endif
                        </p>

                        <strong><i class="fas fa-language mr-1"></i> Language</strong>
                        <p class="text-muted">{{ ucfirst($user->language) ?? 'NA' }}</p>

                        <strong><i class="fas fa-user-tag mr-1"></i>Role</strong>
                        <p class="text-muted">{{ $user->user_type ?? 'NA' }}</p>
                    </div>
                </div>
            </div>

            <!-- Right column: Details Section -->
            <div class="col-md-9">
                <div class="card">
                    <div class="card-body">

                        <!-- User Addresses Section -->
                    
                        <h4>Vehicle Details</h4>
                        <div class="table-responsive">
                            <table class="table table-bordered text-nowrap text-center">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Vehicle Photo</th>
                                        <th>Year / Brand / Model</th>
                                        <th>License Plate</th>
                                        <th>Model Color</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if($vehicles->count() > 0)
                                    @foreach($vehicles as $index => $vehicle)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>
                                            <img src="{{ $vehicle->vehicle_photo_url }}" alt="Vehicle Photo" width="80">
                                        </td>
                                        <td>
                                            {{ $vehicle->year->year ?? 'N/A' }} 
                                            {{ $vehicle->brand->name ?? 'N/A' }}
                                            {{ $vehicle->model->name ?? 'N/A' }} 
                                        </td>
                                        <td>{{ $vehicle->license_plate ?? 'N/A' }}</td>
                                        <td>{{ $vehicle->color->name ?? 'N/A' }}</td>
                                    </tr>
                                    @endforeach
                                    @else
                                    <tr>
                                        <td colspan="5">No vehicles found for this user.</td>
                                    </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>


                        <hr>
                        <h4>Address Details</h4>
                        @if($user->addresses->count() > 0)
                        @php
                        $addresses = $user->addresses()->latest()->get();
                        @endphp
                        <div class="row align-items-stretch">
                            @foreach($addresses as $address)
                            <div class="col-md-6 d-flex {{ $loop->iteration > 2 ? 'mt-3' : '' }}">
                                <div class="card mb-3 w-100 h-100">
                                    <div class="card-body d-flex flex-column justify-content-between">
                                        <div>
                                            <div class="d-flex justify-content-between align-items-center">
                                                <h5 class="card-title mb-0">{{ $address->address_type_text }}</h5>
                                                @if($address->is_default)
                                                <span class="badge badge-success">Default Address</span>
                                                @endif
                                            </div>

                                            <p class="card-text mt-2">
                                                {{ $address->full_address }}
                                            </p>
                                        </div>

                                        <p class="text-muted mb-0 mt-auto">
                                            <strong>Latitude: </strong> {{ $address->latitude ?? '-' }},
                                            <strong>Longitude: </strong> {{ $address->longitude ?? '-' }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        @else
                        <p>No addresses found for this user.</p>
                        @endif

                        <!-- Back Button -->
                        <div class="mt-3">
                            <a href="{{ route('customer.list') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left mr-1"></i> Back
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection
@section('scripts')
<!-- jQuery Validation -->
<script src="{{ asset('js/jquery.validate.min.js') }}"></script>
<script src="{{ asset('js/additional-methods.min.js') }}"></script>
<!-- Custom JS -->
<script src="{{ asset('js/custom.js') }}"></script>

<script>
    $(document).ready(function() {
        $(document).on('click', '.pagination a', function(event) {
            event.preventDefault();

            let userId = $('#user_id').val();
            let url = $(this).attr('href');

            if (url.includes('?')) {
                url += '&user_id=' + encodeURIComponent(userId);
            } else {
                url += '?user_id=' + encodeURIComponent(userId);
            }

            fetchBookings(url);
        });

        function fetchBookings(url) {
            $.ajax({
                url: url,
                type: 'GET',
                success: function(data) {
                    $('#bookings-table').html(data.bookings);
                    $('#pagination-links').html(data.pagination_links);
                },
                error: function(xhr) {
                    alert('Something went wrong while loading bookings.');
                    console.log(xhr.responseText);
                }
            });
        }

        $(document).on('click', '.toggle-section', function() {
            let target = $(this).data('target');
            $('#' + target).toggleClass('d-none');
        });
    });
</script>
@endsection