@extends('app.app')
@section('title', '')
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <h4 class="py-3 mb-4">{{ __('titles.investors_administration') }}
            <span class="text-muted fw-light"> / {{ $data->user->name }} </span>
        </h4>
        <div
            class="d-flex flex-column flex-sm-row align-items-center justify-content-sm-between mb-4 text-center text-sm-start gap-2">
            <div class="mb-2 mb-sm-0">
                <h4 class="mb-1">{{ __('titles.ID') }} {{ __('titles.investor') }} #{{ $data->id }}</h4>
                <p class="mb-0">{{ $data->created_at->Format('Y/m/d') }}</p>
            </div>
            <button type="button" data-bs-target="#deleteUser" id="delete"
                                    data-bs-toggle="modal" class="btn btn-label-danger delete-customer">{{ __('titles.delete') }}
                {{ __('titles.investor') }}</button>
        </div>        
        <div class="row">
            @include('/app/layouts.alert')
            <!-- Customer-detail Sidebar -->
            <div class="col-xl-4 col-lg-5 col-md-5 order-1 order-md-0">
                <!-- Customer-detail Card -->
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="customer-avatar-section">
                            <div class="d-flex align-items-center flex-column">
                                <img class="img-fluid rounded my-3" src="{{ URL::asset($data->user->picture) }}"
                                    onerror="this.onerror=null;this.src='{{ URL::asset('users/avatar.png') }}';"
                                    height="110" width="110" alt="User avatar" />
                                <div class="customer-info text-center">
                                    <h4 class="mb-1">{{ $data->user->name }}</h4>
                                    <small>{{ __('titles.ID') }} {{ __('titles.investor') }} #{{ $data->id }}</small>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-around flex-wrap my-4">
                            
                            <div class="d-flex align-items-center gap-3">
                                <div class="avatar">
                                    <div class="avatar-initial rounded bg-label-primary">
                                        <i class="ti ti-shopping-cart ti-md"></i>
                                    </div>
                                </div>
                                <div class="gap-0 d-flex flex-column">
                                    <p class="mb-0 fw-medium">1200 {{ __('titles.riyal') }} </p>
                                    <small>{{ __('titles.total_invested') }}</small>
                                </div>
                            </div>
                            
                            <div class="d-flex align-items-center gap-3">
                                <div class="avatar">
                                    <div class="avatar-initial rounded bg-label-primary">
                                        <i class="ti ti-currency-dollar ti-md"></i>
                                    </div>
                                </div>
                                <div class="gap-0 d-flex flex-column">
                                    <p class="mb-0 fw-medium">12,378 {{ __('titles.riyal') }}</p>
                                    <small>{{ __('titles.total_profit') }}</small>
                                </div>
                            </div>
                        </div>

                        <div class="info-container">
                            <small
                                class="d-block pt-4 border-top fw-normal text-uppercase text-muted my-3">{{ __('titles.details') }} {{ __('titles.the') }}{{ __('titles.company') }}</small>
                            <ul class="list-unstyled">
                                <li class="mb-3">
                                    <span class="fw-medium me-2">{{ __('titles.city') }}:</span>
                                    <span>{{ $data->city->name }}</span>
                                </li>
                                <li class="mb-3">
                                    <span class="fw-medium me-2">{{ __('titles.bank') }}:</span>
                                    <span>{{ $data->bank->name }}</span>
                                </li>
                                <li class="mb-3">
                                    <span class="fw-medium me-2">{{ __('titles.id_number') }}:</span>
                                    <span class="">{{$data->id_number}}</span>
                                </li>
                                <li class="mb-3">
                                    <span class="fw-medium me-2">{{ __('titles.account_number') }}:</span>
                                    <span>{{ $data->account_number }}</span>
                                </li>
                                
                                <li class="mb-3">
                                    <span class="fw-medium me-2">{{ __('titles.iban_number') }}:</span>
                                    <span>{{ $data->iban_number }}</span>
                                </li>
                                
                                <li class="mb-3">
                                    <span class="fw-medium me-2">{{ __('titles.id_document_path') }}:</span>
                                    @if($data->id_document_path)
                                    <a href="{{ URL::asset($data->id_document_path) }}" target="_blank">
                                    {{ __('titles.the') }}{{ __('titles.link') }}
                                    </a>
                                    @endif
                                </li>
                            </ul>
                            <small
                                class="d-block pt-4 border-top fw-normal text-uppercase text-muted my-3">{{ __('titles.details') }} {{ __('titles.address') }}</small>
                            <ul class="list-unstyled">
                                <li class="mb-3">
                                    <span class="fw-medium me-2">{{ __('titles.building_number') }}:</span>
                                    <span>{{ $data->building_number }}</span>
                                </li>
                                <li class="mb-3">
                                    <span class="fw-medium me-2">{{ __('titles.unit_number') }}:</span>
                                    <span>{{ $data->unit_number }}</span>
                                </li>
                                <li class="mb-3">
                                    <span class="fw-medium me-2">{{ __('titles.street') }}:</span>
                                    <span class="">{{$data->street}}</span>
                                </li>
                                <li class="mb-3">
                                    <span class="fw-medium me-2">{{ __('titles.district') }}:</span>
                                    <span>{{ $data->district }}</span>
                                </li>
                                <li class="mb-3">
                                    <span class="fw-medium me-2">{{ __('titles.postal_code') }}:</span>
                                    <span class="">{{$data->postal_code}}</span>
                                </li>
                            </ul>
                            <small
                                class="d-block pt-4 border-top fw-normal text-uppercase text-muted my-3">{{ __('titles.details') }} {{ __('titles.account_owner') }}</small>
                            <ul class="list-unstyled">
                                <li class="mb-3">
                                    <span class="fw-medium me-2">{{ __('titles.name') }}:</span>
                                    <span>{{ $data->user->name }}</span>
                                </li>
                                <li class="mb-3">
                                    <span class="fw-medium me-2">{{ __('titles.email') }}:</span>
                                    <span>{{ $data->user->email }}</span>
                                </li>
                                <li class="mb-3">
                                    <span class="fw-medium me-2">{{ __('titles.phone') }}:</span>
                                    <span class="">{{$data->user->phone}}</span>
                                </li>
                            </ul>
                            <div class="d-flex justify-content-center">
                                <a href="javascript:;"  id="edit" class="btn btn-primary me-3" data-bs-target="#editUser"
                                    data-bs-toggle="modal">{{ __('titles.edit') }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--/ Customer Sidebar -->

            <!-- Customer Content -->
            <div class="col-xl-8 col-lg-7 col-md-7 order-0 order-md-1">
                <!-- Customer Pills -->
                <ul class="nav nav-pills flex-column flex-md-row mb-3" role="tablist">
                    <li class="nav-item">
                        <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab"
                            data-bs-target="#navs-pills-justified-overviews" aria-controls="navs-pills-justified-overviews"
                            aria-selected="true">
                            <i class="tf-icons ti ti-home ti-xs me-1"></i> {{ __('titles.overviews') }}
                        </button>
                    </li>
                    <li class="nav-item">
                        <button type="button" class="nav-link" role="tab" data-bs-toggle="tab"
                            data-bs-target="#navs-pills-justified-security" aria-controls="navs-pills-justified-security"
                            aria-selected="true">
                            <i class="tf-icons ti ti-home ti-xs me-1"></i> {{ __('titles.security') }}
                        </button>
                    </li>
                    <li class="nav-item">
                        <button type="button" class="nav-link" role="tab" data-bs-toggle="tab"
                            data-bs-target="#navs-pills-justified-notifications"
                            aria-controls="navs-pills-justified-notifications" aria-selected="true">
                            <i class="tf-icons ti ti-home ti-xs me-1"></i>
                            {{ __('titles.the') }}{{ __('titles.notifications') }}
                        </button>
                    </li>
                </ul>
                <!--/ Customer Pills -->

                <!-- / Customer cards -->
                <div class="tab-content">
                    <div class="tab-pane fade active show" id="navs-pills-justified-overviews" role="tabpanel">
                        <div class="row text-nowrap ">
                            <div class="col-md-6 mb-4">
                                <div class="card h-100">
                                    <div class="card-body">
                                        <div class="card-icon mb-3">
                                            <div class="avatar">
                                                <div class="avatar-initial rounded bg-label-primary">
                                                    <i class="ti ti-currency-dollar ti-md"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-info">
                                            <h4 class="card-title mb-3">{{ __('titles.total_invested') }}</h4>
                                            <div class="d-flex align-items-baseline mb-1 gap-1">
                                                <h4 class="text-primary mb-0">2345{{ __('titles.riyal') }}</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-4">
                                <div class="card h-100">
                                    <div class="card-body">
                                        <div class="card-icon mb-3">
                                            <div class="avatar">
                                                <div class="avatar-initial rounded bg-label-success">
                                                    <i class="ti ti-gift ti-md"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-info">
                                            <h4 class="card-title mb-3">{{ __('titles.total_profit') }}</h4>
                                            <div class="d-flex align-items-baseline mb-1 gap-1">
                                            <h4 class="text-success mb-0">215{{ __('titles.riyal') }}</h4>
                                        </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-4">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="card-icon mb-3">
                                            <div class="avatar">
                                                <div class="avatar-initial rounded bg-label-warning">
                                                    <i class="ti ti-star ti-md"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-info">
                                            <h4 class="card-title mb-3">{{ __('titles.wishlist') }}</h4>
                                            <div class="d-flex align-items-baseline mb-1 gap-1">
                                                <h4 class="text-warning mb-0">15</h4>
                                                <p class="mb-0">{{ __('titles.product') }} {{ __('titles.in') }}
                                                    {{ __('titles.wishlist') }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-4">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="card-icon mb-3">
                                            <div class="avatar">
                                                <div class="avatar-initial rounded bg-label-info">
                                                    <i class="ti ti-discount ti-md"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-info">
                                            <h4 class="card-title mb-3">{{__('titles.deals')}}</h4>
                                            <div class="d-flex align-items-baseline mb-1 gap-1">
                                                <h4 class="text-info mb-0">5</h4>
                                                <p class="mb-0">{{__('titles.deals_subscribed')}}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="navs-pills-justified-security" role="tabpanel">
                        <div class="card mb-4">
                            <h5 class="card-header">{{__('titles.change')}} {{__('titles.password')}}</h5>
                            <div class="card-body">
                                <form id="formChangePassword" method="POST" action="{{ route('app.customer.edit.password') }}"  
                                    class="fv-plugins-bootstrap5 fv-plugins-framework" novalidate="novalidate">
                                    @csrf
                                    <div class="alert alert-warning" role="alert">
                                        <h6 class="alert-heading mb-1">{{__('titles.text_change_password')}}</h6>
                                    </div>
                                    <div class="row">
                                        <div class="mb-3 col-12 col-sm-6 form-password-toggle fv-plugins-icon-container">
                                            <label class="form-label" for="newPassword">{{__('titles.new')}} {{__('titles.password')}}</label>
                                            <div class="input-group input-group-merge has-validation">
                                                <input class="form-control" type="password" id="newPassword"
                                                    name="newPassword" placeholder="············">
                                                <span class="input-group-text cursor-pointer"><i
                                                        class="ti ti-eye ti-xs"></i></span>
                                            </div>
                                            <div
                                                class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                            </div>
                                        </div>

                                        <div class="mb-3 col-12 col-sm-6 form-password-toggle fv-plugins-icon-container">
                                            <label class="form-label" for="confirmPassword">{{__('titles.confirm')}} {{__('titles.password')}} {{__('titles.new')}} </label>
                                            <div class="input-group input-group-merge has-validation">
                                                <input class="form-control" type="password" name="confirmPassword"
                                                    id="confirmPassword" placeholder="············">
                                                <span class="input-group-text cursor-pointer"><i
                                                        class="ti ti-eye ti-xs"></i></span>
                                            </div>
                                            <div
                                                class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                            </div>
                                        </div>
                                        <input type="hidden" name="investor_id" id="investor_id" value="{{$data->id}}">
                                        
                                        <input type="hidden" name="user_id" id="user_id" value="{{$data->user->id}}">
                                        <div>
                                            <button type="submit"
                                                class="btn btn-primary me-2 waves-effect waves-light">{{__('titles.change')}} {{__('titles.password')}}</button>
                                        </div>
                                    </div>
                                    <input type="hidden">
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="navs-pills-justified-notifications" role="tabpanel">
                        <div class="card mb-4">
                            <!-- Notifications -->
                            <div class="card-header">
                                <h5 class="card-title mb-1">{{__('titles.settings')}} {{__('titles.the')}}{{__('titles.notifications')}}</h5>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive border rounded">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th class="text-nowrap">{{__('titles.the')}}{{__('titles.type')}}</th>
                                                <th class="text-nowrap text-center">✉️ {{__('titles.email')}}</th>
                                                <th class="text-nowrap text-center">{{__('titles.push_notifications')}}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td class="text-nowrap">{{__('titles.status')}} {{__('titles.the')}}{{__('titles.order')}}</td>
                                                <td>
                                                    <div class="form-check d-flex justify-content-center">
                                                        <input class="form-check-input" type="checkbox"
                                                            id="defaultCheck1" checked="">
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="form-check d-flex justify-content-center">
                                                        <input class="form-check-input" type="checkbox"
                                                            id="defaultCheck3" checked="">
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="text-nowrap">{{__('titles.product')}} {{__('titles.new')}}</td>
                                                <td>
                                                    <div class="form-check d-flex justify-content-center">
                                                        <input class="form-check-input" type="checkbox"
                                                            id="defaultCheck4" checked="">
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="form-check d-flex justify-content-center">
                                                        <input class="form-check-input" type="checkbox"
                                                            id="defaultCheck5" >
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="text-nowrap">{{__('titles.offer')}} {{__('titles.special')}}</td>
                                                <td>
                                                    <div class="form-check d-flex justify-content-center">
                                                        <input class="form-check-input" type="checkbox"
                                                            id="defaultCheck7" >
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="form-check d-flex justify-content-center">
                                                        <input class="form-check-input" type="checkbox"
                                                            id="defaultCheck8" checked="">
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="card-body pt-0">
                                <button type="submit" class="btn btn-primary me-2 waves-effect waves-light">{{__('titles.save')}}
                                    </button>
                            </div>
                            <!-- /Notifications -->
                        </div>
                    </div>

                </div>

                <!-- / customer cards -->

                <!-- Invoice table -->

                <!-- /Invoice table -->
            </div>
            <!--/ Customer Content -->
        </div>
    </div>
@endsection