@extends('frontend.layout.dashboard-master')
@section('site_title', __('Job Details'))

@section('style')
    <style>
        /* ===== Overflow guard ===== */
        html,
        body {
            overflow-x: hidden;
        }

        /* ===== Utilities ===== */
        .flex-between {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }

        .flex-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .d-none {
            display: none !important;
        }

        .d-flex {
            display: flex;
        }

        .d-block {
            display: block;
        }

        .flex-wrap {
            flex-wrap: wrap;
        }

        .flex-column {
            flex-direction: column;
        }

        .w-100 {
            width: 100%;
        }

        .position-relative {
            position: relative;
        }

        .gap-2 {
            gap: 8px;
        }

        .gap-3 {
            gap: 12px;
        }

        .ms-2 {
            margin-left: 8px;
        }

        .mb-1 {
            margin-bottom: 4px;
        }

        .mb-2 {
            margin-bottom: 8px;
        }

        .mb-4 {
            margin-bottom: 16px;
        }

        .mt-0 {
            margin-top: 0;
        }

        .mt-1 {
            margin-top: 4px;
        }

        .p-3 {
            padding: 12px;
        }

        .bg-light {
            background: #F9FBFC;
        }

        .rounded {
            border-radius: 6px;
        }

        .disabled-link {
            background-color: #ccc !important;
            pointer-events: none;
            cursor: default;
        }

        /* ===== Badges ===== */
        .myJob-wrapper-single-id {
            font-size: 13px;
            color: #637381;
            font-weight: 500;
        }

        .myJob-wrapper-single-fixed {
            display: inline-flex;
            align-items: center;
            padding: 3px 10px;
            border-radius: 9999px;
            font-size: 12px;
            font-weight: 500;
            background: #F1F5F9;
            color: #3B4759;
        }

        .myJob-wrapper-single-fixed.active {
            background: #EFF9F3;
            color: var(--main-color-one);
        }

        .myJob-wrapper-single-fixed.closed {
            background: #ECEDEF;
            color: #3B4759;
        }

        .job-progress {
            display: inline-flex;
            align-items: center;
            padding: 3px 10px;
            border-radius: 9999px;
            font-size: 12px;
            font-weight: 500;
            background: #FFF4E8;
            color: #FA8C00;
        }

        .job_publicPrivate_view {
            display: inline-flex;
            align-items: center;
            padding: 3px 10px;
            border-radius: 9999px;
            font-size: 12px;
            font-weight: 500;
            background: #F1F5F9;
            color: #637381;
        }

        .shortlisted-item {
            display: inline-flex;
            align-items: center;
            padding: 3px 10px;
            border-radius: 9999px;
            font-size: 12px;
            font-weight: 500;
            background: #F1F5F9;
            color: #3B4759;
        }

        .shortlisted-item.seen {
            background: #EFF9F3;
            color: var(--main-color-one);
        }

        .shortlisted-item.not_seen {
            background: #F1F5F9;
            color: #637381;
        }

        .shortlisted-item.hired {
            background: #FFF4E8;
            color: #FA8C00;
        }

        .myJob-wrapper-single-match {
            display: inline-flex;
            align-items: center;
            padding: 3px 10px;
            border-radius: 9999px;
            font-size: 12px;
            font-weight: 500;
            background: #EFF9F3;
            color: var(--main-color-one);
        }

        /* ===== Titles / meta ===== */
        .myJob-wrapper-single-title {
            font-size: 16px;
            font-weight: 600;
            color: #242B36;
            margin: 0;
            word-break: break-word;
        }

        .myJob-wrapper-single-title a {
            color: #242B36;
            text-decoration: none;
        }

        .myJob-wrapper-single-title a:hover {
            color: var(--main-color-one);
        }

        .myJob-wrapper-single-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .myJob-wrapper-single-list-para {
            font-size: 13px;
            color: #637381;
        }

        .myJob-wrapper-single-header {
            padding-bottom: 16px;
            margin-bottom: 16px;
        }

        /* ===== Rich-text description ===== */
        .myJob-wrapper-single-contents-para {
            font-size: 14px;
            line-height: 1.7;
            color: #3B4759;
            overflow-x: auto;
            max-width: 100%;
            word-break: break-word;
            overflow-wrap: break-word;
        }

        .myJob-wrapper-single-contents-para * {
            max-width: 100% !important;
            box-sizing: border-box;
        }

        .myJob-wrapper-single-contents-para img,
        .myJob-wrapper-single-contents-para video,
        .myJob-wrapper-single-contents-para iframe {
            max-width: 100% !important;
            height: auto !important;
            display: block;
        }

        .myJob-wrapper-single-contents-para table {
            display: block !important;
            max-width: 100% !important;
            overflow-x: auto;
        }

        .myJob-wrapper-single-contents-para pre,
        .myJob-wrapper-single-contents-para code {
            white-space: pre-wrap;
            overflow-x: auto;
            max-width: 100% !important;
        }

        /* ===== Stats row ===== */
        .jobFilter-wrapper-item-bottom-list {
            display: flex;
            flex-wrap: wrap;
            gap: 12px 20px;
            list-style: none;
            padding: 16px 0;
            margin: 0;
            border-top: 1px solid #E9EBF0;
        }

        .jobFilter-wrapper-item-bottom-list-item {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }

        .item-icon {
            flex-shrink: 0;
            line-height: 0;
        }

        .item-para {
            font-size: 13px;
            color: #637381;
            white-space: nowrap;
        }

        .item-para strong {
            color: #242B36;
            font-weight: 600;
        }

        /* ===== Skills tags ===== */
        .jobFilter-wrapper-item-contents-tag {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            list-style: none;
            padding: 16px 0 0;
            margin: 0;
            border-top: 1px solid #E9EBF0;
        }

        .categoryWrap-wrapper-item-contents-tag-list a {
            display: inline-flex;
            padding: 4px 12px;
            background: #F1F5F9;
            border: 1px solid #E9EBF0;
            border-radius: 9999px;
            font-size: 12px;
            color: #3B4759;
            text-decoration: none;
        }

        .categoryWrap-wrapper-item-contents-tag-list a:hover {
            background: #EFF9F3;
            color: var(--main-color-one);
            border-color: var(--main-color-one);
        }

        /* ===== Borders ===== */
        .profile-border-top {
            border-top: 1px solid #E9EBF0;
            padding-top: 16px;
            margin-top: 16px;
        }

        .profile-border-bottom {
            border-bottom: 1px solid #E9EBF0;
            padding-bottom: 16px;
            margin-bottom: 16px;
        }

        /* ===== Buttons ===== */
        .btn-profile {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            text-decoration: none;
            border: 1px solid transparent;
            white-space: nowrap;
        }

        .btn-bg-1 {
            background: var(--main-color-one);
            color: #fff;
            border-color: var(--main-color-one);
        }

        .btn-bg-1:hover {
            background: #005f44;
            border-color: #005f44;
            color: #fff;
        }

        .btn-outline-1 {
            background: transparent;
            border-color: var(--main-color-one);
            color: var(--main-color-one);
        }

        .btn-outline-1:hover {
            background: #EFF9F3;
        }

        .btn-outline-cancel,
        .btn-outline-gray {
            background: transparent;
            border-color: #D0D5DD;
            color: #637381;
        }

        .btn-outline-cancel:hover,
        .btn-outline-gray:hover {
            background: #F1F5F9;
        }

        .btn-hover-danger:hover {
            border-color: #EF4444;
            color: #EF4444;
            background: #FEF2F2;
        }

        .btn-wrapper {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        /* ===== Tabs ===== */
        .tabs {
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0;
            overflow-x: auto;
            scrollbar-width: none;
            border-bottom: 1px solid #E9EBF0;
        }

        .tabs::-webkit-scrollbar {
            display: none;
        }

        .tabs li {
            padding: 12px 16px;
            font-size: 13px;
            font-weight: 500;
            color: #637381;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            white-space: nowrap;
            transition: color 0.15s;
        }

        .tabs li:hover {
            color: var(--main-color-one);
        }

        .tabs li.active {
            color: var(--main-color-one);
            border-bottom-color: var(--main-color-one);
        }

        /* ===== Proposal cards ===== */
        .myJob-wrapper {
            overflow: hidden;
        }

        .myJob-wrapper-single {
            background: #fff;
            border: 1px solid #E9EBF0;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 16px;
            overflow: hidden;
        }

        .myJob-wrapper-single:last-child {
            margin-bottom: 0;
        }

        .myJob-wrapper-single-flex {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
        }

        .myJob-wrapper-single-contents {
            flex: 1;
            min-width: 0;
            overflow: hidden;
        }

        .myJob-wrapper-single-arrow {
            flex-shrink: 0;
        }

        .jobFilter-proposal-author-flex {
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }

        .jobFilter-proposal-author-thumb {
            flex-shrink: 0;
        }

        .jobFilter-proposal-author-thumb img {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #E9EBF0;
            display: block;
        }

        .jobFilter-proposal-author-contents {
            flex: 1;
            min-width: 0;
        }

        .jobFilter-proposal-author-contents-title {
            font-size: 14px;
            font-weight: 600;
            color: #242B36;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
        }

        .jobFilter-proposal-author-contents-title a {
            color: #242B36;
            text-decoration: none;
            word-break: break-word;
        }

        .jobFilter-proposal-author-contents-title a:hover {
            color: var(--main-color-one);
        }

        .jobFilter-proposal-author-contents-subtitle {
            font-size: 12px;
            color: #637381;
            word-break: break-word;
            overflow-wrap: break-word;
            margin-top: 4px;
        }

        .jobFilter-proposal-author-contents-time {
            font-size: 11px;
            color: #637381;
            margin: 0;
            white-space: nowrap;
        }

        .job-proposal-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }

        .jobFilter-proposal-offered {
            display: flex;
            flex-wrap: wrap;
            gap: 12px 20px;
            padding: 12px 0;
            border-top: 1px solid #E9EBF0;
            margin-top: 12px;
        }

        .offered {
            font-size: 13px;
            color: #637381;
        }

        .offered-price,
        .offered-days {
            font-weight: 600;
            color: #242B36;
        }

        /* ===== Single-freelancer status (from component) ===== */
        .single-freelancer-author-status {
            display: inline-flex;
            align-items: center;
            padding: 2px 8px;
            border-radius: 9999px;
            font-size: 11px;
            font-weight: 500;
            background: #EFF9F3;
            color: var(--main-color-one);
        }

        .single-freelancer-author-status-ofline {
            display: inline-flex;
            align-items: center;
            padding: 2px 8px;
            border-radius: 9999px;
            font-size: 11px;
            font-weight: 500;
            background: #F1F5F9;
            color: #637381;
        }

        /* Rating helper output */
        .jobFilter-proposal-author-contents-review-flex {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .jobFilter-proposal-author-contents-review-para {
            font-size: 13px;
            color: #FA8C00;
            margin: 0;
        }

        .single-project-orderCompleted {
            font-size: 12px;
            color: #637381;
            text-decoration: none;
        }

        /* ===== Activities sidebar ===== */
        .jobFilter-activities {
            padding: 16px 20px;
        }

        .jobFilter-activities-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .jobFilter-activities-list-item {
            padding: 12px;
            background: #F9FBFC;
            border-radius: 8px;
            border: 1px solid #E9EBF0;
        }

        .jobFilter-activities-list-title {
            font-size: 14px;
            font-weight: 500;
            color: #242B36;
            margin: 0 0 4px;
            word-break: break-word;
        }

        .jobFilter-activities-list-para {
            font-size: 12px;
            color: #637381;
            margin: 0;
        }

        /* ===== Form inputs ===== */
        .single-input {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .label-title {
            font-size: 14px;
            font-weight: 500;
            color: #344054;
            margin-bottom: 4px;
            display: block;
        }

        .form-control,
        .form-message {
            width: 100%;
            padding: 10px 14px;
            border: 1px solid #D0D5DD;
            border-radius: 8px;
            font-size: 14px;
            color: #344054;
            background: #fff;
            outline: none;
            box-sizing: border-box;
        }

        .form-control:focus,
        .form-message:focus {
            border-color: var(--main-color-one);
            box-shadow: 0 0 0 3px rgba(0, 128, 96, .1);
        }

        /* ===== Spinner ===== */
        .spinner-border {
            display: inline-block;
            width: 1rem;
            height: 1rem;
            border: 2px solid currentColor;
            border-right-color: transparent;
            border-radius: 50%;
            animation: tw-spin 0.75s linear infinite;
        }

        .spinner-border-sm {
            width: 0.875rem;
            height: 0.875rem;
        }

        @keyframes tw-spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* ─────────────────────────────────────────────────────
       MOBILE  (≤ 767px) — covers all phones + portrait tablet
    ───────────────────────────────────────────────────── */
        @media (max-width: 767px) {

            /* Proposal card: stack freelancer info above badges */
            .myJob-wrapper-single {
                padding: 14px;
            }

            .myJob-wrapper-single-flex {
                flex-direction: column;
                gap: 10px;
            }

            .myJob-wrapper-single-arrow {
                width: 100%;
            }

            /* Button row: each group full-width, buttons full-width */
            .myJob-wrapper-single .flex-between {
                flex-direction: column;
                align-items: stretch;
                gap: 8px;
            }

            .myJob-wrapper-single .flex-between>.btn-wrapper {
                width: 100%;
                flex-direction: column;
                gap: 8px;
            }

            .myJob-wrapper-single .flex-between .flex-btn {
                flex-direction: column;
                gap: 8px;
            }

            .myJob-wrapper-single .flex-between .btn-profile {
                width: 100%;
            }

            /* Job details action buttons */
            .job_open_close_btn_location {
                flex-direction: column;
                align-items: stretch !important;
                gap: 8px;
            }

            .job_open_close_btn_location .btn-profile {
                width: 100%;
            }

            /* Tabs smaller text */
            .tabs li {
                padding: 10px 12px;
                font-size: 12px;
            }

            /* Stats: two per row */
            .jobFilter-wrapper-item-bottom-list {
                gap: 10px 16px;
            }

            .jobFilter-wrapper-item-bottom-list-item {
                flex: 1 1 calc(50% - 8px);
            }
        }

        /* ===== Mobile: Activities collapsible ===== */
        #activities-body {
            transition: none;
        }

        @media (max-width: 1023px) {
            #activities-body {
                display: none;
            }

            #activities-body.open {
                display: block;
            }

            #activities-chevron {
                display: block;
            }
        }

        @media (min-width: 1024px) {
            #activities-chevron {
                display: none;
            }

            #activities-body {
                display: block !important;
            }
        }
    </style>
@endsection

@section('content')

    {{-- Page Header --}}
    <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
        <div>
            <h1 class="text-[17px] sm:text-[20px] font-semibold leading-7 text-[#242B36]">{{ __('Job Details') }}</h1>
            <p class="mt-1 text-[13px] sm:text-[14px] text-[#637381]">#{{ str_pad($job_details->id, 6, '0', STR_PAD_LEFT) }}
                · {{ $job_details->title }}</p>
        </div>
        <a href="{{ route('client.job.all') }}"
            class="inline-flex items-center gap-2 rounded-xl border border-[#D0D5DD] bg-white px-4 py-2 text-[14px] font-medium text-[#637381] hover:bg-[#F9FBFC]">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
            {{ __('My Jobs') }}
        </a>
    </div>

    <div class="grid gap-6 lg:grid-cols-12">

        {{-- Left Column --}}
        <div class="space-y-6 lg:col-span-8 min-w-0">

            {{-- Job Details Card --}}
            <div class="rounded-xl border border-[#E9EBF0] bg-white p-4 sm:p-6 overflow-hidden">

                {{-- ID + badges --}}
                <div class="flex flex-wrap items-center gap-2">
                    <span
                        class="myJob-wrapper-single-id job_open_close_location">#{{ str_pad($job_details->id, 6, '0', STR_PAD_LEFT) }}</span>
                    <span class="myJob-wrapper-single-fixed">{{ ucfirst($job_details->type) }}</span>
                    @if ($job_details->on_off == 0)
                        <span class="myJob-wrapper-single-fixed closed">{{ __('Closed') }}</span>
                    @else
                        <span class="myJob-wrapper-single-fixed active">{{ __('Open') }}</span>
                    @endif
                    @if ($job_details->current_status == 1)
                        <span class="job-progress">{{ __('In Progress') }}</span>
                    @endif
                    @if ($job_details->current_status == 2)
                        <span class="job-progress">{{ __('Complete') }}</span>
                    @endif
                </div>

                {{-- Title --}}
                <h2 class="myJob-wrapper-single-title mt-3">{{ $job_details->title }}</h2>

                {{-- Meta --}}
                <div class="myJob-wrapper-single-list mt-2">
                    @if ($job_details->on_off == 1)
                        <span class="job_publicPrivate_view">{{ __('Public') }}</span>
                    @else
                        <span class="job_publicPrivate_view">{{ __('Only Me') }}</span>
                    @endif
                    <span class="myJob-wrapper-single-list-para">{{ $job_details->created_at->toFormattedDateString() }} ·
                        {{ ucfirst($job_details->level ?? '') }}</span>
                </div>

                {{-- Stats --}}
                <ul class="jobFilter-wrapper-item-bottom-list">
                    <li class="jobFilter-wrapper-item-bottom-list-item">
                        <span class="item-icon">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M12 18.75C11.8019 18.7474 11.6126 18.6676 11.4725 18.5275C11.3324 18.3874 11.2526 18.1981 11.25 18V17.75H10C9.80109 17.75 9.61032 17.671 9.46967 17.5303C9.32902 17.3897 9.25 17.1989 9.25 17C9.25 16.8011 9.32902 16.6103 9.46967 16.4697C9.61032 16.329 9.80109 16.25 10 16.25H12.5C12.6989 16.25 12.8897 16.171 13.0303 16.0303C13.171 15.8897 13.25 15.6989 13.25 15.5C13.25 15.3011 13.171 15.1103 13.0303 14.9697C12.8897 14.829 12.6989 14.75 12.5 14.75H11.5C10.9177 14.761 10.3538 14.5457 9.92696 14.1495C9.5001 13.7533 9.24349 13.207 9.21112 12.6255C9.17874 12.044 9.37311 11.4726 9.75335 11.0314C10.1336 10.5903 10.6701 10.3137 11.25 10.26V10C11.25 9.80109 11.329 9.61032 11.4697 9.46967C11.6103 9.32902 11.8011 9.25 12 9.25C12.1989 9.25 12.3897 9.32902 12.5303 9.46967C12.671 9.61032 12.75 9.80109 12.75 10V10.25H14C14.1989 10.25 14.3897 10.329 14.5303 10.4697C14.671 10.6103 14.75 10.8011 14.75 11C14.75 11.1989 14.671 11.3897 14.5303 11.5303C14.3897 11.671 14.1989 11.75 14 11.75H11.5C11.3011 11.75 11.1103 11.829 10.9697 11.9697C10.829 12.1103 10.75 12.3011 10.75 12.5C10.75 12.6989 10.829 12.8897 10.9697 13.0303C11.1103 13.171 11.3011 13.25 11.5 13.25H12.5C13.0963 13.248 13.668 13.5114 14.09 13.91C14.5114 14.3319 14.748 14.9037 14.748 15.5C14.748 16.0963 14.5114 16.6681 14.09 17.09C13.732 17.4552 13.2584 17.6849 12.75 17.74V18C12.7474 18.1981 12.6676 18.3874 12.5275 18.5275C12.3874 18.6676 12.1981 18.7474 12 18.75Z"
                                    fill="#6176F6" />
                                <path
                                    d="M17 21.75H7C6.27227 21.7448 5.57584 21.4534 5.06124 20.9388C4.54665 20.4242 4.25524 19.7277 4.25 19V7C4.25524 6.27227 4.54665 5.57584 5.06124 5.06124C5.57584 4.54665 6.27227 4.25524 7 4.25H8.35C8.47868 3.79814 8.72347 3.38786 9.06 3.06C9.6 2.51 10.28 2.25 11 2.25H13C13.72 2.25 14.4 2.51 14.94 3.06C15.2765 3.38786 15.5213 3.79814 15.65 4.25H17C17.7277 4.25524 18.4242 4.54665 18.9388 5.06124C19.4534 5.57584 19.7448 6.27227 19.75 7V19C19.7448 19.7277 19.4534 20.4242 18.9388 20.9388C18.4242 21.4534 17.7277 21.7448 17 21.75ZM7 5.75C6.66929 5.75261 6.35286 5.88515 6.11901 6.11901C5.88515 6.35286 5.75261 6.66929 5.75 7V19C5.75261 19.3307 5.88515 19.6471 6.11901 19.881C6.35286 20.1149 6.66929 20.2474 7 20.25H17C17.3307 20.2474 17.6471 20.1149 17.881 19.881C18.1149 19.6471 18.2474 19.3307 18.25 19V7C18.2474 6.66929 18.1149 6.35286 17.881 6.11901C17.6471 5.88515 17.3307 5.75261 17 5.75H15.65C15.5213 6.20186 15.2765 6.61214 14.94 6.94C14.4 7.49 13.72 7.75 13 7.75H11C10.28 7.75 9.6 7.49 9.06 6.94C8.72347 6.61214 8.47868 6.20186 8.35 5.75H7Z"
                                    fill="#6176F6" />
                            </svg>
                        </span>
                        @if ($job_details->type == 'hourly')
                            <span class="item-para">{{ __('Hourly Rate') }}:
                                <strong>{{ float_amount_with_currency_symbol($job_details->hourly_rate) }}</strong></span>
                        @else
                            <span class="item-para">{{ __('Budget') }}:
                                <strong>{{ float_amount_with_currency_symbol($job_details->budget) }}</strong></span>
                        @endif
                    </li>
                    <li class="jobFilter-wrapper-item-bottom-list-item">
                        <span class="item-icon">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                                <path
                                    d="M12.12 13.5305C12.1 13.5305 12.07 13.5305 12.05 13.5305C12.02 13.5305 11.98 13.5305 11.95 13.5305C9.67998 13.4605 7.97998 11.6905 7.97998 9.51047C7.97998 7.29047 9.78998 5.48047 12.01 5.48047C14.23 5.48047 16.04 7.29047 16.04 9.51047C16.03 11.7005 14.32 13.4605 12.15 13.5305Z"
                                    fill="#667085" />
                                <path
                                    d="M12.0001 22.7503C9.31008 22.7503 6.74008 21.7503 4.75008 19.9303C4.57008 19.7703 4.49008 19.5303 4.51008 19.3003C4.64008 18.1103 5.38008 17.0003 6.61008 16.1803C9.59008 14.2003 14.4201 14.2003 17.3901 16.1803C18.6201 17.0103 19.3601 18.1103 19.4901 19.3003C19.5201 19.5403 19.4301 19.7703 19.2501 19.9303C17.2601 21.7503 14.6901 22.7503 12.0001 22.7503Z"
                                    fill="#667085" />
                                <path
                                    d="M12 22.75C6.07 22.75 1.25 17.93 1.25 12C1.25 6.07 6.07 1.25 12 1.25C17.93 1.25 22.75 6.07 22.75 12C22.75 17.93 17.93 22.75 12 22.75ZM12 2.75C6.9 2.75 2.75 6.9 2.75 12C2.75 17.1 6.9 21.25 12 21.25C17.1 21.25 21.25 17.1 21.25 12C21.25 6.9 17.1 2.75 12 2.75Z"
                                    fill="#667085" />
                            </svg>
                        </span>
                        <span class="item-para">{{ __('Hired') }}: <strong>{{ $hired_freelancer_count }}</strong></span>
                    </li>
                    <li class="jobFilter-wrapper-item-bottom-list-item">
                        <span class="item-icon">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                                <path
                                    d="M14.6836 8.0166H10.3086C9.96693 8.0166 9.68359 7.73327 9.68359 7.3916C9.68359 7.04993 9.96693 6.7666 10.3086 6.7666H14.6836C15.0253 6.7666 15.3086 7.04993 15.3086 7.3916C15.3086 7.73327 15.0336 8.0166 14.6836 8.0166Z"
                                    fill="#475467" />
                                <path
                                    d="M5.93151 8.65002C5.77318 8.65002 5.61484 8.59168 5.48984 8.46668L4.86484 7.84168C4.62318 7.60002 4.62318 7.20002 4.86484 6.95835C5.10651 6.71668 5.50651 6.71668 5.74818 6.95835L5.93151 7.14168L7.36484 5.70835C7.60651 5.46668 8.00651 5.46668 8.24818 5.70835C8.48984 5.95002 8.48984 6.35002 8.24818 6.59168L6.37318 8.46668C6.25651 8.58335 6.09818 8.65002 5.93151 8.65002Z"
                                    fill="#475467" />
                                <path
                                    d="M14.6836 13.8501H10.3086C9.96693 13.8501 9.68359 13.5668 9.68359 13.2251C9.68359 12.8834 9.96693 12.6001 10.3086 12.6001H14.6836C15.0253 12.6001 15.3086 12.8834 15.3086 13.2251C15.3086 13.5668 15.0336 13.8501 14.6836 13.8501Z"
                                    fill="#475467" />
                                <path
                                    d="M5.93151 14.4833C5.77318 14.4833 5.61484 14.4249 5.48984 14.2999L4.86484 13.6749C4.62318 13.4333 4.62318 13.0333 4.86484 12.7916C5.10651 12.5499 5.50651 12.5499 5.74818 12.7916L5.93151 12.9749L7.36484 11.5416C7.60651 11.2999 8.00651 11.2999 8.24818 11.5416C8.48984 11.7833 8.48984 12.1833 8.24818 12.4249L6.37318 14.2999C6.25651 14.4166 6.09818 14.4833 5.93151 14.4833Z"
                                    fill="#475467" />
                                <path
                                    d="M12.5013 18.9584H7.5013C2.9763 18.9584 1.04297 17.0251 1.04297 12.5001V7.50008C1.04297 2.97508 2.9763 1.04175 7.5013 1.04175H12.5013C17.0263 1.04175 18.9596 2.97508 18.9596 7.50008V12.5001C18.9596 17.0251 17.0263 18.9584 12.5013 18.9584Z"
                                    fill="#475467" />
                            </svg>
                        </span>
                        <span class="item-para">{{ __('Proposals') }}:
                            <strong>{{ $job_details?->job_proposals?->count() }}</strong></span>
                    </li>
                    <li class="jobFilter-wrapper-item-bottom-list-item">
                        @if ($job_details->type == 'hourly')
                            <span class="item-para">{{ __('Estimated Hours') }}:
                                <strong>{{ $job_details->estimated_hours }}</strong></span>
                        @else
                            <span class="item-para">{{ __('Created') }}:
                                <strong>{{ $job_details->created_at->toFormattedDateString() }}</strong></span>
                        @endif
                    </li>
                </ul>

                {{-- Skills --}}
                @if ($job_details->job_skills->count() > 0)
                    <ul class="jobFilter-wrapper-item-contents-tag">
                        @foreach ($job_details->job_skills as $skill)
                            <li class="categoryWrap-wrapper-item-contents-tag-list">
                                <a href="javascript:void(0)">{{ $skill->skill ?? '' }}</a>
                            </li>
                        @endforeach
                    </ul>
                @endif

                {{-- Description --}}
                <div class="profile-border-top">
                    <div class="myJob-wrapper-single-contents-para">{!! $job_details->description !!}</div>
                </div>

                {{-- Actions --}}
                <div class="job_open_close_btn_location flex-between profile-border-top">
                    <a href="javascript:void(0)" class="btn-profile btn-outline-gray job_open_close"
                        data-job-id="{{ $job_details->id }}" data-job-on-off="{{ $job_details->on_off }}">
                        @if ($job_details->on_off == 0)
                            {{ __('Open Job') }}
                        @else
                            {{ __('Close Job') }}
                        @endif
                    </a>
                    @if (moduleExists('SecurityManage'))
                        @if (Auth::guard('web')->user()->freeze_job == 'freeze')
                            <a href="#" class="btn-profile btn-bg-1 disabled-link">
                                <i class="fa-sharp fa-regular fa-pen-to-square"></i>{{ __('Edit Job') }}
                            </a>
                        @else
                            <a href="{{ route('client.job.edit', $job_details->id) }}" class="btn-profile btn-bg-1">
                                <i class="fa-sharp fa-regular fa-pen-to-square"></i>{{ __('Edit Job') }}
                            </a>
                        @endif
                    @else
                        <a href="{{ route('client.job.edit', $job_details->id) }}" class="btn-profile btn-bg-1">
                            <i class="fa-sharp fa-regular fa-pen-to-square"></i>{{ __('Edit Job') }}
                        </a>
                    @endif
                </div>
            </div>

            {{-- Proposals Card --}}
            <div class="rounded-xl border border-[#E9EBF0] bg-white overflow-hidden">
                <ul class="tabs">
                    <li data-val="all" class="active filter_proposal">{{ __('Proposals') }}
                        ({{ $job_details->job_proposals->count() ?? 0 }})</li>
                    <li data-val="hired" class="filter_proposal">{{ __('Hired') }} ({{ $hired_freelancer_count }})</li>
                    <li data-val="shortlisted" class="filter_proposal">{{ __('Shortlisted') }}
                        ({{ $short_listed_freelancer_count }})</li>
                    <li data-val="interviewing" class="filter_proposal">{{ __('Interviewed') }}
                        ({{ $interviewed_freelancer_count }})</li>
                    <li data-val="rejected" class="filter_proposal">{{ __('Rejected') }}
                        ({{ $rejected_freelancer_count }})</li>
                    <input type="hidden" value="{{ $job_details->id }}" id="Job_id_for_filter_jobs">
                </ul>
                <div class="filter_job_proposal_result p-4 sm:p-6">
                    @include('frontend.user.client.job.job-details.proposals')
                </div>
            </div>

        </div>

        {{-- Right Column: Activities --}}
        <div class="lg:col-span-4 min-w-0">
            <div class="sticky top-6 rounded-xl border border-[#E9EBF0] bg-white overflow-hidden">
                <button type="button" id="activities-toggle-btn"
                    class="flex w-full items-center justify-between border-b border-[#E9EBF0] px-5 py-4 text-left lg:cursor-default">
                    <h3 class="text-[15px] font-semibold text-[#242B36]">{{ __('Activities') }}</h3>
                    <svg id="activities-chevron" class="h-4 w-4 text-[#637381] transition-transform duration-200"
                        viewBox="0 0 20 20" fill="none">
                        <path d="M5 7.5l5 5 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                            stroke-linejoin="round" />
                    </svg>
                </button>
                <div class="jobFilter-activities" id="activities-body">
                    @php $activity_count = 0; @endphp
                    <ul class="jobFilter-activities-list">
                        @foreach ($job_details?->job_proposals as $proposal)
                            @if ($proposal->is_interview_take == 1)
                                @php $activity_count++; @endphp
                                <li class="jobFilter-activities-list-item">
                                    <h6 class="jobFilter-activities-list-title">{{ __('Interviewed') }}
                                        <strong>{{ $proposal?->freelancer?->fullname }}</strong></h6>
                                    <p class="jobFilter-activities-list-para">
                                        {{ $proposal->updated_at?->toFormattedDateString() }}</p>
                                </li>
                            @endif
                            @if ($proposal?->is_interview_take == 0 && $proposal?->is_short_listed == 1)
                                @php $activity_count++; @endphp
                                <li class="jobFilter-activities-list-item">
                                    <h6 class="jobFilter-activities-list-title">{{ __('Shortlisted') }}
                                        <strong>{{ $proposal?->freelancer?->fullname }}</strong></h6>
                                    <p class="jobFilter-activities-list-para">
                                        {{ $proposal->updated_at?->toFormattedDateString() }}</p>
                                </li>
                            @endif
                        @endforeach
                        @if ($activity_count === 0)
                            <li>
                                <p class="text-[13px] text-[#637381]">{{ __('No activities yet.') }}</p>
                            </li>
                        @endif
                    </ul>
                </div>{{-- #activities-body --}}
            </div>
        </div>

    </div>

    {{-- Interview Modal --}}
    <div id="interview-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 p-4">
        <div class="relative mx-auto flex w-full max-w-lg flex-col overflow-hidden rounded-xl bg-white shadow-xl"
            style="max-height:90vh">
            <div class="flex shrink-0 items-center justify-between border-b border-[#E9EBF0] px-6 py-4">
                <h3 class="text-[16px] font-semibold text-[#242B36]">{{ __('Take Interview') }}</h3>
                <button onclick="closeModal('interview-modal')" class="text-[#637381] hover:text-[#242B36]">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="overflow-y-auto px-6 py-4">
                <div class="mb-4 rounded-lg border border-[#E9EBF0] bg-[#F9FBFC] p-4">
                    <span class="myJob-wrapper-single-id">#{{ str_pad($job_details->id, 6, '0', STR_PAD_LEFT) }}</span>
                    <h4 class="myJob-wrapper-single-title mt-2">{{ $job_details->title }}</h4>
                    <p class="mt-1 text-[13px] text-[#637381]">{{ $job_details->created_at->diffForHumans() }} ·
                        {{ ucfirst($job_details->level) }}</p>
                </div>
                <form action="{{ route('client.message.send') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="freelancer_id" id="freelancer_id">
                    <input type="hidden" name="from_user" id="from_user" value="{{ $job_details->user_id }}">
                    <input type="hidden" name="job_id" id="job_id" value="{{ $job_details->id }}">
                    <input type="hidden" name="type" id="type" value="job">
                    <input type="hidden" name="proposal_id" id="proposal_id_for_check_interview">
                    <div class="single-input mb-4">
                        <label for="interview_message" class="label-title">{{ __('Write a Message') }}</label>
                        <textarea name="interview_message" id="interview_message" rows="3" class="form-message"
                            placeholder="{{ __('E.g. I would like to invite you...') }}"></textarea>
                    </div>
                    <div class="flex items-center justify-end gap-3">
                        <button type="button" onclick="closeModal('interview-modal')"
                            class="btn-profile btn-outline-gray btn-hover-danger">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn-profile btn-bg-1"><i class="fa-regular fa-comments"></i>
                            {{ __('Send Message') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    {{-- Rate & Hours Modal --}}
    <div id="rate-hours-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 p-4">
        <div class="relative mx-auto flex w-full max-w-md flex-col overflow-hidden rounded-xl bg-white shadow-xl"
            style="max-height:90vh">
            <div class="flex shrink-0 items-center justify-between border-b border-[#E9EBF0] px-6 py-4">
                <h3 class="text-[16px] font-semibold text-[#242B36]">{{ __('Hourly Rate & Estimated Hours') }}</h3>
                <button onclick="closeModal('rate-hours-modal')" class="text-[#637381] hover:text-[#242B36]">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <form action="{{ route('client.job.hourly.rate') }}" method="post" class="flex flex-col overflow-hidden">
                @csrf
                <div class="space-y-4 overflow-y-auto px-6 py-4">
                    <input type="hidden" name="proposal_id" id="rate-modal-proposal-id">
                    <div class="single-input">
                        <label class="label-title">{{ __('Hourly Rate') }}</label>
                        <input name="hourly_rate" id="rate-modal-hourly-rate" class="form-control">
                    </div>
                    <div class="single-input">
                        <label class="label-title">{{ __('Estimated Hours') }}</label>
                        <input name="estimated_hour" id="rate-modal-estimated-hours" class="form-control">
                    </div>
                </div>
                <div class="flex shrink-0 justify-end gap-3 border-t border-[#E9EBF0] px-6 py-4">
                    <button type="button" onclick="closeModal('rate-hours-modal')"
                        class="btn-profile btn-outline-gray">{{ __('Cancel') }}</button>
                    <button type="submit" class="btn-profile btn-bg-1">{{ __('Update') }}</button>
                </div>
            </form>
        </div>
    </div>

@endsection

@section('script')
    <x-sweet-alert.sweet-alert2-js />
    @include('frontend.user.client.job.job-details.proposal-js')
    <script>
        function openModal(id) {
            const el = document.getElementById(id);
            if (el) {
                el.classList.remove('hidden');
                el.classList.add('flex');
            }
        }

        function closeModal(id) {
            const el = document.getElementById(id);
            if (el) {
                el.classList.add('hidden');
                el.classList.remove('flex');
            }
        }
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('fixed') && e.target.id) closeModal(e.target.id);
        });

        function openRateModal(proposalId, hourlyRate, estimatedHours) {
            document.getElementById('rate-modal-proposal-id').value   = proposalId;
            document.getElementById('rate-modal-hourly-rate').value   = hourlyRate;
            document.getElementById('rate-modal-estimated-hours').value = estimatedHours;
            openModal('rate-hours-modal');
        }

        $(document).on('click', '.take_freelancer_interview', function() {
            let freelancer_id = $(this).data('freelancer-id');
            let proposal_id = $(this).data('proposal-id');
            $('#freelancer_id').val(freelancer_id);
            $('#proposal_id_for_check_interview').val(proposal_id);
            openModal('interview-modal');
        });

        $(document).on('click', '[data-open-modal]', function() {
            openModal($(this).data('open-modal'));
        });

        function toastr_success_js(msg) {
            toastr.success(msg, "Success!");
            toastr.options = {
                closeButton: true,
                progressBar: true,
                positionClass: "toast-top-right",
                timeOut: "5000"
            };
        }

        function toastr_warning_js(msg) {
            toastr.warning(msg, "Warning!");
            toastr.options = {
                closeButton: true,
                progressBar: true,
                positionClass: "toast-top-right",
                timeOut: "5000"
            };
        }

        // Activities accordion (mobile only)
        (function() {
            var btn = document.getElementById('activities-toggle-btn');
            var body = document.getElementById('activities-body');
            var icon = document.getElementById('activities-chevron');
            if (!btn || !body) return;
            btn.addEventListener('click', function() {
                if (window.innerWidth >= 1024) return;
                var isOpen = body.classList.toggle('open');
                if (icon) icon.style.transform = isOpen ? 'rotate(180deg)' : '';
            });
        })();
    </script>
@endsection