@extends('layout.master')
@section('title', 'Détail du client')
@section('css')
@endsection
@section('main-content')
    <div class="container-fluid">
        <!-- Breadcrumb start -->
        <div class="row m-1">
            <div class="col-8 p-0">
                <h4 class="main-title">Détail du client</h4>
                <ul class="app-line-breadcrumbs mb-3">
                    <li class="">
                        <a href="{{ route('users.list') }}" class="f-s-14 f-w-500">
                            <span>
                                <i class="ph-duotone ph-stack f-s-16"></i> Clients
                            </span>
                        </a>
                    </li>
                    <li class="active">
                        <a href="#" class="f-s-14 f-w-500">Détails du client </a>
                    </li>
                </ul>
            </div>
            <div class="col-4 text-end">
                <a href="{{ route('users.list') }}" class="btn btn-primary">
                    <i class="ti ti-arrow-back"></i> Retour à la liste
                </a>
            </div>
        </div>
        <!-- Breadcrumb end -->

        @if ($user && $customer)
            <!-- Customer Details start -->
            <div class="row order-details p-0">
                <div class="col-12 mb-3">
                    <div class="row">
                        <!-- customer profil start -->
                        <div class="col-lg-4">
                            <div class="card order-details-card">
                                <div class="card-body">
                                    <div class="profile-container">
                                        <div class="image-details">
                                            <div class="profile-image"
                                                style="background-image: url('{{ $user->profile_picture_url ?? asset('assets/images/default-avatar.jpg') }}');">
                                            </div>
                                            <div class="profile-pic">
                                                <div class="avatar-upload">
                                                    <div class="avatar-edit">
                                                        <input type="file" id="imageUpload" accept=".png, .jpg, .jpeg">
                                                        <label for="imageUpload"><i class="ti ti-photo-heart"></i></label>
                                                    </div>
                                                    <div class="avatar-preview">
                                                        <div id="imgPreview"
                                                            style="background-image: url('{{ $user->profile_picture_url ?? asset('assets/images/default-avatar.jpg') }}');">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="person-details">
                                            <h5 class="f-w-600">
                                                {{ $user->first_name ?? '-' }} {{ $user->last_name ?? '-' }}
                                                <img src="{{ asset('assets/images/profile-app/01.png') }}" class="w-20 h-20"
                                                    alt="verified">
                                            </h5>

                                            <div class="my-2">
                                                <button type="button" class="btn btn-primary b-r-22"> <i
                                                        class="ti ti-user"></i>
                                                    Profile</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- customer profil end -->

                        <!-- Customer Details start -->
                        <div class="col-lg-8">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Détails du client (ID: {{ $customer->id }})</h5>
                                </div>
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <h6 class="f-w-600 text-dark"><i
                                                class="ti ti-user text-secondary f-s-18 me-2"></i>Nom</h6>
                                        <div class="text-end">
                                            <p>{{ $user->last_name ?? '-' }}</p>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between mt-3">
                                        <h6 class="f-w-600 text-dark"><i
                                                class="ti ti-user text-secondary f-s-18 me-2"></i>Prénom</h6>
                                        <div class="text-end">
                                            <p>{{ $user->first_name ?? '-' }}</p>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between mt-3">
                                        <h6 class="f-w-600 text-dark"><i
                                                class="ti ti-mail f-s-18 text-secondary me-2"></i>Email
                                        </h6>
                                        <div class="text-end">
                                            <p>{{ $user->email ?? '-' }}</p>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between mt-3">
                                        <h6 class="f-w-600 text-dark"><i
                                                class="ti ti-device-mobile f-s-18 text-secondary me-2"></i>Téléphone</h6>
                                        <div class="text-end">
                                            <p>{{ $user->phone_number ?? '-' }}</p>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between mt-3">
                                        <h6 class="f-w-600 text-dark"><i
                                                class="ti ti-map-pin f-s-18 text-secondary me-2"></i>Adresse</h6>
                                        <div class="text-end">
                                            <p>{{ $user->address ?? '-' }}</p>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between mt-3">
                                        <h6 class="f-w-600 text-dark"><i
                                                class="ti ti-calendar-stats text-secondary f-s-18 me-2"></i>Date de création
                                        </h6>
                                        <div class="text-end">
                                            <p>{{ $user->created_at ? $user->created_at->format('d/m/Y') : '-' }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Customer Details end -->
                    </div>
                    <div class="row mt-1">
                        <!-- Customer Orders start -->
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Commandes du client</h5>
                                </div>
                                <div class="card-body">
                                    @livewire('user.customer-order-data-table', ['user' => $user])
                                </div>
                            </div>
                        </div>
                        <!-- Customer Orders end -->
                    </div>

                </div>
            </div>
            <!-- Customer Details end -->
        @else
            <p>Client non trouvé</p>
        @endif
    </div>
@endsection

@section('script')
    <!--customizer-->
    <div id="customizer"></div>

    <script>
        $(document).ready(function() {
            // Optional: Handle profile image upload preview (requires more JS/backend)
            // This is just a placeholder for the preview, actual upload needs server-side logic.
            $("#imageUpload").change(function() {
                if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#imgPreview').css('background-image', 'url(' + e.target.result + ')');
                        $('#imgPreview').hide();
                        $('#imgPreview').fadeIn(650);
                    }
                    reader.readAsDataURL(this.files[0]);
                }
            });
        });
    </script>
@endsection