@extends('layout.app')
@section('content')
    <style>
        .blog-box-img figure {
            display: flex;
            justify-content: center; /* Center horizontally */
            align-items: center; /* Center vertically */
            margin: 0; /* Remove any default margins */
            height: 200px; /* Set a fixed height */
            width: 100%; /* Ensure the figure takes up full width */
        }

        .blog-box-img img {
            object-fit: cover; /* Ensure the image covers the area without distortion */
            width: 100%; /* Stretch the image to fill the width */
            height: 100%; /* Ensure the image takes up the full height */
        }

        /* Modal Styles */
        .modal-bg {
            display: none;
            position: fixed;
            z-index: 1050;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            background: #fff;
            padding: 20px;
            max-width: 600px;
            width: 100%;
            border-radius: 8px;
            position: relative;
            text-align: center;
        }

        .drop-area {
            border: 2px dashed #ccc;
            border-radius: 6px;
            padding: 40px;
            cursor: pointer;
            margin-bottom: 20px;
        }

        .drop-area.hover {
            border-color: #333;
        }

        #preview {
            width: 100%;
            max-height: 200px;
            object-fit: cover;
            margin-top: 10px;
            display: none;
        }

        .modal-buttons {
            display: flex;
            justify-content: space-between;
        }

        .modal-buttons button {
            padding: 10px 20px;
            border: none;
            background: #007bff;
            color: white;
            cursor: pointer;
            border-radius: 4px;
        }

        .modal-buttons button.cancel {
            background: #6c757d;
        }
    </style>

    @php
        $bannerUrl = Auth::user()->getFirstMediaUrl('banner_image') ?: asset('images/no-banner.jpg');
    @endphp
    <!-- Original HTML -->
    <div class="inner-banner-sec"
         style="background-image: url('{{$bannerUrl}}'); height: 267px;">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <button class="profile-label profile-img-change-btn" id="open-modal-btn">Change Image</button>
                </div>
            </div>
        </div>
    </div>

    <section class="chat-page profile-page pt-0">
        <div class="container">
            <div class="row align-items-end mb-4">
                <div class="col-md-3 col-4 sm-mob-100">
                    <div class="profile-following-card text-center">
                        <figure>
                            <img
                                src="{{ \Illuminate\Support\Facades\Auth::user()->getFirstMediaUrl('profile_image') ?? '' }}"
                                class="img-fluid" alt="img"
                                style="border-radius: 100px; width: 150px;
                                        height: 150px;">
                            <!-- Camera Icon to Open Modal -->
                            <label class="profile-label" data-bs-toggle="modal" data-bs-target="#profileImageModal"
                                   style="cursor: pointer;">
                                <i class="fas fa-camera"></i>
                            </label>

                        </figure>
                    </div>
                </div>
                <div class="col-md-6 col-5 sm-mob-100">
                    <div class="profile-following-card">
                        <h2>{{ \Illuminate\Support\Facades\Auth::user()->name ?? '' }}</h2>
                        <div class="flex-center-one profile-status-rating">
                            <p>{{ \Illuminate\Support\Facades\Auth::user()->title ?? '' }}</p>
                            <div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i
                                    class="fas fa-star"></i><i class="fas fa-star"></i><i
                                    class="fas fa-star-half-alt"></i>
                            </div>
                            <a href="#">status</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-3 sm-mob-100">
                    <div class="setting-btn">
                        <a href="{{route('setting')}}" class="themeBtn"><i class="fas fa-cog"></i> Setting</a>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-3 col-md-5">
                    <ul class="follow">
                        <li>
                            <h3>Following</h3>
                            <a
                                href="{{ route('my.following') }}"><span>{{ \Illuminate\Support\Facades\Auth::user()->following()->count() ?? '' }}</span></a>
                        </li>
                        <li>
                            <h3>Followers</h3>
                            <a
                                href="{{ route('my.follower') }}"><span>{{ \Illuminate\Support\Facades\Auth::user()->followers()->count() ?? '' }}</span></a>
                        </li>
                    </ul>
                    <div style="display: flex; justify-content: end; margin-bottom: 10px;">
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#socialLinkModal">
                            Add Social Link
                        </button>
                    </div>
                    <ul class="profile-social-links">
                        @foreach(Auth::user()->socialLinks as $link)
                            <li style="position: relative; padding-right: 25px;">
                                <a href="{{ $link->url }}" target="_blank">
                                    <i class="{{ $link->icon }}"></i> {{ $link->url }}
                                </a>
                                <form action="{{ route('user.link.delete', $link->id) }}" method="POST">
                                    @csrf
                                    <button type="submit" class="delete-link-btn" data-link-id="{{ $link->id }}"
                                            style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); border: none; background: transparent; color: red; font-weight: bold; cursor: pointer;">
                                        &times;
                                    </button>
                                </form>
                            </li>
                        @endforeach
                    </ul>

                    @include('components.people-view')

                </div>
                <div class="col-lg-6 col-md-7">
                    <ul class="nav nav-tabs profile-tabs" id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="feed-tab" data-toggle="tab" href="#feed" role="tab"
                               aria-controls="feed" aria-selected="true">
                                <img src="images/feed.png" alt="">
                                Feed
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="info-tab" data-toggle="tab" href="#info" role="tab"
                               aria-controls="info" aria-selected="false">
                                <img src="images/info.png" alt="">
                                Info
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="jobs-tab" data-toggle="tab" href="#jobs" role="tab"
                               aria-controls="jobs" aria-selected="false">
                                <img src="images/job.png" alt="">
                                Jobs
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="bids-tab" data-toggle="tab" href="#listing" role="tab"
                               aria-controls="bids" aria-selected="false">
                                <img src="images/bid.png" alt="">
                                Listing
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="bids-tab" data-toggle="tab" href="#training" role="tab"
                               aria-controls="bids" aria-selected="false">
                                <img src="images/review.png" alt="">
                                Training
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="portfolio-tab" data-toggle="tab" href="#portfolio" role="tab"
                               aria-controls="portfolio" aria-selected="false">
                                <img src="images/portfolio.png" alt="">
                                Portfolio
                            </a>
                        </li>
                        {{--                        <li class="nav-item">--}}
                        {{--                            <a class="nav-link" id="reviews-tab" data-toggle="tab" href="#reviews" role="tab"--}}
                        {{--                               aria-controls="reviews" aria-selected="false">--}}
                        {{--                                <img src="images/review.png" alt="">--}}
                        {{--                                reviews--}}
                        {{--                            </a>--}}
                        {{--                        </li>--}}
                        <li class="nav-item">
                            <a class="nav-link" id="payment-tab" data-toggle="tab" href="#payment" role="tab"
                               aria-controls="payment" aria-selected="false">
                                <img src="images/payment.png" alt="">
                                Payment
                            </a>
                        </li>
                    </ul>
                    <div class="tab-content" id="myTabContent">

                        <div class="tab-pane fade show active" id="feed" role="tabpanel"
                             aria-labelledby="feed-tab">
                            @if(Auth::user()->chat->isEmpty())
                                <label>No Feed Posted</label>
                            @else
                                @foreach(Auth::user()->chat as $chat)
                                    @php
                                        $chat->userHasLiked = $chat->likes()->where('user_id', auth()->id())->exists();

                                    @endphp
                                    <div class="post-coment static-example" id="staticExample">
                                        <div class="cmnt-jhn">
                                            <div class="d-flex">
                                                <figure>
                                                    <img src="{{$chat->user->getFirstMediaUrl('profile_image')}}"
                                                         class="img-fluid profileImage"
                                                         alt="img">
                                                </figure>
                                                <div>
                                                    <h4>{{$chat->user->name ?? ''}}</h4>
                                                    <span><i class="fad fa-clock"></i>{{$chat->created_at->diffForHumans()}}</span>
                                                </div>
                                            </div>
                                            <div class="dropdown">
                                                <button class="btn btn-secondary dropdown-toggle" type="button"
                                                        id="dropdownMenuButton" data-toggle="dropdown"
                                                        aria-haspopup="true"
                                                        aria-expanded="false">
                                                    <i class="far fa-ellipsis-v"></i>
                                                </button>
                                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                    <a class="dropdown-item" href="{{route('chat.delete',$chat->id)}}">Delete</a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="senir-wrodpres">
                                            <h3>{{$chat->title ?? ''}}</h3>
                                            <h6>{{$chat->sub_title ?? ''}}</h6>
                                            @php
                                                $words = explode(' ', $chat->description);
                                                $shortDescription = implode(' ', array_slice($words, 0, 50));
                                                $fullDescription = implode(' ', array_slice($words, 50));
                                            @endphp

                                            <p>
                                                {!! $shortDescription !!}
                                                @if (count($words) > 50)
                                                    <span style="color: #666666;
    font-size: 0.9rem;
    line-height: 24px;
    font-family: 'Source Sans Pro';
    margin-bottom: 7px;
    width: 95%;" class="more-text d-none">{!! $fullDescription !!}</span>
                                                    <a href="javascript:void(0);" class="view toggle-more">View More</a>
                                                @endif
                                            </p>

                                        </div>
                                        <div class="like-comnt">
                                            <ul>
                                                <li>
                                                    <a href="#" class="like-btn" data-chat-id="{{ $chat->id }}">
                                                        <i class="fas fa-heart {{ $chat->userHasLiked ? 'text-danger' : '' }}"></i>
                                                        Like
                                                    </a>
                                                    <figure>
                                                        <img src="{{ asset('images/likeimg.png') }}" class="img-fluid"
                                                             alt="img">
                                                        <span class="like-count"
                                                              id="like-count-{{ $chat->id }}">{{ $chat->likes->count() }}</span>
                                                    </figure>
                                                    <a href="{{route('chat.comment',$chat->id)}}"><i
                                                            class="fas fa-comment-alt"></i>
                                                        Comment {{$chat->comments->count()}}</a>
                                                </li>

                                            </ul>
                                            {{--                                        <div class="view-50">--}}
                                            {{--                                            <a href="#"><i class="far fa-eye"></i> Views 50</a>--}}
                                            {{--                                        </div>--}}
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>


                        <div class="tab-pane fade" id="info" role="tabpanel" aria-labelledby="info-tab">
                            <form action="{{ route('user.profile.update') }}" method="POST">
                            @csrf
                            <!-- Name -->
                                <div class="mb-3">
                                    <label for="name" class="form-label">Full Name</label>
                                    <input type="text" name="name" class="form-control" value="{{ Auth::user()->name }}"
                                           required>
                                </div>

                                <!-- Email (readonly or editable) -->
                                <div class="mb-3">
                                    <label for="email" class="form-label">Email</label>
                                    <input type="email" name="email" class="form-control"
                                           value="{{ Auth::user()->email }}" required>
                                </div>

                                <!-- Title -->
                                <div class="form-field mb-3">
                                    <label for="title" class="form-label">Occupation</label>
                                    <select name="title" required class="form-control"
                                            style="padding: 0.375rem 2.75rem!important;">
                                        <option value="" disabled>Select Occupation</option>
                                        @php
                                            $titles = [

     'AI/ML Engineer','Business Development','Cloud Architect','Cybersecurity Analyst','Data Analyst','Data Scientist','DevOps Engineer','Database Administrator','IT Project Manager','IT Support Specialist','Network Administrator','Software Developer','Sales','Systems Engineer','UX/UI Designer','Web Developer','Other',
                                            ];
                                        @endphp
                                        @foreach($titles as $title)
                                            <option
                                                value="{{ $title }}" {{ Auth::user()->title === $title ? 'selected' : '' }}>
                                                {{ $title }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <!-- Gender -->
                                <div class="mb-3">
                                    <label for="gender" class="form-label">Gender</label>
                                    <select name="gender" class="form-select">
                                        <option value="">-- Select Gender --</option>
                                        <option value="male" {{ Auth::user()->gender === 'male' ? 'selected' : '' }}>
                                            Male
                                        </option>
                                        <option
                                            value="female" {{ Auth::user()->gender === 'female' ? 'selected' : '' }}>
                                            Female
                                        </option>
                                        <option value="other" {{ Auth::user()->gender === 'other' ? 'selected' : '' }}>
                                            Other
                                        </option>
                                    </select>
                                </div>

                                <!-- Country -->
                                <div class="form-field mb-3">
                                    <label for="country" class="form-label">Country</label>
                                    <select name="country" id="country" required class="form-control"
                                            style="padding: 0.375rem 2.75rem!important;">
                                        <option value="">Select Country</option>
                                        @php
                                            $countries = [
       "United States","Afghanistan", "Albania", "Algeria", "American Samoa", "Andorra", "Angola", "Anguilla", "Antarctica",
      "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain",
      "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bhutan", "Bolivia",
      "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei Darussalam", "Bulgaria", "Burkina Faso", "Burundi",
      "Cambodia", "Cameroon", "Canada", "Cape Verde", "Cayman Islands", "Central African Republic", "Chad",
      "Chile", "China", "Christmas Island", "Cocos (Keeling) Islands", "Colombia", "Comoros", "Congo",
      "Congo (Democratic Republic)", "Cook Islands", "Costa Rica", "Croatia", "Cuba", "Cyprus", "Czech Republic",
      "Denmark", "Djibouti", "Dominica", "Dominican Republic", "Ecuador", "Egypt", "El Salvador",
      "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Falkland Islands (Malvinas)", "Faroe Islands",
      "Fiji", "Finland", "France", "French Guiana", "French Polynesia", "French Southern Territories", "Gabon",
      "Gambia", "Georgia", "Germany", "Ghana", "Gibraltar", "Greece", "Greenland", "Grenada", "Guam",
      "Guatemala", "Guernsey", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Heard Island and McDonald Islands",
      "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel",
      "Italy", "Ivory Coast", "Jamaica", "Japan", "Jersey", "Jordan", "Kazakhstan", "Kenya", "Kiribati",
      "Korea (North)", "Korea (South)", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho",
      "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macau", "Macedonia", "Madagascar",
      "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Martinique", "Mauritania",
      "Mauritius", "Mayotte", "Mexico", "Micronesia", "Moldova", "Monaco", "Mongolia", "Montserrat", "Morocco",
      "Mozambique", "Myanmar", "Namibia", "Nauru", "Nepal", "Netherlands", "Netherlands Antilles",
      "New Caledonia", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Niue", "Norfolk Island",
      "Northern Mariana Islands", "Norway", "Oman", "Pakistan", "Palau", "Palestinian Territory", "Panama",
      "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Pitcairn", "Poland", "Portugal", "Puerto Rico",
      "Qatar", "Réunion", "Romania", "Russia", "Rwanda", "Saint Barthélemy", "Saint Helena",
      "Saint Kitts and Nevis", "Saint Lucia", "Saint Martin (French part)", "Saint Pierre and Miquelon",
      "Saint Vincent and the Grenadines", "Samoa", "San Marino", "Sao Tome and Principe", "Saudi Arabia",
      "Senegal", "Serbia", "Seychelles", "Sierra Leone", "Singapore", "Sint Maarten (Dutch part)", "Slovakia",
      "Slovenia", "Solomon Islands", "Somalia", "South Africa", "South Georgia and the South Sandwich Islands",
      "South Sudan", "Spain", "Sri Lanka", "Sudan", "Suriname", "Svalbard and Jan Mayen", "Eswatini (Swaziland)",
      "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Timor-Leste", "Togo",
      "Tokelau", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan",
      "Turks and Caicos Islands", "Tuvalu", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom",
      "Uruguay", "Uzbekistan", "Vanuatu", "Vatican City", "Venezuela", "Vietnam",
      "Wallis and Futuna", "Western Sahara", "Yemen", "Zambia", "Zimbabwe"
  ];

                                        @endphp
                                        @foreach($countries as $name)
                                            <option
                                                value="{{ $name }}" {{ Auth::user()->country === $name ? 'selected' : '' }}>
                                                {{ $name }}
                                            </option>
                                        @endforeach
                                    </select>

                                </div>


                                <!-- State -->
                                <div class="mb-3">
                                    <label for="state" class="form-label">State</label>
                                    <input type="text" name="state" class="form-control"
                                           value="{{ Auth::user()->state }}">
                                </div>

                                <!-- City -->
                                <div class="mb-3">
                                    <label for="city" class="form-label">City</label>
                                    <input type="text" name="city" class="form-control"
                                           value="{{ Auth::user()->city }}">
                                </div>

                                <!-- Submit -->
                                <button type="submit" class="btn btn-primary">Update Info</button>
                            </form>
                        </div>
                        <div class="tab-pane fade" id="jobs" role="tabpanel" aria-labelledby="jobs-tab">
                            @if(\Illuminate\Support\Facades\Auth::user()->post->isEmpty())
                                <label>No Jobs Posted</label>
                            @else
                                @foreach(\Illuminate\Support\Facades\Auth::user()->post as $post)
                                    <div class="post-coment">
                                        <div class="cmnt-jhn">
                                            <div class="d-flex">
                                                <figure>
                                                    <img src="{{$post->user->getFirstMediaUrl('profile_image')}}"
                                                         class="img-fluid"
                                                         alt="img">
                                                </figure>
                                                <div>
                                                    <h4>{{$post->user->name ?? ''}}</h4>
                                                    <span><i
                                                            class="fad fa-clock"></i>{{$post->created_at->diffForHumans() ?? ''}}</span>
                                                </div>
                                            </div>
                                            <div class="dropdown">
                                                <button class="btn btn-secondary dropdown-toggle" type="button"
                                                        id="dropdownMenuButton"
                                                        data-toggle="dropdown" aria-haspopup="true"
                                                        aria-expanded="false">
                                                    <i class="far fa-ellipsis-v"></i>
                                                </button>
                                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                    <a class="dropdown-item"
                                                       href="{{route('post.job.edit',$post->id)}}">Edit</a>
                                                    <a class="dropdown-item"
                                                       href="{{route('post.job.delete',$post->id)}}">Delete</a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="epic-flex">
                                            <div class="loc-flex">
                                                <a href="#"><img src="{{asset('images/epic-icon.png')}}"
                                                                 class="img-fluid"
                                                                 alt="img">{{$post->company_name ?? ''}}</a>
                                                <a href="#"><img src="{{asset('images/loc-icon.png')}}"
                                                                 class="img-fluid"
                                                                 alt="img">{{$post->location ?? ''}}</a>
                                            </div>
                                            <div class="bokmark">
                                                <a href="#"><i class="fal fa-bookmark"></i></a>
                                                <a href="#"><i class="fal fa-envelope"></i></a>
                                            </div>
                                        </div>
                                        <div class="senir-wrodpres">
                                            <h3>{{$post->title ?? ''}}</h3>

                                            <div class="full-time">
                                                <a href="#" class="time">@if($post->job_type === 'full_time')Full
                                                    Time @elseif($post->job_type === 'half_time') Half Time @else
                                                        Hourly @endif</a>
                                                <span>${{$post->fees ?? ''}} @if($post->job_type === 'full_time')/
                                                    hr @endif</span>
                                            </div>
                                            @php
                                                $words = explode(' ', $post->description);
                                                $shortDescription = implode(' ', array_slice($words, 0, 50));
                                                $fullDescription = implode(' ', array_slice($words, 50));

                                              $tags = explode(',',$post->tags);
                                            @endphp

                                            <p>
                                                {!! $shortDescription !!}
                                                @if (count($words) > 50)
                                                    <span style="color: #666666;
    font-size: 0.9rem;
    line-height: 24px;
    font-family: 'Source Sans Pro';
    margin-bottom: 7px;
    width: 95%;" class="more-text d-none">{!! $fullDescription !!}</span>
                                                    <a href="javascript:void(0);" class="view toggle-more">View More</a>
                                                @endif
                                            </p>
                                            <ul class="course">
                                                @foreach($tags as $tag)
                                                    <li><a href="#">{{ trim($tag) }}</a></li>
                                                @endforeach
                                            </ul>
                                        </div>

                                        <div class="like-comnt" style="justify-content: end!important;">

                                            <div class="view-50">
                                                <button class="btn btn-primary">Applicants 5</button>
                                            </div>
                                        </div>

                                    </div>
                                @endforeach
                            @endif
                        </div>
                        <div class="tab-pane fade" id="listing" role="tabpanel" aria-labelledby="bids-tab">

                            @if(Auth::user()->marketplace->isEmpty())
                                <label>No Listing!</label>
                            @else
                                @foreach(Auth::user()->marketplace as $market)
                                    <div class="post-coment">

                                        <div class="friend-request-box marketplace-box h-100">
                                            <div class="friend-request-box-top">
                                                <div class="epic-flex justify-content-between">
                                                    <div class="loc-flex d-block">
                                                        <h6>{{ $market->user->name ?? '' }}</h6>
                                                        <p style="    font-size: 18px;
    font-weight: bold;">{{ $market->title ?? '' }}</p>
                                                        <div class="loc-flex">
                                                            <a href="#"><img src="{{asset('images/loc-icon.png')}}"
                                                                             class="img-fluid"
                                                                             alt="img">{{$market->location ?? ''}}</a>
                                                        </div>
                                                    </div>
                                                    <div class="epic-flex justify-content-between">
                                                        <div class="bokmark">
                                                            <a href="javascript:;"><i class="fal fa-bookmark"></i></a>
                                                        </div>

                                                        <div class="cmnt-jhn" style="    margin-top: -12px;">
                                                            <div class="dropdown">
                                                                <button class="btn btn-secondary dropdown-toggle"
                                                                        type="button" id="dropdownMenuButton"
                                                                        data-toggle="dropdown" aria-haspopup="true"
                                                                        aria-expanded="false">
                                                                    <i class="far fa-ellipsis-v"></i>
                                                                </button>
                                                                <div class="dropdown-menu"
                                                                     aria-labelledby="dropdownMenuButton">
                                                                    <a class="dropdown-item"
                                                                       href="{{ route('market.place.list.edit', $market->id) }}">Edit</a>
                                                                    <a class="dropdown-item"
                                                                       href="{{ route('market.place.list.delete', $market->id) }}">Delete</a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <img
                                                    src="{{ $market->getFirstMediaUrl('market_image') ?: asset('images/no-image.png') }}"

                                                    class="img-fluid"
                                                    style="border-radius: 134px;    height: 236px;margin-top: 42px;
                                                     margin-bottom: 30px"/>
                                                <ul class="friend-request-list">
                                                    <li>
                                                        <button>${{ $market->price ?? '' }}</button>
                                                    </li>
                                                    <li>
                                                        <button>Add To Cart</button>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="friend-request-box-bottom text-center">
                                                <a href="#">Read More</a>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                        <div class="tab-pane fade" id="training" role="tabpanel" aria-labelledby="training-tab">

                            @if(Auth::user()->training->isEmpty())
                                <label>No Training List!</label>
                            @else
                                @foreach(Auth::user()->training as $training)
                                    <div class="post-coment">
                                        <div class="epic-flex justify-content-between">
                                            <div class="bokmark">

                                            </div>

                                            <div class="cmnt-jhn" style="    margin-top: -12px;">
                                                <div class="dropdown">
                                                    <button class="btn btn-secondary dropdown-toggle"
                                                            type="button" id="dropdownMenuButton"
                                                            data-toggle="dropdown" aria-haspopup="true"
                                                            aria-expanded="false">
                                                        <i class="far fa-ellipsis-v"></i>
                                                    </button>
                                                    <div class="dropdown-menu"
                                                         aria-labelledby="dropdownMenuButton">
                                                        <a class="dropdown-item"
                                                           href="{{ route('training.list.edit', $training->id) }}">Edit</a>
                                                        <a class="dropdown-item"
                                                           href="{{ route('training.list.delete', $training->id) }}">Delete</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-12 col-md-12 mb-4">
                                            <div class="blog-box">
                                                <div class="blog-box-img">
                                                    <figure>
                                                        <img
                                                            src="{{$training->getFirstMediaUrl('training_list_attachments') ?: 'images/no-image.png'}}"
                                                            alt="">
                                                    </figure>
                                                    <span class="blog-box-rating">
                            <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
                            <i class="fas fa-star"></i><i class="fal fa-star"></i>
                        </span>
                                                </div>
                                                <div class="blog-box-content">
                                                    <h5>{{$training->company_name ?? ''}}</h5>
                                                    <p>{{$training->training_location ?? ''}}</p>
                                                    <hr class="seperator">
                                                    <ul class="blog-option-list">
                                                        <li>{{ $training->created_at->format('F j, Y') ?? '' }}</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif

                        </div>
                        <div class="tab-pane fade" id="portfolio" role="tabpanel" aria-labelledby="portfolio-tab">
                            <div class="row">
                                @if(Auth::user()->getMedia('portfolio')->isEmpty())
                                    <label>No Portfolio Found!</label>
                                @else
                                    @foreach(Auth::user()->getMedia('portfolio') as $media)
                                        <div class="col-md-6 mb-4">
                                            <a href="{{ $media->getUrl() }}" data-lightbox="portfolio-gallery"
                                               data-title="{{ $media->name }}">
                                                <img src="{{ $media->getUrl() }}" class="img-fluid rounded shadow-sm"
                                                     alt="{{ $media->name }}">
                                            </a>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>

                        {{--                        <div class="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="reviews-tab">--}}
                        {{--                            <div class="post-coment">--}}
                        {{--                                <div class="cmnt-jhn">--}}
                        {{--                                    <div class="d-flex">--}}
                        {{--                                        <figure>--}}
                        {{--                                            <img src="images/pb1.png" class="img-fluid" alt="img">--}}
                        {{--                                        </figure>--}}
                        {{--                                        <div>--}}
                        {{--                                            <h4>John Doe</h4>--}}
                        {{--                                            <span><i class="fad fa-clock"></i>3 min ago</span>--}}
                        {{--                                        </div>--}}
                        {{--                                    </div>--}}
                        {{--                                    <div class="dropdown">--}}
                        {{--                                        <button class="btn btn-secondary dropdown-toggle" type="button"--}}
                        {{--                                                id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"--}}
                        {{--                                                aria-expanded="false">--}}
                        {{--                                            <i class="far fa-ellipsis-v"></i>--}}
                        {{--                                        </button>--}}
                        {{--                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">--}}
                        {{--                                            <a class="dropdown-item" href="#">Action</a>--}}
                        {{--                                            <a class="dropdown-item" href="#">Another action</a>--}}
                        {{--                                            <a class="dropdown-item" href="#">Something else here</a>--}}
                        {{--                                        </div>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        {{--                                <div class="epic-flex">--}}
                        {{--                                    <div class="loc-flex">--}}
                        {{--                                        <a href="#"><img src="images/epic-icon.png" class="img-fluid"--}}
                        {{--                                                         alt="img">Epic--}}
                        {{--                                            Coder</a>--}}
                        {{--                                        <a href="#"><img src="images/loc-icon.png" class="img-fluid"--}}
                        {{--                                                         alt="img">Location</a>--}}
                        {{--                                    </div>--}}
                        {{--                                    <div class="bokmark">--}}
                        {{--                                        <a href="#"><i class="fal fa-bookmark"></i></a>--}}
                        {{--                                        <a href="#"><i class="fal fa-envelope"></i></a>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        {{--                                <div class="senir-wrodpres">--}}
                        {{--                                    <h3>Senior Wordpress Developer</h3>--}}
                        {{--                                    <div class="full-time">--}}
                        {{--                                        <a href="#" class="time">Full Time</a>--}}
                        {{--                                        <span>$30 / hr</span>--}}
                        {{--                                    </div>--}}
                        {{--                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus--}}
                        {{--                                        hendrerit metus, ut ullamcorper quam finibus at. Etiam id magna sit amet...</p>--}}
                        {{--                                    <a href="#" class="view">View More</a>--}}
                        {{--                                    <ul class="course">--}}
                        {{--                                        <li><a href="#">HTML</a></li>--}}
                        {{--                                        <li><a href="#">PHP</a></li>--}}
                        {{--                                        <li><a href="#">PHP</a></li>--}}
                        {{--                                        <li><a href="#">Javascript</a></li>--}}
                        {{--                                        <li><a href="#">Wordpress</a></li>--}}
                        {{--                                    </ul>--}}
                        {{--                                </div>--}}
                        {{--                                <div class="like-comnt">--}}
                        {{--                                    <ul>--}}
                        {{--                                        <li>--}}
                        {{--                                            <a href="#"><i class="fas fa-heart"></i>Like</a>--}}
                        {{--                                            <figure>--}}
                        {{--                                                <img src="images/likeimg.png" class="img-fluid" alt="img">--}}
                        {{--                                                <span>25</span>--}}
                        {{--                                            </figure>--}}
                        {{--                                            <a href="#"><i class="fas fa-comment-alt"></i> Comment 15</a>--}}
                        {{--                                        </li>--}}
                        {{--                                    </ul>--}}
                        {{--                                    <div class="view-50">--}}
                        {{--                                        <a href="#"><i class="far fa-eye"></i> Views 50</a>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        {{--                            </div>--}}
                        {{--                            <div class="post-coment">--}}
                        {{--                                <div class="cmnt-jhn">--}}
                        {{--                                    <div class="d-flex">--}}
                        {{--                                        <figure>--}}
                        {{--                                            <img src="images/pb1.png" class="img-fluid" alt="img">--}}
                        {{--                                        </figure>--}}
                        {{--                                        <div>--}}
                        {{--                                            <h4>John Doe</h4>--}}
                        {{--                                            <span><i class="fad fa-clock"></i>3 min ago</span>--}}
                        {{--                                        </div>--}}
                        {{--                                    </div>--}}
                        {{--                                    <div class="dropdown">--}}
                        {{--                                        <button class="btn btn-secondary dropdown-toggle" type="button"--}}
                        {{--                                                id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"--}}
                        {{--                                                aria-expanded="false">--}}
                        {{--                                            <i class="far fa-ellipsis-v"></i>--}}
                        {{--                                        </button>--}}
                        {{--                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">--}}
                        {{--                                            <a class="dropdown-item" href="#">Action</a>--}}
                        {{--                                            <a class="dropdown-item" href="#">Another action</a>--}}
                        {{--                                            <a class="dropdown-item" href="#">Something else here</a>--}}
                        {{--                                        </div>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        {{--                                <div class="epic-flex">--}}
                        {{--                                    <div class="loc-flex">--}}
                        {{--                                        <a href="#"><img src="images/epic-icon.png" class="img-fluid"--}}
                        {{--                                                         alt="img">Epic--}}
                        {{--                                            Coder</a>--}}
                        {{--                                        <a href="#"><img src="images/loc-icon.png" class="img-fluid"--}}
                        {{--                                                         alt="img">Location</a>--}}
                        {{--                                    </div>--}}
                        {{--                                    <div class="bokmark">--}}
                        {{--                                        <a href="#"><i class="fal fa-bookmark"></i></a>--}}
                        {{--                                        <a href="#"><i class="fal fa-envelope"></i></a>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        {{--                                <div class="senir-wrodpres">--}}
                        {{--                                    <h3>Senior Wordpress Developer</h3>--}}
                        {{--                                    <div class="full-time">--}}
                        {{--                                        <a href="#" class="time">Full Time</a>--}}
                        {{--                                        <span>$30 / hr</span>--}}
                        {{--                                    </div>--}}
                        {{--                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus--}}
                        {{--                                        hendrerit metus, ut ullamcorper quam finibus at. Etiam id magna sit amet...</p>--}}
                        {{--                                    <a href="#" class="view">View More</a>--}}
                        {{--                                    <ul class="course">--}}
                        {{--                                        <li><a href="#">HTML</a></li>--}}
                        {{--                                        <li><a href="#">PHP</a></li>--}}
                        {{--                                        <li><a href="#">PHP</a></li>--}}
                        {{--                                        <li><a href="#">Javascript</a></li>--}}
                        {{--                                        <li><a href="#">Wordpress</a></li>--}}
                        {{--                                    </ul>--}}
                        {{--                                </div>--}}
                        {{--                                <div class="like-comnt">--}}
                        {{--                                    <ul>--}}
                        {{--                                        <li>--}}
                        {{--                                            <a href="#"><i class="fas fa-heart"></i>Like</a>--}}
                        {{--                                            <figure>--}}
                        {{--                                                <img src="images/likeimg.png" class="img-fluid" alt="img">--}}
                        {{--                                                <span>25</span>--}}
                        {{--                                            </figure>--}}
                        {{--                                            <a href="#"><i class="fas fa-comment-alt"></i> Comment 15</a>--}}
                        {{--                                        </li>--}}
                        {{--                                    </ul>--}}
                        {{--                                    <div class="view-50">--}}
                        {{--                                        <a href="#"><i class="far fa-eye"></i> Views 50</a>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        {{--                            </div>--}}
                        {{--                            <div class="post-coment">--}}
                        {{--                                <div class="cmnt-jhn">--}}
                        {{--                                    <div class="d-flex">--}}
                        {{--                                        <figure>--}}
                        {{--                                            <img src="images/pb1.png" class="img-fluid" alt="img">--}}
                        {{--                                        </figure>--}}
                        {{--                                        <div>--}}
                        {{--                                            <h4>John Doe</h4>--}}
                        {{--                                            <span><i class="fad fa-clock"></i>3 min ago</span>--}}
                        {{--                                        </div>--}}
                        {{--                                    </div>--}}
                        {{--                                    <div class="dropdown">--}}
                        {{--                                        <button class="btn btn-secondary dropdown-toggle" type="button"--}}
                        {{--                                                id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"--}}
                        {{--                                                aria-expanded="false">--}}
                        {{--                                            <i class="far fa-ellipsis-v"></i>--}}
                        {{--                                        </button>--}}
                        {{--                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">--}}
                        {{--                                            <a class="dropdown-item" href="#">Action</a>--}}
                        {{--                                            <a class="dropdown-item" href="#">Another action</a>--}}
                        {{--                                            <a class="dropdown-item" href="#">Something else here</a>--}}
                        {{--                                        </div>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        {{--                                <div class="epic-flex">--}}
                        {{--                                    <div class="loc-flex">--}}
                        {{--                                        <a href="#"><img src="images/epic-icon.png" class="img-fluid"--}}
                        {{--                                                         alt="img">Epic--}}
                        {{--                                            Coder</a>--}}
                        {{--                                        <a href="#"><img src="images/loc-icon.png" class="img-fluid"--}}
                        {{--                                                         alt="img">Location</a>--}}
                        {{--                                    </div>--}}
                        {{--                                    <div class="bokmark">--}}
                        {{--                                        <a href="#"><i class="fal fa-bookmark"></i></a>--}}
                        {{--                                        <a href="#"><i class="fal fa-envelope"></i></a>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        {{--                                <div class="senir-wrodpres">--}}
                        {{--                                    <h3>Senior Wordpress Developer</h3>--}}
                        {{--                                    <div class="full-time">--}}
                        {{--                                        <a href="#" class="time">Full Time</a>--}}
                        {{--                                        <span>$30 / hr</span>--}}
                        {{--                                    </div>--}}
                        {{--                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus--}}
                        {{--                                        hendrerit metus, ut ullamcorper quam finibus at. Etiam id magna sit amet...</p>--}}
                        {{--                                    <a href="#" class="view">View More</a>--}}
                        {{--                                    <ul class="course">--}}
                        {{--                                        <li><a href="#">HTML</a></li>--}}
                        {{--                                        <li><a href="#">PHP</a></li>--}}
                        {{--                                        <li><a href="#">PHP</a></li>--}}
                        {{--                                        <li><a href="#">Javascript</a></li>--}}
                        {{--                                        <li><a href="#">Wordpress</a></li>--}}
                        {{--                                    </ul>--}}
                        {{--                                </div>--}}
                        {{--                                <div class="like-comnt">--}}
                        {{--                                    <ul>--}}
                        {{--                                        <li>--}}
                        {{--                                            <a href="#"><i class="fas fa-heart"></i>Like</a>--}}
                        {{--                                            <figure>--}}
                        {{--                                                <img src="images/likeimg.png" class="img-fluid" alt="img">--}}
                        {{--                                                <span>25</span>--}}
                        {{--                                            </figure>--}}
                        {{--                                            <a href="#"><i class="fas fa-comment-alt"></i> Comment 15</a>--}}
                        {{--                                        </li>--}}
                        {{--                                    </ul>--}}
                        {{--                                    <div class="view-50">--}}
                        {{--                                        <a href="#"><i class="far fa-eye"></i> Views 50</a>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        {{--                            </div>--}}
                        {{--                            <div class="post-coment">--}}
                        {{--                                <div class="cmnt-jhn">--}}
                        {{--                                    <div class="d-flex">--}}
                        {{--                                        <figure>--}}
                        {{--                                            <img src="images/pb1.png" class="img-fluid" alt="img">--}}
                        {{--                                        </figure>--}}
                        {{--                                        <div>--}}
                        {{--                                            <h4>John Doe</h4>--}}
                        {{--                                            <span><i class="fad fa-clock"></i>3 min ago</span>--}}
                        {{--                                        </div>--}}
                        {{--                                    </div>--}}
                        {{--                                    <div class="dropdown">--}}
                        {{--                                        <button class="btn btn-secondary dropdown-toggle" type="button"--}}
                        {{--                                                id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"--}}
                        {{--                                                aria-expanded="false">--}}
                        {{--                                            <i class="far fa-ellipsis-v"></i>--}}
                        {{--                                        </button>--}}
                        {{--                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">--}}
                        {{--                                            <a class="dropdown-item" href="#">Action</a>--}}
                        {{--                                            <a class="dropdown-item" href="#">Another action</a>--}}
                        {{--                                            <a class="dropdown-item" href="#">Something else here</a>--}}
                        {{--                                        </div>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        {{--                                <div class="epic-flex">--}}
                        {{--                                    <div class="loc-flex">--}}
                        {{--                                        <a href="#"><img src="images/epic-icon.png" class="img-fluid"--}}
                        {{--                                                         alt="img">Epic--}}
                        {{--                                            Coder</a>--}}
                        {{--                                        <a href="#"><img src="images/loc-icon.png" class="img-fluid"--}}
                        {{--                                                         alt="img">Location</a>--}}
                        {{--                                    </div>--}}
                        {{--                                    <div class="bokmark">--}}
                        {{--                                        <a href="#"><i class="fal fa-bookmark"></i></a>--}}
                        {{--                                        <a href="#"><i class="fal fa-envelope"></i></a>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        {{--                                <div class="senir-wrodpres">--}}
                        {{--                                    <h3>Senior Wordpress Developer</h3>--}}
                        {{--                                    <div class="full-time">--}}
                        {{--                                        <a href="#" class="time">Full Time</a>--}}
                        {{--                                        <span>$30 / hr</span>--}}
                        {{--                                    </div>--}}
                        {{--                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus--}}
                        {{--                                        hendrerit metus, ut ullamcorper quam finibus at. Etiam id magna sit amet...</p>--}}
                        {{--                                    <a href="#" class="view">View More</a>--}}
                        {{--                                    <ul class="course">--}}
                        {{--                                        <li><a href="#">HTML</a></li>--}}
                        {{--                                        <li><a href="#">PHP</a></li>--}}
                        {{--                                        <li><a href="#">PHP</a></li>--}}
                        {{--                                        <li><a href="#">Javascript</a></li>--}}
                        {{--                                        <li><a href="#">Wordpress</a></li>--}}
                        {{--                                    </ul>--}}
                        {{--                                </div>--}}
                        {{--                                <div class="like-comnt">--}}
                        {{--                                    <ul>--}}
                        {{--                                        <li>--}}
                        {{--                                            <a href="#"><i class="fas fa-heart"></i>Like</a>--}}
                        {{--                                            <figure>--}}
                        {{--                                                <img src="images/likeimg.png" class="img-fluid" alt="img">--}}
                        {{--                                                <span>25</span>--}}
                        {{--                                            </figure>--}}
                        {{--                                            <a href="#"><i class="fas fa-comment-alt"></i> Comment 15</a>--}}
                        {{--                                        </li>--}}
                        {{--                                    </ul>--}}
                        {{--                                    <div class="view-50">--}}
                        {{--                                        <a href="#"><i class="far fa-eye"></i> Views 50</a>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        {{--                            </div>--}}
                        {{--                        </div>--}}
                        {{--                        <div class="tab-pane fade" id="payment" role="tabpanel" aria-labelledby="payment-tab">--}}
                        {{--                            <div class="post-coment">--}}
                        {{--                                <div class="cmnt-jhn">--}}
                        {{--                                    <div class="d-flex">--}}
                        {{--                                        <figure>--}}
                        {{--                                            <img src="images/pb1.png" class="img-fluid" alt="img">--}}
                        {{--                                        </figure>--}}
                        {{--                                        <div>--}}
                        {{--                                            <h4>John Doe</h4>--}}
                        {{--                                            <span><i class="fad fa-clock"></i>3 min ago</span>--}}
                        {{--                                        </div>--}}
                        {{--                                    </div>--}}
                        {{--                                    <div class="dropdown">--}}
                        {{--                                        <button class="btn btn-secondary dropdown-toggle" type="button"--}}
                        {{--                                                id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"--}}
                        {{--                                                aria-expanded="false">--}}
                        {{--                                            <i class="far fa-ellipsis-v"></i>--}}
                        {{--                                        </button>--}}
                        {{--                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">--}}
                        {{--                                            <a class="dropdown-item" href="#">Action</a>--}}
                        {{--                                            <a class="dropdown-item" href="#">Another action</a>--}}
                        {{--                                            <a class="dropdown-item" href="#">Something else here</a>--}}
                        {{--                                        </div>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        {{--                                <div class="epic-flex">--}}
                        {{--                                    <div class="loc-flex">--}}
                        {{--                                        <a href="#"><img src="images/epic-icon.png" class="img-fluid"--}}
                        {{--                                                         alt="img">Epic--}}
                        {{--                                            Coder</a>--}}
                        {{--                                        <a href="#"><img src="images/loc-icon.png" class="img-fluid"--}}
                        {{--                                                         alt="img">Location</a>--}}
                        {{--                                    </div>--}}
                        {{--                                    <div class="bokmark">--}}
                        {{--                                        <a href="#"><i class="fal fa-bookmark"></i></a>--}}
                        {{--                                        <a href="#"><i class="fal fa-envelope"></i></a>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        {{--                                <div class="senir-wrodpres">--}}
                        {{--                                    <h3>Senior Wordpress Developer</h3>--}}
                        {{--                                    <div class="full-time">--}}
                        {{--                                        <a href="#" class="time">Full Time</a>--}}
                        {{--                                        <span>$30 / hr</span>--}}
                        {{--                                    </div>--}}
                        {{--                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus--}}
                        {{--                                        hendrerit metus, ut ullamcorper quam finibus at. Etiam id magna sit amet...</p>--}}
                        {{--                                    <a href="#" class="view">View More</a>--}}
                        {{--                                    <ul class="course">--}}
                        {{--                                        <li><a href="#">HTML</a></li>--}}
                        {{--                                        <li><a href="#">PHP</a></li>--}}
                        {{--                                        <li><a href="#">PHP</a></li>--}}
                        {{--                                        <li><a href="#">Javascript</a></li>--}}
                        {{--                                        <li><a href="#">Wordpress</a></li>--}}
                        {{--                                    </ul>--}}
                        {{--                                </div>--}}
                        {{--                                <div class="like-comnt">--}}
                        {{--                                    <ul>--}}
                        {{--                                        <li>--}}
                        {{--                                            <a href="#"><i class="fas fa-heart"></i>Like</a>--}}
                        {{--                                            <figure>--}}
                        {{--                                                <img src="images/likeimg.png" class="img-fluid" alt="img">--}}
                        {{--                                                <span>25</span>--}}
                        {{--                                            </figure>--}}
                        {{--                                            <a href="#"><i class="fas fa-comment-alt"></i> Comment 15</a>--}}
                        {{--                                        </li>--}}
                        {{--                                    </ul>--}}
                        {{--                                    <div class="view-50">--}}
                        {{--                                        <a href="#"><i class="far fa-eye"></i> Views 50</a>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        {{--                            </div>--}}
                        {{--                            <div class="post-coment">--}}
                        {{--                                <div class="cmnt-jhn">--}}
                        {{--                                    <div class="d-flex">--}}
                        {{--                                        <figure>--}}
                        {{--                                            <img src="images/pb1.png" class="img-fluid" alt="img">--}}
                        {{--                                        </figure>--}}
                        {{--                                        <div>--}}
                        {{--                                            <h4>John Doe</h4>--}}
                        {{--                                            <span><i class="fad fa-clock"></i>3 min ago</span>--}}
                        {{--                                        </div>--}}
                        {{--                                    </div>--}}
                        {{--                                    <div class="dropdown">--}}
                        {{--                                        <button class="btn btn-secondary dropdown-toggle" type="button"--}}
                        {{--                                                id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"--}}
                        {{--                                                aria-expanded="false">--}}
                        {{--                                            <i class="far fa-ellipsis-v"></i>--}}
                        {{--                                        </button>--}}
                        {{--                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">--}}
                        {{--                                            <a class="dropdown-item" href="#">Action</a>--}}
                        {{--                                            <a class="dropdown-item" href="#">Another action</a>--}}
                        {{--                                            <a class="dropdown-item" href="#">Something else here</a>--}}
                        {{--                                        </div>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        {{--                                <div class="epic-flex">--}}
                        {{--                                    <div class="loc-flex">--}}
                        {{--                                        <a href="#"><img src="images/epic-icon.png" class="img-fluid"--}}
                        {{--                                                         alt="img">Epic--}}
                        {{--                                            Coder</a>--}}
                        {{--                                        <a href="#"><img src="images/loc-icon.png" class="img-fluid"--}}
                        {{--                                                         alt="img">Location</a>--}}
                        {{--                                    </div>--}}
                        {{--                                    <div class="bokmark">--}}
                        {{--                                        <a href="#"><i class="fal fa-bookmark"></i></a>--}}
                        {{--                                        <a href="#"><i class="fal fa-envelope"></i></a>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        {{--                                <div class="senir-wrodpres">--}}
                        {{--                                    <h3>Senior Wordpress Developer</h3>--}}
                        {{--                                    <div class="full-time">--}}
                        {{--                                        <a href="#" class="time">Full Time</a>--}}
                        {{--                                        <span>$30 / hr</span>--}}
                        {{--                                    </div>--}}
                        {{--                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus--}}
                        {{--                                        hendrerit metus, ut ullamcorper quam finibus at. Etiam id magna sit amet...</p>--}}
                        {{--                                    <a href="#" class="view">View More</a>--}}
                        {{--                                    <ul class="course">--}}
                        {{--                                        <li><a href="#">HTML</a></li>--}}
                        {{--                                        <li><a href="#">PHP</a></li>--}}
                        {{--                                        <li><a href="#">PHP</a></li>--}}
                        {{--                                        <li><a href="#">Javascript</a></li>--}}
                        {{--                                        <li><a href="#">Wordpress</a></li>--}}
                        {{--                                    </ul>--}}
                        {{--                                </div>--}}
                        {{--                                <div class="like-comnt">--}}
                        {{--                                    <ul>--}}
                        {{--                                        <li>--}}
                        {{--                                            <a href="#"><i class="fas fa-heart"></i>Like</a>--}}
                        {{--                                            <figure>--}}
                        {{--                                                <img src="images/likeimg.png" class="img-fluid" alt="img">--}}
                        {{--                                                <span>25</span>--}}
                        {{--                                            </figure>--}}
                        {{--                                            <a href="#"><i class="fas fa-comment-alt"></i> Comment 15</a>--}}
                        {{--                                        </li>--}}
                        {{--                                    </ul>--}}
                        {{--                                    <div class="view-50">--}}
                        {{--                                        <a href="#"><i class="far fa-eye"></i> Views 50</a>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        {{--                            </div>--}}
                        {{--                            <div class="post-coment">--}}
                        {{--                                <div class="cmnt-jhn">--}}
                        {{--                                    <div class="d-flex">--}}
                        {{--                                        <figure>--}}
                        {{--                                            <img src="images/pb1.png" class="img-fluid" alt="img">--}}
                        {{--                                        </figure>--}}
                        {{--                                        <div>--}}
                        {{--                                            <h4>John Doe</h4>--}}
                        {{--                                            <span><i class="fad fa-clock"></i>3 min ago</span>--}}
                        {{--                                        </div>--}}
                        {{--                                    </div>--}}
                        {{--                                    <div class="dropdown">--}}
                        {{--                                        <button class="btn btn-secondary dropdown-toggle" type="button"--}}
                        {{--                                                id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"--}}
                        {{--                                                aria-expanded="false">--}}
                        {{--                                            <i class="far fa-ellipsis-v"></i>--}}
                        {{--                                        </button>--}}
                        {{--                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">--}}
                        {{--                                            <a class="dropdown-item" href="#">Action</a>--}}
                        {{--                                            <a class="dropdown-item" href="#">Another action</a>--}}
                        {{--                                            <a class="dropdown-item" href="#">Something else here</a>--}}
                        {{--                                        </div>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        {{--                                <div class="epic-flex">--}}
                        {{--                                    <div class="loc-flex">--}}
                        {{--                                        <a href="#"><img src="images/epic-icon.png" class="img-fluid"--}}
                        {{--                                                         alt="img">Epic--}}
                        {{--                                            Coder</a>--}}
                        {{--                                        <a href="#"><img src="images/loc-icon.png" class="img-fluid"--}}
                        {{--                                                         alt="img">Location</a>--}}
                        {{--                                    </div>--}}
                        {{--                                    <div class="bokmark">--}}
                        {{--                                        <a href="#"><i class="fal fa-bookmark"></i></a>--}}
                        {{--                                        <a href="#"><i class="fal fa-envelope"></i></a>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        {{--                                <div class="senir-wrodpres">--}}
                        {{--                                    <h3>Senior Wordpress Developer</h3>--}}
                        {{--                                    <div class="full-time">--}}
                        {{--                                        <a href="#" class="time">Full Time</a>--}}
                        {{--                                        <span>$30 / hr</span>--}}
                        {{--                                    </div>--}}
                        {{--                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus--}}
                        {{--                                        hendrerit metus, ut ullamcorper quam finibus at. Etiam id magna sit amet...</p>--}}
                        {{--                                    <a href="#" class="view">View More</a>--}}
                        {{--                                    <ul class="course">--}}
                        {{--                                        <li><a href="#">HTML</a></li>--}}
                        {{--                                        <li><a href="#">PHP</a></li>--}}
                        {{--                                        <li><a href="#">PHP</a></li>--}}
                        {{--                                        <li><a href="#">Javascript</a></li>--}}
                        {{--                                        <li><a href="#">Wordpress</a></li>--}}
                        {{--                                    </ul>--}}
                        {{--                                </div>--}}
                        {{--                                <div class="like-comnt">--}}
                        {{--                                    <ul>--}}
                        {{--                                        <li>--}}
                        {{--                                            <a href="#"><i class="fas fa-heart"></i>Like</a>--}}
                        {{--                                            <figure>--}}
                        {{--                                                <img src="images/likeimg.png" class="img-fluid" alt="img">--}}
                        {{--                                                <span>25</span>--}}
                        {{--                                            </figure>--}}
                        {{--                                            <a href="#"><i class="fas fa-comment-alt"></i> Comment 15</a>--}}
                        {{--                                        </li>--}}
                        {{--                                    </ul>--}}
                        {{--                                    <div class="view-50">--}}
                        {{--                                        <a href="#"><i class="far fa-eye"></i> Views 50</a>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        {{--                            </div>--}}
                        {{--                            <div class="post-coment">--}}
                        {{--                                <div class="cmnt-jhn">--}}
                        {{--                                    <div class="d-flex">--}}
                        {{--                                        <figure>--}}
                        {{--                                            <img src="images/pb1.png" class="img-fluid" alt="img">--}}
                        {{--                                        </figure>--}}
                        {{--                                        <div>--}}
                        {{--                                            <h4>John Doe</h4>--}}
                        {{--                                            <span><i class="fad fa-clock"></i>3 min ago</span>--}}
                        {{--                                        </div>--}}
                        {{--                                    </div>--}}
                        {{--                                    <div class="dropdown">--}}
                        {{--                                        <button class="btn btn-secondary dropdown-toggle" type="button"--}}
                        {{--                                                id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"--}}
                        {{--                                                aria-expanded="false">--}}
                        {{--                                            <i class="far fa-ellipsis-v"></i>--}}
                        {{--                                        </button>--}}
                        {{--                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">--}}
                        {{--                                            <a class="dropdown-item" href="#">Action</a>--}}
                        {{--                                            <a class="dropdown-item" href="#">Another action</a>--}}
                        {{--                                            <a class="dropdown-item" href="#">Something else here</a>--}}
                        {{--                                        </div>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        {{--                                <div class="epic-flex">--}}
                        {{--                                    <div class="loc-flex">--}}
                        {{--                                        <a href="#"><img src="images/epic-icon.png" class="img-fluid"--}}
                        {{--                                                         alt="img">Epic--}}
                        {{--                                            Coder</a>--}}
                        {{--                                        <a href="#"><img src="images/loc-icon.png" class="img-fluid"--}}
                        {{--                                                         alt="img">Location</a>--}}
                        {{--                                    </div>--}}
                        {{--                                    <div class="bokmark">--}}
                        {{--                                        <a href="#"><i class="fal fa-bookmark"></i></a>--}}
                        {{--                                        <a href="#"><i class="fal fa-envelope"></i></a>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        {{--                                <div class="senir-wrodpres">--}}
                        {{--                                    <h3>Senior Wordpress Developer</h3>--}}
                        {{--                                    <div class="full-time">--}}
                        {{--                                        <a href="#" class="time">Full Time</a>--}}
                        {{--                                        <span>$30 / hr</span>--}}
                        {{--                                    </div>--}}
                        {{--                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus--}}
                        {{--                                        hendrerit metus, ut ullamcorper quam finibus at. Etiam id magna sit amet...</p>--}}
                        {{--                                    <a href="#" class="view">View More</a>--}}
                        {{--                                    <ul class="course">--}}
                        {{--                                        <li><a href="#">HTML</a></li>--}}
                        {{--                                        <li><a href="#">PHP</a></li>--}}
                        {{--                                        <li><a href="#">PHP</a></li>--}}
                        {{--                                        <li><a href="#">Javascript</a></li>--}}
                        {{--                                        <li><a href="#">Wordpress</a></li>--}}
                        {{--                                    </ul>--}}
                        {{--                                </div>--}}
                        {{--                                <div class="like-comnt">--}}
                        {{--                                    <ul>--}}
                        {{--                                        <li>--}}
                        {{--                                            <a href="#"><i class="fas fa-heart"></i>Like</a>--}}
                        {{--                                            <figure>--}}
                        {{--                                                <img src="images/likeimg.png" class="img-fluid" alt="img">--}}
                        {{--                                                <span>25</span>--}}
                        {{--                                            </figure>--}}
                        {{--                                            <a href="#"><i class="fas fa-comment-alt"></i> Comment 15</a>--}}
                        {{--                                        </li>--}}
                        {{--                                    </ul>--}}
                        {{--                                    <div class="view-50">--}}
                        {{--                                        <a href="#"><i class="far fa-eye"></i> Views 50</a>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        {{--                            </div>--}}
                        {{--                        </div>--}}
                    </div>

                </div>
                <div class="col-lg-3">
                    <div class="top-jobs job-hide-tablet">
                        <div class="heading d-flex justify-content-between align-items-center">
                            <h3>Portfolio</h3>
                            <!-- Attractive Button to Open Modal -->
                            <button class="btn btn-outline-primary btn-sm" data-bs-toggle="modal"
                                    data-bs-target="#portfolioModal">
                                <i class="fas fa-upload me-1"></i> Upload Portfolio
                            </button>

                        </div>
                        @error('portfolio_images')
                        <div>
                            <small class="text-danger">{{ $message }}</small>
                        </div>
                        @enderror

                        @error('portfolio_images.*')
                        <div>
                            <small class="text-danger">{{ $message }}</small>
                        </div>
                        @enderror
                        <ul class="portfolio-list d-" style="list-style: none; padding: 0;">
                            @foreach(Auth::user()->getMedia('portfolio') as $media)
                                <li style="position: relative; width: 100px;">
                                    <!-- Delete Button -->
                                    <form action="{{ route('user.portfolio.delete', $media->id) }}" method="POST"
                                          style="position: absolute; top: -10px; right: -10px; z-index: 10;">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-danger"
                                                style="padding: 0 6px; border-radius: 50%;"
                                                onclick="return confirm('Are you sure you want to delete this image?')">
                                            &times;
                                        </button>
                                    </form>

                                    <figure style="margin: 0;">
                                        <img src="{{ $media->getUrl() }}" alt=""
                                             style="width: 100%; height: auto; object-fit: cover; border: 1px solid #ccc; border-radius: 4px;">
                                    </figure>
                                </li>
                            @endforeach
                        </ul>

                    </div>
                </div>

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

    <div class="modal fade" id="socialLinkModal" tabindex="-1" aria-labelledby="socialLinkModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <form action="{{ route('store.social-links') }}" method="POST">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="socialLinkModalLabel">Add Social Link</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="icon" class="form-label">Select Platform</label>
                            <select name="icon" class="form-select" required>
                                <option value="">-- Select --</option>
                                <option value="fab fa-linkedin-in">LinkedIn</option>
                                <option value="fab fa-facebook-f">Facebook</option>
                                <option value="fab fa-twitter">Twitter</option>
                                <option value="fab fa-instagram">Instagram</option>
                                <option value="fab fa-youtube">YouTube</option>
                                <option value="fab fa-google-plus-square">Google+</option>
                                <option value="fab fa-behance-square">Behance</option>
                                <option value="fab fa-pinterest">Pinterest</option>
                                <option value="fas fa-globe-americas">Website</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="url" class="form-label">URL</label>
                            <input type="url" name="url" class="form-control" placeholder="https://example.com"
                                   required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success">Save Link</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal-bg" id="imageModal">
        <div class="modal-content">
            <h4>Select Background Image (1920 x 267)</h4>
            <form action="{{route('update.user.banner.image')}}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="drop-area" id="drop-area">
                    <p>Click or drag and drop an image here</p>
                    <input type="file" id="modal-image-input" name="banner_image" accept="image/*"
                           style="display: none;">
                    <img id="preview" alt="Image Preview">
                </div>
                <div class="modal-buttons">
                    <button id="update-btn">Update</button>
                    <button class="cancel" id="cancel-btn">Cancel</button>
                </div>
            </form>
        </div>
    </div><!-- Modal -->

    <div class="modal fade" id="portfolioModal" tabindex="-1" aria-labelledby="portfolioModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form action="{{ route('user.portfolio.upload') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="portfolioModalLabel">Upload Portfolio Images</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="portfolio_images" class="form-label">Choose Images</label>
                            <input type="file" name="portfolio_images[]" class="form-control" multiple accept="image/*"
                                   required>
                            <small class="form-text text-muted">You can upload multiple images.</small>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success">Upload</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Profile Image Modal -->
    <div class="modal fade" id="profileImageModal" tabindex="-1" aria-labelledby="profileImageModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">

                <form action="{{ route('profile.image.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('POST')

                    <div class="modal-header">
                        <h5 class="modal-title" id="profileImageModalLabel">Update Profile Image</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body text-center">
                        <!-- Image Preview -->
                        <img id="imagePreview"
                             src="{{ Auth::user()->getFirstMediaUrl('profile_image') ?: 'https://via.placeholder.com/150' }}"
                             class="img-thumbnail mb-3" style="max-width: 200px;" alt="Preview">

                        <!-- File Input -->
                        <input type="file" class="form-control" name="profile_image" id="profileImageInput"
                               accept="image/*" required>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Update Image</button>
                    </div>
                </form>

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

@endsection
@push('script')
    <script>
        const fileInput2 = document.getElementById('profileImageInput');
        const preview2 = document.getElementById('imagePreview');
        const defaultSrc = preview2.src; // save initial preview

        fileInput2.addEventListener('change', function (event) {
            const file = event.target.files[0];
            if (file) {
                preview2.src = URL.createObjectURL(file);
            }
        });

        // Reset preview and input when modal closes
        document.getElementById('profileImageModal').addEventListener('hidden.bs.modal', function () {
            fileInput2.value = '';       // Clear file input
            preview2.src = defaultSrc;   // Reset preview image
        });

    </script>

    <script>
        const openModalBtn = document.getElementById("open-modal-btn");
        const modal = document.getElementById("imageModal");
        const cancelBtn = document.getElementById("cancel-btn");
        const dropArea = document.getElementById("drop-area");
        const fileInput = document.getElementById("modal-image-input");
        const preview = document.getElementById("preview");
        const updateBtn = document.getElementById("update-btn");
        const banner = document.querySelector(".inner-banner-sec");

        let selectedFile = null;

        openModalBtn.addEventListener("click", () => {
            modal.style.display = "flex";
        });

        cancelBtn.addEventListener("click", () => {
            modal.style.display = "none";
            preview.src = "";
            preview.style.display = "none";
            selectedFile = null;
        });

        dropArea.addEventListener("click", () => fileInput.click());

        fileInput.addEventListener("change", handleFiles);
        dropArea.addEventListener("dragover", (e) => {
            e.preventDefault();
            dropArea.classList.add("hover");
        });

        dropArea.addEventListener("dragleave", () => {
            dropArea.classList.remove("hover");
        });

        dropArea.addEventListener("drop", (e) => {
            e.preventDefault();
            dropArea.classList.remove("hover");
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                fileInput.files = files;
                handleFiles();
            }
        });

        function handleFiles() {
            const file = fileInput.files[0];
            if (file && file.type.startsWith("image/")) {
                selectedFile = file;
                const reader = new FileReader();
                reader.onload = function (e) {
                    preview.src = e.target.result;
                    preview.style.display = "block";
                };
                reader.readAsDataURL(file);
            }
        }

        updateBtn.addEventListener("click", () => {
            if (selectedFile) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    banner.style.backgroundImage = `url('${e.target.result}')`;
                    modal.style.display = "none";
                    preview.src = "";
                    preview.style.display = "none";
                    selectedFile = null;
                };
                reader.readAsDataURL(selectedFile);
            } else {
                alert("Please select an image first.");
            }
        });

        document.querySelectorAll('.toggle-more').forEach(function (btn) {
            btn.addEventListener('click', function () {
                const moreText = this.previousElementSibling;
                moreText.classList.toggle('d-none');
                this.textContent = moreText.classList.contains('d-none') ? 'View More' : 'View Less';
            });
        });


    </script>
@endpush