@extends('layouts.app')
@section('title', 'New Submission')
@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <style>
        .datepicker-dropdown {
            z-index: 9999 !important;
        }
    </style>
    <style>
        .profile-pic {
            border-radius: 50%;
            height: 80px;
            width: 80px;
            background-size: cover;
            background-position: center;
            background-blend-mode: multiply;
            vertical-align: middle;
            text-align: center;
            color: transparent;
            transition: all .3s ease;
            text-decoration: none;
            cursor: pointer;
            position: relative;
        }

        .profile-pic:hover {
            background-color: rgba(0, 0, 0, .5);
            z-index: 10000;
            color: #fff;
            transition: all .3s ease;
            text-decoration: none;
        }

        .profile-pic span i {
            color: #fff;
            position: absolute;
            right: 0;
            bottom: 0;
            background: gray;
            border-radius: 50%;
            padding: 5px;
            font-size: 12px;
        }

        .profile-pic span {
            display: inline-block;
        }

        form input[type="file"] {
            display: none;
            cursor: pointer;
        }

        .edit-icon {
            cursor: pointer;
        }

        .text-end {
            text-align: end;
        }
    </style>
@endsection
@section('content')
    <div class="col-md-8 m-auto text-center mb-3 mobile-space">
        <p class=" text-22 pt-2"><b>Personal Info</b></p>
    </div>

    <div class="col-md-11 m-auto">
        @include('includes.alerts')
        <form class="pt-2" id="profile-form" action="{{ route('profile.update', $user->id) }}" method="POST"
            enctype="multipart/form-data">
            @csrf
            <div class="p-0">
                <div class="d-flex align-items-center flex-wrap mb-3">
                    <div class="col-md-8 col-sm-12"></div>
                    <div class="col-md-4 col-sm-12 text-end">
                        <label for="profile_image">
                            @if (!empty($user->profile_image) && file_exists(public_path('storage/profile_image/' . $user->profile_image)))
                                <div class="profile-pic" id="profilePic"
                                    style="background-image: url('{{ asset('storage/profile_image/' . $user->profile_image) }}')">
                                @else
                                    <div class="profile-pic" id="profilePic"
                                        style="background-image: url('{{ asset('assets/avtar.png') }}')">
                            @endif
                            <span class="glyphicon glyphicon-camera"></span>
                            <span><i class="bx bxs-pencil" style="color:#fff;"></i></span>
                    </div>
                    </label>
                    <input type="file" name="profile_image" id="profile_image" style="display: none;"
                        onchange="previewImage(event)">
                </div>
            </div>
    </div>

    <div class="d-flex flex-wrap">
        <div class="form-group position-relative mb-5 col-md-6 col-sm-12">
            <label><strong>Name</strong> <span style="color: red;">*</span></label>
            <div class="d-flex">
                <input type="text"
                    class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none pb-3 "
                    value="{{ $user->name }}" id="name" name="name">
                <i class='bx bxs-pencil text-white edit-icon' data-input="name"></i>
            </div>
        </div>
        <div class="form-group position-relative mb-5 col-md-6 col-sm-12 ">
            <label><strong>Email</strong> <span style="color: red;">*</span></label>
            <div class="d-flex">
                <input type="text"
                    class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none pb-3" name="email"
                    id="email" value="{{ $user->email }}">
                <i class='bx bxs-pencil text-white edit-icon' data-input="email"></i>
            </div>
        </div>
    </div>
    <div class="col-md-12 text-white text-22 text-center mb-5"><strong>Contact Info</strong> </div>
    <div class="d-flex flex-wrap">
        {{--  <div class="form-group position-relative mb-5 col-md-6 col-sm-12">
            <label><strong>Phone Number</strong> <span style="color: red;">*</span></label>
            <div class="d-flex">
                <input type="text"
                    class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none pb-3"
                    name="mobile_phone" id="mobile_phone" value="{{ $user->talent->mobile_phone ?? '' }}">
                <i class='bx bxs-pencil text-white edit-icon' data-input="mobile_phone"></i>
            </div>
        </div>  --}}
        <div class="form-group position-relative mb-5 col-md-6 col-sm-12 ">
            <label><strong>Height</strong> <span style="color: red;">*</span></label>
            <div class="d-flex">
                <input type="text"
                    class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none pb-3" id="height"
                    name="height" value="{{ $user->talent->height ?? '' }}">
                <div class="input-group-append">
                    <span class="input-group-text bg-transparent border-0">inches</span>
                </div>
                <i class='bx bxs-pencil text-white edit-icon' data-input="height"></i>
            </div>
        </div>

        <div class="form-group position-relative mb-5 col-md-6 col-sm-12">
            <label><strong>Date of Birth</strong> <span style="color: red;">*</span></label>
            <div class="d-flex">
                {{--  <input type="date"
                    class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none pb-3 "
                    id="dob" name="dob" value="{{ $user->talent->dob ?? '' }}">  --}}
                <input type="text"
                    class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none pb-3" name="dob"
                    id="dob" placeholder="mm-dd-yyyy" autocomplete="off" value="{{ $user->talent->dob ?? '' }}">
                {{--  <i class='bx bxs-pencil text-white edit-icon' data-input="dob"></i>  --}}
            </div>
        </div>
    </div>
    <div class="d-flex flex-wrap">
        {{--  <div class="form-group position-relative mb-5 col-md-6 col-sm-12">
            <label><strong>Date of Birth</strong> <span style="color: red;">*</span></label>
            <div class="d-flex">
                <input type="text"
                    class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none pb-3" name="dob"
                    id="dob" placeholder="mm-dd-yyyy" autocomplete="off" value="{{ $user->talent->dob ?? '' }}">

            </div>
        </div>  --}}

        <div class="form-group position-relative mb-5 col-md-6 col-sm-12">
            <label><strong>Ethnicity</strong> <span style="color: red;">*</span></label>
            <div class="d-flex">
                <input type="text"
                    class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none pb-3 "
                    id="race" name="race" value="{{ $user->talent->race ?? '' }}">
                <i class='bx bxs-pencil text-white edit-icon' data-input="race"></i>
            </div>
        </div>

    </div>
    <div class="text-center mb-5">
        <button type="submit" class="btn btn-block shadow border-0 py-2 text-uppercase col-md-4 m-auto  border-radius">
            <span class="link button text-18">Update Profile</span>
        </button>
    </div>
    </form>

    <div class="col-md-12">
        <p class=" text-22 pt-5"><b>Images</b></p>
    </div>
    <div class="d-flex flex-wrap">
        @foreach ($user->talent->images->slice(0, 3) as $talentImage)
            <div class="col-lg-4 col-md-6 mb-5 col-sm-12 ">
                <img src="{{ asset('storage/talent_images/' . $user->talent->id . '/' . $talentImage->url) }}"
                    class="w-100" alt="">
            </div>
        @endforeach
    </div>
    <div class="all-btn text-center text-white text-16 p-2 border-radius m-auto d-block mb-5"><a
            href="{{ route('my-profile-detail', [$user->id, 'images']) }}"
            class="text-center pt-2 pb-2 d-block text-white  back-transparent w-100">View All</a></div>
    <div class="col-md-12">
        <p class=" text-22 pt-5"><b>Audios</b></p>
    </div>
    <div class="d-flex flex-wrap">
        @foreach ($user->talent->talentaudio->slice(0, 3) as $talentAudio)
            <div class="col-lg-4 col-md-6 mb-5 col-sm-12 ">
                <audio controls class="col-md-12">
                    <source
                        src="{{ asset('storage/talent_audio_files/' . $user->talent->id . '/' . $talentAudio->audio_file) }}"
                        type="audio/mpeg">
                    Your browser does not support the audio element.
                </audio>
            </div>
        @endforeach
    </div>
    <div class="all-btn text-center text-white text-16 p-2 border-radius m-auto d-block mb-5"><a
            href="{{ route('my-profile-detail', [$user->id, 'audio']) }}"
            class="text-center pt-2 pb-2 d-block text-white  back-transparent w-100">View All</a></div>
    <div class="col-md-12">
        <p class=" text-22 pt-5"><b>Videos</b></p>
    </div>
    <div class="d-flex flex-wrap">
        @foreach ($user->talent->talentvideo->slice(0, 3) as $talentVideo)
            <div class="col-lg-4 col-md-6 mb-5 col-sm-12 my-profile-video">
                {!! $talentVideo->video_url !!}
            </div>
        @endforeach
    </div>
    <div class="all-btn text-center text-white text-16 p-2 border-radius m-auto d-block mb-5"><a
            href="{{ route('my-profile-detail', [$user->id, 'video']) }}"
            class="text-center pt-2 pb-2 d-block text-white  back-transparent w-100">View All</a></div>
    </div>
    {{--  <div class="container p-0">
      <div class="d-flex align-items-center flex-wrap mb-3">
         <div class="col-md-8 col-sm-12">
            <p class=" text-18"><strong>Change Password</strong></p>
         </div>
         <div class="col-md-4 col-sm-12">
            <button type="button" class="btn btn-block shadow border-0 py-2 text-uppercase col-md-8 m-auto  border-radius" data-toggle="modal" data-target="#change-password-modal">
                <span class="link button text-18">Generate Password</span>
            </button>
         </div>
      </div>
      <div class="d-flex align-items-center flex-wrap mb-3">
         <div class="col-md-8 mb-5 col-sm-12 margin-off ">
            <p class="text-white text-18 "><strong>Are You Sure You Want To Logout ?</strong></p>
         </div>
         <div class="col-md-4 col-sm-12">
            <button type="button" class="btn btn-block shadow border-0 py-2 text-uppercase col-md-8 m-auto  border-radius" data-toggle="modal" data-target="#modal-11">
                <span class="link button text-18">Log out</span>
            </button>
         </div>
      </div>
   </div>  --}}

    <!-- change password Modal -->
    {{--  <div class="modal fade" id="change-password-modal" tabindex="-1" role="dialog" aria-labelledby="change-password-modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <form id="change-password-form" action="{{ route('password.update') }}" method="POST">
                @csrf
                <div class="form-group position-relative mb-5 col-md-12">
                   <label for="new_password">New Password <span class="text-danger">*</span></label>
                   <input type="password" class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none pb-3 text-white" id="new_password" name="new_password" placeholder="Enter New Password">
                </div>
                <div class="form-group position-relative mb-5 col-md-12">
                   <label for="confirm_password">Confirm Password <span class="text-danger">*</span></label>
                   <input type="password" class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none pb-3 text-white" id="confirm_password" name="confirm_password" placeholder="Enter Confirm Password">
                </div>
                <div class="col-md-12">
                   <button type="submit" class="btn-block shadow border-0 text-uppercase col-md-4 m-auto pt-2 pb-2 back-red-button border-radius-7">
                      <strong class="text-18 text-white">Save</strong>
                   </button>
                </div>
             </form>
        </div>
    </div>
  </div>
</div>  --}}

    <!-- logout Modal -->
    {{--  <div class="modal fade" id="modal-11" tabindex="-1" role="dialog" aria-labelledby="modal-11Label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <h3 class="text-white text-16 pb-3 text-center">Are You Sure You Want To LogOut?</h3>
            <div class="d-flex col-md-12">
                <div class="col-md-6">
                   <form action="{{ route('front.logout') }}" method="POST" id="logout-form">
                      @csrf
                      <button type="submit" class="btn-block shadow border-0 text-uppercase col-md-12 m-auto pt-2 pb-2 back-red-button border-radius-7">
                      <strong class="text-18 text-white">Yes</strong>
                      </button>
                   </form>
                </div>
                <div class="col-md-6">
                   <button class="btn-block shadow border-0 text-uppercase col-md-12 m-auto pt-2 pb-2 back-red-button border-radius-7" data-dismiss="modal">
                   <strong class="text-18 text-white">No</strong>
                   </button>
                </div>
             </div>
        </div>
    </div>
  </div>
</div>  --}}
@endsection
@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
    <script src="{{ asset('assets/frontend/js/my-profile.js') }}"></script>
    <script>
        function previewImage(event) {
            const profilePic = document.getElementById("profilePic");
            const file = event.target.files[0];

            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    profilePic.style.backgroundImage = `url(${e.target.result})`;
                };
                reader.readAsDataURL(file);
            }
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            flatpickr("#dob", {
                dateFormat: "m-d-Y", // MM-DD-YYYY format
                maxDate: "today", // Prevents future dates
                allowInput: true, // Allows manual input
                clickOpens: true, // Opens when clicked
                disableMobile: false // Works on mobile
            });
        });
    </script>
@endsection