@extends('app.app')
@section('title', '')
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <h4 class="py-3 mb-4">{{ __('titles.users_administration') }}
            <span class="text-muted fw-light"> / {{ $data->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.customer_ID') }} #{{ $data->id }}</h4>
                <p class="mb-0">{{ $data->created_at->Format('Y/m/d') }}</p>
            </div>
            <button type="button" class="btn btn-label-danger delete-customer" data-bs-target="#deleteUser" id="delete"
                                    data-bs-toggle="modal">{{ __('titles.delete') }}
                {{ __('titles.customer') }}</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="{{ Storage::url('app/public/' . $data->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->name }}</h4>
                                    <small>{{ __('titles.customer_ID') }} #{{ $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-2">
                                <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">184</p>
                                    <small>{{ __('titles.orders') }}</small>
                                </div>
                            </div>
                            <div class="d-flex align-items-center gap-2">
                                <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') }}
                                        {{ __('titles.the') }}{{ __('titles.orders') }}</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') }}</small>
                            <ul class="list-unstyled">
                                <li class="mb-3">
                                    <span class="fw-medium me-2">{{ __('titles.name') }}:</span>
                                    <span>{{ $data->name }}</span>
                                </li>
                                <li class="mb-3">
                                    <span class="fw-medium me-2">{{ __('titles.email') }}:</span>
                                    <span>{{ $data->email }}</span>
                                </li>
                                <li class="mb-3">
                                    <span class="fw-medium me-2">{{ __('titles.birthdate') }}:</span>
                                    <span>{{ $data->birthdate }}</span>
                                </li>
                                <li class="mb-3">
                                    <span class="fw-medium me-2">{{ __('titles.gender') }}:</span>
                                    <span>{{ $data->gender_name }}</span>
                                </li>
                                <li class="mb-3">
                                    <span class="fw-medium me-2">{{ __('titles.phone') }}:</span>
                                    <span>{{ $data->phone }}</span>
                                </li>

                            </ul>
                            <div class="d-flex justify-content-center">
                                <a href="javascript:;" class="btn btn-primary me-3" data-bs-target="#editUser" id="edit"
                                    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-address" aria-controls="navs-pills-justified-address"
                            aria-selected="true">
                            <i class="tf-icons ti ti-home ti-xs me-1"></i>
                            {{ __('titles.the') }}{{ __('titles.addresses') }}
                        </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') }}
                                                {{ __('titles.the') }}{{ __('titles.orders') }}</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.order') }}</h4>
                                            <div class="d-flex align-items-baseline mb-1 gap-1">
                                                <h4 class="text-success mb-0">5</h4>
                                            <p class="mb-0"> {{ __('titles.count') }} {{ __('titles.the') }}{{ __('titles.orders') }}</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-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.coupons')}}</h4>
                                            <div class="d-flex align-items-baseline mb-1 gap-1">
                                                <h4 class="text-info mb-0">21</h4>
                                                <p class="mb-0">{{__('titles.coupons_used')}}</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') }}" 
                                    enctype="multipart/form-data" 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="user_id" id="user_id" value="{{$data->id}}">
                                        <div>
                                            <button type="submit"
                                                class="btn btn-primary me-2 waves-effect waves-light">{{__('titles.change')}} {{__('titles.password')}}</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="navs-pills-justified-address" role="tabpanel">
                        <div class="card card-action mb-4">
                            <div class="card-header align-items-center py-4">
                                <h5 class="card-action-title mb-0">{{__('titles.addresses')}} </h5>
                                <div class="card-action-element">
                                    <button class="btn btn-label-primary waves-effect" type="button"
                                        data-bs-toggle="modal" data-bs-target="#addNewAddress">
                                        {{__('titles.add')}} {{__('titles.address')}} {{__('titles.new')}}
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="accordion accordion-flush accordion-arrow-left"
                                    id="ecommerceBillingAccordionAddress">
                                    <div class="accordion-item border-bottom">
                                        <div class="accordion-header d-flex justify-content-between align-items-center flex-wrap flex-sm-nowrap"
                                            id="headingHome">
                                            <a class="accordion-button collapsed" data-bs-toggle="collapse"
                                                data-bs-target="#ecommerceBillingAddressHome" aria-expanded="false"
                                                aria-controls="headingHome" role="button">
                                                <span>
                                                    <span class="d-flex gap-2 align-items-baseline">
                                                        <span class="h6 mb-1">Home</span>
                                                        <span class="badge bg-label-success">Default Address</span>
                                                    </span>
                                                    <span class="mb-0 text-muted">23 Shatinon Mekalan</span>
                                                </span>
                                            </a>
                                            <div class="d-flex gap-3 p-4 p-sm-0 pt-0 ms-1 ms-sm-0">
                                                <a href="javascript:void(0);"><i
                                                        class="ti ti-pencil text-secondary ti-sm"></i></a>
                                                <a href="javascript:void(0);"><i
                                                        class="ti ti-trash text-secondary ti-sm"></i></a>
                                                <button class="btn p-0" data-bs-toggle="dropdown" aria-expanded="false"
                                                    role="button">
                                                    <i class="ti ti-dots-vertical text-secondary ti-sm mt-1"></i>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="javascript:void(0);">Set as default
                                                            address</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div id="ecommerceBillingAddressHome" class="accordion-collapse collapse"
                                            data-bs-parent="#ecommerceBillingAccordionAddress">
                                            <div class="accordion-body ps-4 ms-2">
                                                <h6 class="mb-1">Violet Mendoza</h6>
                                                <p class="mb-1">23 Shatinon Mekalan,</p>
                                                <p class="mb-1">Melbourne, VIC 3000,</p>
                                                <p class="mb-1">LondonUK</p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="accordion-item border-bottom border-top-0">
                                        <div class="accordion-header d-flex justify-content-between align-items-center flex-wrap flex-sm-nowrap"
                                            id="headingOffice">
                                            <a class="accordion-button collapsed" data-bs-toggle="collapse"
                                                data-bs-target="#ecommerceBillingAddressOffice" aria-expanded="false"
                                                aria-controls="headingOffice" role="button">
                                                <span class="d-flex flex-column">
                                                    <span class="h6 mb-0">Office</span>
                                                    <span class="mb-0 text-muted">45 Roker Terrace</span>
                                                </span>
                                            </a>
                                            <div class="d-flex gap-3 p-4 p-sm-0 pt-0 ms-1 ms-sm-0">
                                                <a href="javascript:void(0);"><i
                                                        class="ti ti-pencil text-secondary ti-sm"></i></a>
                                                <a href="javascript:void(0);"><i
                                                        class="ti ti-trash text-secondary ti-sm"></i></a>
                                                <button class="btn p-0" data-bs-toggle="dropdown" aria-expanded="false"
                                                    role="button">
                                                    <i class="ti ti-dots-vertical text-secondary ti-sm mt-1"></i>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="javascript:void(0);">Set as default
                                                            address</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div id="ecommerceBillingAddressOffice" class="accordion-collapse collapse"
                                            aria-labelledby="headingOffice"
                                            data-bs-parent="#ecommerceBillingAccordionAddress">
                                            <div class="accordion-body ps-4 ms-2">
                                                <h6 class="mb-1">Violet Mendoza</h6>
                                                <p class="mb-1">45 Roker Terrace,</p>
                                                <p class="mb-1">Latheronwheel,</p>
                                                <p class="mb-1">KW5 8NW</p>
                                                <p class="mb-1">LondonUK</p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="accordion-item border-top-0">
                                        <div class="accordion-header d-flex justify-content-between align-items-center flex-wrap flex-sm-nowrap"
                                            id="headingFamily">
                                            <a class="accordion-button collapsed" data-bs-toggle="collapse"
                                                data-bs-target="#ecommerceBillingAddressFamily" aria-expanded="false"
                                                aria-controls="headingFamily" role="button">
                                                <span class="d-flex flex-column">
                                                    <span class="h6 mb-0">Family</span>
                                                    <span class="mb-0 text-muted">512 Water Plant</span>
                                                </span>
                                            </a>
                                            <div class="d-flex gap-3 p-4 p-sm-0 pt-0 ms-1 ms-sm-0">
                                                <a href="javascript:void(0);"><i
                                                        class="ti ti-pencil text-secondary ti-sm"></i></a>
                                                <a href="javascript:void(0);"><i
                                                        class="ti ti-trash text-secondary ti-sm"></i></a>
                                                <button class="btn p-0" data-bs-toggle="dropdown" aria-expanded="false"
                                                    role="button">
                                                    <i class="ti ti-dots-vertical text-secondary ti-sm mt-1"></i>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="javascript:void(0);">Set as default
                                                            address</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div id="ecommerceBillingAddressFamily" class="accordion-collapse collapse"
                                            aria-labelledby="headingFamily"
                                            data-bs-parent="#ecommerceBillingAccordionAddress">
                                            <div class="accordion-body ps-4 ms-2">
                                                <h6 class="mb-1">Violet Mendoza</h6>
                                                <p class="mb-1">512 Water Plant,</p>
                                                <p class="mb-1">Melbourne, NY 10036,</p>
                                                <p class="mb-1">New York,</p>
                                                <p class="mb-1">United States</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </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>
            </div>
            <!--/ Customer Content -->
        </div>
    </div>
@endsection