@extends('frontend.layouts.app')

@section('content')
<style>
header .navbar {
    background: #1a1a1a !important;
    padding-top: 10px;
}


div#v-pills-tabContent {
    width: 100%;
}

.main-top-profo{
  display: flex;
}

.main-top-profo .back-pro{
    height: 125px;
    border-radius: 50%;
    position: relative;
    width: 125px;
}

.main-top-profo .back-pro .top-profic{
  border: 1px solid #00000063;
  position: absolute;
  background: #fff;
  padding: 8px 13px;
  border-radius: 50%;
  right: 0;
  top: 80px;
}

.main-top-profo .back-pro .top-profic a{
  color: #000;
}
.main-top-profo .back-pro .top-profic i{
  font-size: 16px;
}
.profile-content {
  padding-left: 30px;
}
.profile-content h2 {
  padding-bottom: 10px;
  font-size: 32px;
}
.profile-content p {
  font-size: 17px;
  color: #00000078;
  font-weight: 500;
}
main{
    height: 100vh;
}
.top-profile {
    margin-top: 250px;
}
.reser .nav-link {
    color: #ffffff !important;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    width: 225px;
    margin: 12px 50px 15px 0;
    background: #1a1a1a;
    text-transform: capitalize;
    padding: 9px 19px !important;
    font-family: 'Poppins', sans-serif;
    border-radius: 31px;
}
 .nav-pills .nav-link.active,  .nav-pills .show>.nav-link {

    background-color: #3badb8 !important;
}
.main-top-profo {
    display: flex;
    margin-bottom: 55px;
}
.reser input {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    width: 100%;
    padding: 11px 20px;
    border: 1px solid #b7afaf;
    border-radius: 9px;
    margin-bottom: 25px;
}
button.save-btn.mx-0.my-5 {
    color: #ffffff !important;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 75px 0 !important;
    text-transform: capitalize;
    padding: 11px 19px !important;
    font-family: 'Poppins', sans-serif;
    border-radius: 10px;
    background: #3badb8;
        border: 0;
}
label {
    display: inline-block;
    font-weight: 400;
    color: #000;
    text-transform: none;
}
.okabso {
    position: absolute;
    left: -17px;
    bottom: -4px;
    opacity: 0;
    cursor: pointer;
    width: 40px;
}
</style>
<main>

   

    <div class="top-profile">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-lg-10">
                    <form action="{{ route('user.update', $user->id) }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="main-top-profo">
                            <div class="back-pro">
                                <img src="{{ asset($user->image) }}" clas="img-fluid imgTag uploaded" style="position: absolute; height:100%; width:100%; object-fit: cover; border-radius: 50%;">
                                <div class="top-profic">
                                    <a href="#" class="h-100 w-100 position-relative">
                                        <input type="file" name="image" class="okabso fileInput">
                                        <i class="fa-regular fa-camera"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="profile-content">
                                <h2>Hi, {{ $user->f_name }}</h2>
                                <p>Member since {{ $user->created_at->format('d M Y') }}</p>
                            </div>
                        </div>
    
                        <div class="reser">
                            <div class="d-flex align-items-start">
                                <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist"
                                    aria-orientation="vertical">
                                    
                                     <button class="nav-link active" id="v-pills-profile-tab" data-bs-toggle="pill"
                                        data-bs-target="#v-pills-profile" type="button" role="tab"
                                        aria-controls="v-pills-profile" aria-selected="false">Profile</button>
                                        
                                    <button class="nav-link " id="v-pills-home-tab" data-bs-toggle="pill"
                                        data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home"
                                        aria-selected="true">Appointments</button>
                                </div>
                                <div class="tab-content" id="v-pills-tabContent">
                                    <div class="tab-pane fade " id="v-pills-home" role="tabpanel"
                                        aria-labelledby="v-pills-home-tab">
                                         @if(count($user->appointments) > 0)
                                        <table class="table table-dark table-striped">
                                            <thead>
                                                <tr>
                                                    <th scope="col">#</th>
                                                    <th scope="col">Time</th>
                                                    <th scope="col">Date</th>
                                                    <th scope="col">Service</th>
                                                    <th scope="col">Type</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @php 
                                                $i=1;
                                                @endphp
                                                @foreach($user->appointments as $appointment)
                                                    @php 
                                                    $startTime = \Carbon\Carbon::parse($appointment->time)->format('h:i A');
                                                    $endTime = \Carbon\Carbon::parse($appointment->time)->addMinutes(30)->format('h:i A');
                                                    @endphp
                                                    <tr>
                                                        <th scope="row">{{ $i++ }}</th>
                                                        <td>{{ $startTime }} - {{ $endTime }}</td>
                                                        <td>{{ \Carbon\Carbon::parse($appointment->date)->format('d M') }}</td>
                                                        <td>{{ $appointment->service->title }}</td>
                                                        @if($appointment->status == 'completed')
                                                        <td>
                                                            <span class="badge bg-success">Completed</span>
                                                        </td>
                                                        @elseif($appointment->status == 'missed')
                                                        <td>
                                                            <span class="badge bg-secondary">Missed</span>
                                                        </td>
                                                        @else
                                                        <td>
                                                            <span class="badge bg-primary">Reserved</span>
                                                        </td>
                                                        @endif
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                        @else
                                            <h3>You haven't booked any Appointments yet</h3>
                                        @endif
                                    </div>
                                    <div class="tab-pane fade show active" id="v-pills-profile" role="tabpanel"
                                        aria-labelledby="v-pills-profile-tab">
                                        
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="row input-align">
                                                    <div class="col-lg-12">
                                                        <label class="input-label" for="">First Name</label><br>
                                                        <input class="elizbath-input" type="text" name="f_name" value="{{ $user->f_name }}">
                                                        <input type="hidden" name="user_id" value="1">
                                                    </div>
                                                </div>
                                            </div>
            
                                            <div class="col-lg-12">
                                                <div class="row input-line">
                                                    <div class="col-lg-12">
                                                        <label class="input-label" for="">Last Name</label><br>    
                                                        <input class="bio-input" type="text" name="l_name" value="{{ $user->l_name }}">
                                                    </div>
                                                </div>
                                            </div>
            
                                            <div class="col-lg-12">
                                                <div class="row input-line">
                                                    <div class="col-lg-12">
                                                       <label class="input-label" for="">Email</label><br>
                                                       <input class="bio-input" type="email" name="email" maxlength="50" value="{{ $user->email }}">
                                                    </div>
                                                </div>
                                            </div>
                                          
                                            <div class="col-lg-12">
                                                 <div class="row input-line">
                                                    <div class="col-lg-12">
                                                       <label class="input-label" for="">Phone</label><br>
                                                       <input class="bio-input" type="number" name="phone" maxlength="50" value="{{ $user->phone }}">
                                                    </div>
                                                </div>
                                            </div>
                                          
                                            <div class="col-lg-12">
                                                <div class="row input-line">
                                                    <div class="col-lg-12">
                                                        <button type="submit" class="save-btn mx-0 my-5" style="width: 100% !important;">SAVE CHANGES</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</main>

@endsection

@section('script')

<script>
    $(document).ready(function () {

      $('.fileInput').change(function () {
        var $input = $(this);
        var $imgTag = $input.parent().parent().parent().find('img');
        console.log($imgTag)
    
        var file = this.files[0];
    
        if (file) {
          var reader = new FileReader();
            
          reader.onload = function (e) {
            $imgTag.attr('src', e.target.result);
          };
    
          reader.readAsDataURL(file);
        } else {
          $imgTag.attr('src', '');
        }
      });
    });
</script>

@endsection