@extends('web.layouts.admin')

@section('title', config('app.name'))


@section('content')
<main class="app-content" style="height: 50% !important;">
    <!-- User Details Section -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div class="d-flex align-items-center">
                    <i class="fa fa-user text-purple mr-2"></i>
                    <h6 class="m-0">User Details</h6>
                </div>
                <!-- <a href="javascript:history.back()" class="btn btn-light text-dark">Back</a> -->
            </div>

            <hr class="my-4">

            <div class="row">
                <!-- Left Column: Profile Image -->
                <div class="col-md-3 mb-3 text-center">
                    <label>Profile Image</label>
                    @if (!empty($data->image))
                    <a href="{{ asset($data->image) }}" target="_blank">
                        <img src="{{ asset($data->image) }}" alt="User Image" class="img-fluid mx-auto d-block"
                            style="width: 100px; height: 100px; object-fit: cover; border-radius: 8px;">
                    </a>
                    @else
                    <p>N/A</p>
                    @endif
                </div>

                <!-- Right Column: All User Details -->
                <div class="col-md-9">
                    <div class="row">
                        @php
                        $address = $data->addresses ?? null;
                        $device = $data->userDevice->first() ?? null;

                        $fields = [
                        ['icon' => 'user', 'label' => 'Full Name', 'value' => $data->full_name ?? 'N/A'],
                        ['icon' => 'envelope', 'label' => 'Email', 'value' => $data->email ?? 'N/A'],

                        [
                        'icon' => 'laptop',
                        'label' => 'Device Name',
                        'value' => $device?->device_name ?? 'N/A',
                        ],

                        [
                        'icon' => 'language',
                        'label' => 'Language',
                        'value' => $device?->language ?? 'N/A',
                        ],

                        [
                        'icon' => 'clock-o',
                        'label' => 'Timezone',
                        'value' => $device?->timezone ?? 'N/A',
                        ],

                        [
                        'icon' => 'bell',
                        'label' => 'Push Notification',
                        'value' => $device?->push_notification == '1'
                        ? 'Enabled'
                        : ($device?->push_notification === '0' ? 'Disabled' : 'N/A'),
                        ],

                        [
                        'icon' => 'hdd-o',
                        'label' => 'Total Space',
                        'value' => $totalSpace ?? 'N/A',
                        ],

                        [
                        'icon' => 'folder-open',
                        'label' => 'Used Space',
                        'value' => $usedSpace ?? 'N/A',
                        ],

                        [
                        'icon' => 'folder-o',
                        'label' => 'Free Space',
                        'value' => $freeSpace ?? 'N/A',
                        ],
                        ];
                        @endphp

                        @foreach ($fields as $field)
                        <div class="col-md-4 mb-3">
                            <div class="d-flex">
                                <div class="me-2 text-muted" style="width: 20px;">
                                    <i class="fa fa-{{ $field['icon'] }}"></i>
                                </div>
                                <div>
                                    <small class="text-muted d-block">{{ $field['label'] }}</small>
                                    <span class="small">{{ $field['value'] }}</span>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Horizontal line -->
    <hr class="my-4">

    <div class="card" id="activity-overview-container">
        <div class="card-body">
            <div class="d-flex align-items-center mb-3">
                <i class="fa fa-line-chart text-purple mr-2"></i>
                <h6 class="m-0">Activity Overview</h6>
            </div>

            <!-- Tab Navigation -->
            <ul class="nav nav-tabs mb-3" id="activityTabs" role="tablist">
                <!-- <li class="nav-item">
                        <a class="nav-link" id="appointment-tab" data-toggle="tab" href="#appointment">Appointments</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="spots-tab" data-toggle="tab" href="#spots">Spots</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="payments-tab" data-toggle="tab" href="#payments">Payment</a>
                    </li> -->

                <li class="nav-item">
                    <a class="nav-link" id="subscription-tab" data-toggle="tab" href="#subscriptions">Subscription</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" id="memory-book-tab" data-toggle="tab" href="#memory-books">Memory Book</a>
                </li>

            </ul>
            <div class="tab-content" id="activityTabsContent">

                <!-- spots Tab Content -->
                <!-- <div class="tab-pane fade show active" id="spots">
                        <div class="mt-3">
                            <div class="spots-container">
                                <table id="spots-table" class="table table-hover table-bordered spotsTable w-100">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Name</th>
                                            <th>Description</th>
                                            <th>Length</th>
                                            <th>Width</th>
                                            <th>Height</th>
                                            <th>Hourly Rate</th>
                                            <th>Daily Rate</th>
                                            <th>Weekly Rate</th>
                                            <th>Monthly Rate</th>
                                            <th>No of Slots</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                   
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div> -->

                <!-- Appointment DataTable -->
                <!-- <div class="tab-pane fade" id="appointment">
                        <div class="mt-3">
                            <div class="appointment-container">
                                <table id="appointment-table" class="table table-hover table-bordered paymentTable w-100">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Spot Owner</th>
                                            <th>Title</th>
                                            <th>Description</th>
                                            <th>Start Date Time</th>
                                            <th>End Date Time</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div> -->

                <!-- subscriptions Tab Content -->
                <div class="tab-pane fade" id="subscriptions">
                    <div class="mt-3">
                        <div class="subscriptions-container">
                            <table id="subscriptions-table" class="table table-hover table-bordered paymentTable w-100">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Name</th>
                                        <th>Transaction Id</th>
                                        <th>Type</th>
                                        <th>Purchase Date</th>
                                        <th>Payment Method</th>
                                        <th>Expiry Date</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Memory Books Tab Content -->
                <div class="tab-pane fade" id="memory-books">
                    <div class="mt-3">
                        <div class="memory-books-container">
                            <table id="memory-books-table" class="table table-hover table-bordered paymentTable w-100">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Title</th>
                                        <th>Description</th>
                                        <th>Template</th>
                                        <th>Cover Image</th>
                                        <th>Created Date</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Payments Tab Content -->
                <!-- <div class="tab-pane fade" id="payments">
                        <div class="mt-3">
                            <div class="payments-table-container">
                                <table id="payments-table" class="table table-hover table-bordered paymentTable w-100">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Customer Name</th>
                                            <th>business Name</th>
                                            <th>Transaction Id</th>
                                            <th>Amount</th>
                                            <th>Stripe Fee</th>
                                            <th>App Fee</th>
                                            <th>Payout Amount</th>
                                            <th>Created Date</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div> -->
            </div>

        </div>
    </div>
</main>


@stop

<style>
    thead {
        background-color: