@extends('layouts.app')
@section('title')
    {{ __('messages_301.User profile') }}
@endsection
@section('style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/css/pages/page-profile.css') }}" />

    <style>
        .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
            width: 100% !important;
        }

        .bordered-img {
            border: 5px solid black;
            /* Adjust the color and width as needed */
            border-radius: 5px;
            /* Adjust the radius to match the rounded corners if needed */
        }

        .shadow-img {
            box-shadow: 0 4px 8px rgb(0, 0, 0);
            /* Adjust the offset, blur, and color as needed */
            border-radius: 5px;
            /* Adjust the radius to match the rounded corners if needed */
        }

        .img_popup {
            cursor: pointer;
        }

        .box-img img {
            height: 100%;
            width: 100%;
            object-fit: contain;
            /* border: #e6b6b638 1px solid; */
            {{--  border-radius: 20px  --}}
        }

        .box-img {

            height: 165px;
        }
    </style>
@endsection
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        @include('inc.breadcrumb', [
            'breadcrumb_items' => [
                __('messages.Home') => route('home'),
                __('messages_303.users') => null,
                __('messages_301.Clients') => route('admin.clients.index'),
                __('messages_301.User profile') => 'active',
            ],
        ])



        <div class="container-xxl flex-grow-1 container-p-y">

            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="row">
                            <!-- Avatar Section -->
                            <div class="col-3">
                                <div class="user-avatar-section text-center">
                                    <img class="img-fluid rounded-circle mb-2"
                                        src="{{ $data->image ? asset($data->image) : asset('default-images/user-image_.png') }}"
                                        height="120" width="120" alt="User avatar" />
                                    <div class="user-info">
                                        {{-- <h4 class="mb-1">{{ $data->name }}</h4>
                                        <div class="mb-2">{{ $data->rate ? number_format($data->rate, 1) : '0.0' }}</div>
                                        <p class="mb-1">{{ $data->country?->name }}</p> --}}
                                        <span class="badge bg-label-{{ $data->mobile_verified_at ? 'success' : 'danger' }}">
                                            {{ $data->mobile_verified_at ? __('messages_301.Active') : __('messages_301.Inactive') }}
                                        </span>
                                    </div>

                                </div>
                            </div>

                            <!-- User Details Section -->
                            <div class="col-9">
                                <div class="info-container">
                                    <div class="row g-3">
                                        <div class="col-12 col-md-3">
                                            <div class="mb-2">
                                                <h3 class="fw-medium ">{{ $data->name }}</h3>
                                                {{-- <span>{{ $data->phone }}</span> --}}
                                            </div>
                                            <div class="mb-2">
                                                <img src="{{ asset('default-images/rating-5.png') }}" width="85px">
                                                <h5 class="fw-medium">({{ $data->rate ? $data->rate : '0.0' }})</h5>
                                                {{-- <span>{{ $data->email }}</span> --}}
                                            </div>
                                            <div class="mt-3">
                                                <a href="{{ route('admin.clients.edit', $data->id) }}"
                                                    class="btn btn-primary">
                                                    {{ __('messages.Edit') }}
                                                </a>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="mb-2">
                                                <small class="fw-medium ">{{ __('messages.Mobile') }}:</small>
                                                <span>({{ $data->mobile_country_code }}) {{ $data->mobile }}</span>
                                            </div>
                                            <div class="mb-2">
                                                <small class="fw-medium ">{{ __('messages_301.Country') }}:</small>
                                                <span>{{ $data->country?->name ?? '----' }}</span>
                                            </div>
                                            <div class="mb-2">
                                                <small class="fw-medium ">{{ __('messages_301.Governorate') }}:</small>
                                                <span>{{ $data->governorate?->name ?? '----' }}</span>
                                            </div>
                                            <div class="mb-2">
                                                <small class="fw-medium ">{{ __('messages_301.Wallet balance') }}:</small>
                                                <span>{{ $data->wallet }} EGP</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="card mb-3">
                        <div class="card-header pt-1">
                            <ul class="nav nav-tabs card-header-tabs" role="tablist">

                                <li class="nav-item" role="presentation">
                                    <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab"
                                        data-bs-target="#navs-tab-transactions" aria-controls="navs-tab-transactions"
                                        aria-selected="true">
                                        {{ __('messages_301.Transactions') }}
                                    </button>
                                </li>

                                <li class="nav-item" role="presentation">
                                    <button type="button" class="nav-link " role="tab" data-bs-toggle="tab"
                                        data-bs-target="#navs-tab-rate" aria-controls="navs-tab-rate" aria-selected="true">
                                        {{ __('messages.Rate') }}
                                    </button>
                                </li>

                            </ul>
                        </div>
                        <div class="card-body pt-3">
                            <div class="tab-content p-0">

                                <div class="tab-pane fade show active" id="navs-tab-transactions" role="tabpanel">
                                    <div class="row">
                                        <div class="col-xl-12 col-lg-5 col-md-5">

                                            <div class="table-responsive">
                                                <table class="table border-top">
                                                    <thead>
                                                        <tr>
                                                            <th class="text-truncate">#</th>
                                                            <th class="text-truncate">
                                                                {{ __('messages_301.Transaction type') }}</th>
                                                            <th class="text-truncate">
                                                                {{ __('messages_301.Transaction value') }}</th>
                                                            <th class="text-truncate">
                                                                {{ __('messages_301.Transaction date') }}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>

                                                        @include('inc.is_empty_data', [
                                                            'var_check_empty' => $data->wallet_transactions,
                                                            'var_check_empty_rows' => 4,
                                                        ])

                                                        @foreach ($data->wallet_transactions as $item)
                                                            <tr>
                                                                <th>{{ $loop->iteration }}</th>
                                                                <td class="text-truncate">
                                                                    <i
                                                                        class="ti ti-{{ $item->operation == 'minus' ? 'arrow-down text-danger' : 'arrow-up text-success' }}  ti-xs me-2"></i>
                                                                    <span class="fw-medium">

                                                                        @if ($item->type == 'order')
                                                                            {{ __('messages.Fees were deducted from trip no') . ' #' . $item->order->order_num }}
                                                                        @elseif($item->type == 'from_panel')
                                                                            {{ __('messages.Recharge the balance through the platform management') }}
                                                                        @else
                                                                            {{ __('messages.Recharge the balance via a bank card') }}
                                                                        @endif
                                                                    </span>
                                                                </td>
                                                                <td class="text-truncate"><span
                                                                        class=" {{ $item->operation == 'minus' ? 'text-danger' : 'text-success' }} ">{{ $item->operation == 'minus' ? '-' . $item->value : '+' . $item->value }}</span>
                                                                </td>
                                                                <td class="text-truncate">
                                                                    {{ \Carbon\Carbon::parse($item->created_at)->format('Y-m-d H:i A') }}
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>

                                            </div>

                                        </div>

                                    </div>

                                </div>
                                <div class="tab-pane fade " id="navs-tab-rate" role="tabpanel">
                                    <div class="row">
                                        <div class="col-xl-12 col-lg-5 col-md-5">

                                            <div class="table-responsive">
                                                <table class="table border-top">
                                                    <thead>
                                                        <tr>
                                                            <th class="text-truncate">#</th>
                                                            <th class="text-truncate">
                                                                {{ __('messages_301.Driver') }}</th>
                                                            <th class="text-truncate">
                                                                {{ __('messages_301.Order num') }}</th>
                                                            <th class="text-truncate">
                                                                {{ __('messages.Rate') }}</th>
                                                            <th class="text-truncate">
                                                                {{ __('messages_303.comment') }}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>

                                                        @include('inc.is_empty_data', [
                                                            'var_check_empty' => $data->customer_rates,
                                                            'var_check_empty_rows' => 5,
                                                        ])

                                                        @foreach ($data->customer_rates as $item)
                                                            <tr>
                                                                <th>{{ $loop->iteration }}</th>
                                                                <td class="text-truncate">
                                                                    {{ $item->driver?->name }}
                                                                </td>
                                                                <td class="text-truncate">
                                                                    #{{ $item->order?->order_num }}
                                                                </td>
                                                                <td class="text-truncate">
                                                                    ({{ $item->rate }})
                                                                </td>
                                                                <td class="text-truncate">
                                                                    <p>
                                                                        {!! $item->comment !!}
                                                                    </p>
                                                                </td>

                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset('assets/js/pages-account-settings-account.js') }}"></script>
    <script src="{{ asset('assets/js/pages-profile.js') }}"></script>
@endsection