@extends('layouts.base')
@section('title')
    Profile
@endsection
@section('style')

@endsection
@section('content')
    <!-- Breadcrumb start -->
    <div class="row m-1">
        <div class="col-12 ">
            <h4 class="main-title">Réclamation de gain</h4>
            <ul class="app-line-breadcrumbs mb-3">
                <li class="">
                    <a class="f-s-14 f-w-500" href="{{ route('reclamation.index') }}">
                        <span>
                            <i class="ph-duotone  ph-stack f-s-16 "></i> Tableau de bord
                        </span>
                    </a>
                </li>
                {{-- <li>
                    <a class="f-s-14 f-w-500" href="#">Profile</a>
                </li> --}}
                <li class="active">
                    <a class="f-s-14 f-w-500" href="#">Paramètre</a>
                </li>
            </ul>
        </div>
    </div>

    <!-- Breadcrumb end -->
    <!-- setting-app start -->
    <div class="row">
        <div class="col-lg-3 col-xxl-3">
            <div class="card">
                <div class="card-header">
                    <h5>Paramètre</h5>
                </div>
                <div class="card-body">
                    <div class="profile-container">
                        <div class="image-details">
                            <div class="profile-image"></div>
                            <div class="profile-pic">
                                <div class="avatar-upload">
                                    <div class="avatar-edit">
                                        <input accept=".png, .jpg, .jpeg" id="imageUpload" type="file">
                                        <label for="imageUpload"><i class="ph ph-file-image"></i></label>
                                    </div>
                                    <div class="avatar-preview">
                                        <div id="imgPreview">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="person-details">
                            <h5 class="f-w-600">Ninfa Monaldo
                                <img alt="instagram-check-mark" class="w-20 h-20" src="../assets/images/profile-app/01.png">
                            </h5>
                            <p>Web designer &amp; Developer</p>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="vertical-tab setting-tab">
                        <ul class="nav nav-tabs app-tabs-primary " id="v-bg" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button aria-controls="profile-tab-pane" aria-selected="true" class="nav-link active"
                                    data-bs-target="#profile-tab-pane" data-bs-toggle="tab" id="profile-tab" role="tab"
                                    type="button"><i class="ph-bold  ph-user-circle-gear pe-2"></i>
                                    Profile
                                </button>
                            </li>

                            <li class="nav-item" role="presentation">
                                <button aria-controls="security-tab-pane" aria-selected="false" class="nav-link"
                                    data-bs-target="#security-tab-pane" data-bs-toggle="tab" id="security-tab" role="tab"
                                    type="button"><i class="ph-bold  ph-shield-check pe-2"></i>Securité
                                </button>
                            </li>

                            <li class="nav-item" role="presentation">
                                <button aria-controls="activity-tab-pane" aria-selected="true" class="nav-link"
                                    data-bs-target="#activity-tab-pane" data-bs-toggle="tab" id="activity-tab" role="tab"
                                    type="button"><i class="ph-bold  ph-alarm pe-2"></i>
                                    Activité
                                </button>
                            </li>

                            {{-- <li class="nav-item" role="presentation">
                                <button aria-controls="privacy-tab-pane" aria-selected="false" class="nav-link"
                                    data-bs-target="#privacy-tab-pane" data-bs-toggle="tab" id="privacy-tab" role="tab"
                                    type="button"><i class="ph-bold  ph-lock-open pe-2"></i>Privacy
                                </button>
                            </li> --}}

                            {{-- <li class="nav-item" role="presentation">
                                <button aria-controls="notification-tab-pane" aria-selected="false" class="nav-link"
                                    data-bs-target="#notification-tab-pane" data-bs-toggle="tab" id="notification-tab"
                                    role="tab" type="button"><i class="ph-bold  ph-notification pe-2"></i>Notification
                                </button>
                            </li>

                            <li class="nav-item" role="presentation">
                                <button aria-controls="subscription-tab-pane" aria-selected="false" class="nav-link"
                                    data-bs-target="#subscription-tab-pane" data-bs-toggle="tab" id="subscription-tab"
                                    role="tab" type="button"><i class="ph-bold  ph-bell-simple pe-2"></i>Subscription
                                </button>
                            </li>

                            <li class="nav-item" role="presentation">
                                <button aria-controls="Connection-tab-pane" aria-selected="false" class="nav-link"
                                    data-bs-target="#Connection-tab-pane" data-bs-toggle="tab" id="Connection-tab"
                                    role="tab" type="button"><i class="ph-bold  ph-graph pe-2"></i>Connection
                                </button>
                            </li> --}}

                            {{-- <li class="nav-item" role="presentation">
                                <button class="nav-link" id="account_delete" type="button"><i
                                        class="ph-bold  ph-trash pe-2"></i>Supprimer
                                </button>
                            </li> --}}
                        </ul>
                    </div>

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

        <div class="col-lg-9 col-xxl-9 col-box-9">
            <div class="tab-content">
                <div aria-labelledby="profile-tab" class="tab-pane fade active show" id="profile-tab-pane" role="tabpanel"
                    tabindex="0">
                    <div class="card setting-profile-tab">
                        <div class="card-header">
                            <h5>Profile</h5>
                        </div>
                        <div class="card-body">
                            <div class="profile-tab profile-container">
                                <form class="app-form">
                                    <h5 class="mb-2 text-dark f-w-600">Information utilisateur</h5>
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="mb-3">
                                                <label class="form-label">Nom utilisateur</label>
                                                <input class="form-control" placeholder="Maria C. Eck" type="text">
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="mb-3">
                                                <label class="form-label">Adresse mail</label>
                                                <input class="form-control" placeholder="MariaCEck@teleworm.us"
                                                    type="email">
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <div class="app-divider-v dotted"></div>
                                        </div>
                                        <h5 class="mb-2 text-dark f-w-600">Informations Personnelles</h5>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">Nom</label>
                                                <input class="form-control" placeholder="Maria" type="text">
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">Prénoms</label>
                                                <input class="form-control" placeholder="Eck" type="text">
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="mb-3">
                                                <label class="form-label">Email</label>
                                                <input class="form-control" placeholder="test@gmail.com" type="email">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label class="form-label" for="inputCity">Téléphone</label>
                                                <input class="form-control" id="inputCity" placeholder="229 xx xx xx x2"
                                                    type="tel">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label class="form-label" for="inputState">Adresse</label>
                                                <input class="form-control" placeholder="Mari 22, Lome" type="text">
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="text-end">
                                                <button class="btn btn-primary" type="submit">Modifier
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <div aria-labelledby="security-tab" class="tab-pane fade" id="security-tab-pane" role="tabpanel"
                    tabindex="0">
                    <div class="card security-card-content">
                        <div class="card-header">
                            <h5>Sécurité</h5>
                        </div>
                        <div class="card-body">
                            <div class="account-security mb-2">
                                <div class="row align-items-center">
                                    <div class="col-sm-8">
                                        <h5 class="text-primary f-w-600">Changer le mot de Passe</h5>
                                        <p class="account-discription text-secondary f-s-16 mt-3">
                                            Pour modifier votre mot de passe,
                                            veuillez remplir les champs ci-dessous.
                                            Votre mot de passe doit contenir au moins 8 caractères,
                                            dont au moins une majuscule, une minuscule, un chiffre et un caractère spécial.
                                        </p>
                                    </div>
                                    <div class="col-sm-4 account-security-img">
                                        <img alt="" class="w-150" src="../assets/images/setting-app/password.jpg">
                                    </div>
                                </div>
                            </div>

                            <div class="app-form">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <label class="form-label" for="password">Current
                                            Password</label>
                                        <div class="input-group input-group-password mb-3">
                                            <span class="input-group-text b-r-left"><i
                                                    class="ph-bold  ph-lock f-s-20"></i></span>
                                            <input aria-label="Amount (to the nearest dollar)" class="form-control"
                                                id="password" placeholder="********" type="password">
                                            <!-- <span class="input-group-text b-r-right"><i
                                                class="ph ph-eye-slash f-s-20 eyes-icon1" onclick="togglePasswordVisibility()"></i></span> -->
                                            <span class="input-group-text b-r-right"><i
                                                class="ph ph-eye-slash f-s-20 eyes-icon " id="showPassword"></i></span>
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <label class="form-label" for="password">New
                                            Password</label>
                                        <div class="input-group input-group-password mb-3">
                                            <span class="input-group-text b-r-left"><i
                                                    class="ph-bold  ph-lock f-s-20"></i></span>
                                            <input aria-label="Amount (to the nearest dollar)" class="form-control"
                                                id="password1" placeholder="********" type="password">
                                            <span class="input-group-text b-r-right"><i
                                                    class="ph ph-eye-slash f-s-20 eyes-icon1 "
                                                    id="showPassword1"></i></span>

                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <label class="form-label" for="password">Confirm
                                            Password</label>
                                        <div class="input-group input-group-password mb-3">
                                            <span class="input-group-text b-r-left"><i
                                                    class="ph-bold  ph-lock f-s-20"></i></span>
                                            <input aria-label="Amount (to the nearest dollar)" class="form-control"
                                                id="password2" placeholder="********" type="password">
                                            <span class="input-group-text b-r-right"><i
                                                    class="ph ph-eye-slash f-s-20 eyes-icon2" id="showPassword2"></i></span>

                                        </div>
                                    </div>
                                    <div class="col-sm-12 text-end">
                                        <button type="submit" class="btn btn-primary">Modifier</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>

                <div aria-labelledby="activity-tab" class="tab-pane fade" id="activity-tab-pane" role="tabpanel"
                    tabindex="0">
                    <div class="card equal-card month-timeline">
                        <div class="card-header">
                            <div class="activity-time">
                                <h5>Activité</h5>

                            </div>
                        </div>
                        <div class="card-body">
                            <div class="tab-content" id="OutlineContent">
                                <div aria-labelledby="today-tab" class="tab-pane fade show active" id="today-tab-pane"
                                    role="tabpanel" tabindex="0">

                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped align-middle mb-0">
                                            <thead>
                                                <tr>
                                                    <th scope="col">utilisateur</th>
                                                    <th scope="col">Date et heure</th>
                                                    <th scope="col">Statut</th>
                                                    <th scope="col">Appareil</th>
                                                    <th scope="col">Adresse Ip</th>
                                                    <th scope="col">Localisation</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>test@gmail.com</td>
                                                    <td>
                                                        18/07/2025 15h:30:01
                                                    </td>
                                                    <td class="f-w-500">
                                                        <span class="badge text-light-primary">active</span>
                                                    </td>
                                                    <td class="text-secondary f-w-600">
                                                        Tecno spark
                                                    </td>
                                                    <td>10.54.24.20</td>
                                                    <td class="">Bénin</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection