@extends('user.layouts')

@section('title', 'Service Request View')

@section('header')

<style>
    .service-view-page {
        padding-top: 24px;
        padding-bottom: 45px;
    }

    /* =========================================================
       PAGE HEADER
    ========================================================= */

    .service-page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 24px;
    }

    .service-header-left {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
    }

    .service-back-btn {
        width: 42px;
        height: 42px;
        min-width: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: #ffffff;
        color: #475569;
        cursor: pointer;
        transition: all .2s ease;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
    }

    .service-back-btn:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #2563eb;
        transform: translateX(-2px);
    }

    .service-page-title {
        margin: 0;
        color: #172033;
        font-size: 25px;
        line-height: 1.25;
        font-weight: 750;
    }

    .service-page-subtitle {
        margin: 5px 0 0;
        color: #8a94a6;
        font-size: 13px;
    }

    .service-header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .action-btn {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 9px 18px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 650;
        transition: all .2s ease;
    }

    .decline-action-btn {
        border: 1px solid #fecaca;
        background: #fff7f7;
        color: #dc2626;
    }

    .decline-action-btn:hover {
        background: #dc2626;
        border-color: #dc2626;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(220, 38, 38, .16);
    }

    .approve-action-btn {
        border: 1px solid #2563eb;
        background: #2563eb;
        color: #fff;
    }

    .approve-action-btn:hover {
        background: #1d4ed8;
        border-color: #1d4ed8;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(37, 99, 235, .20);
    }


    /* =========================================================
       COMMON CARD
    ========================================================= */

    .request-card {
        background: #fff;
        border: 1px solid #edf0f4;
        border-radius: 18px;
        box-shadow: 0 6px 22px rgba(15, 23, 42, .045);
    }

    .request-card + .request-card {
        margin-top: 22px;
    }

    .section-card {
        height: 100%;
        background: #fff;
        border: 1px solid #edf0f4;
        border-radius: 16px;
        box-shadow: 0 4px 16px rgba(15, 23, 42, .035);
    }

    .section-card-body {
        padding: 22px;
    }

    .section-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 20px;
    }

    .section-title-wrap {
        display: flex;
        align-items: center;
        gap: 11px;
    }

    .section-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: #eff6ff;
        color: #2563eb;
        font-size: 14px;
    }

    .section-title {
        margin: 0;
        color: #1e293b;
        font-size: 15px;
        font-weight: 700;
    }

    .section-subtitle {
        margin-top: 3px;
        color: #94a3b8;
        font-size: 11px;
    }


    /* =========================================================
       BUSINESS OVERVIEW
    ========================================================= */

    .business-overview {
        overflow: hidden;
        margin-bottom: 22px;
    }

    .overview-cover {
        position: relative;
        height: 180px;
        overflow: hidden;
        background:
            linear-gradient(
                135deg,
                #eff6ff 0%,
                #f5f3ff 50%,
                #fff1f2 100%
            );
    }

    .overview-cover-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .overview-cover::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(
                180deg,
                rgba(15, 23, 42, .04),
                rgba(15, 23, 42, .28)
            );
        pointer-events: none;
    }

    .cover-view-btn {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 12px;
        border: 1px solid rgba(255,255,255,.65);
        border-radius: 9px;
        background: rgba(255,255,255,.92);
        color: #334155;
        font-size: 12px;
        font-weight: 650;
        backdrop-filter: blur(8px);
    }

    .cover-view-btn:hover {
        background: #fff;
        color: #2563eb;
    }

    .overview-content {
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 20px;
        padding: 0 25px 24px;
    }

    .overview-main {
        display: flex;
        align-items: flex-end;
        gap: 18px;
        min-width: 0;
    }

    .profile-image-wrap {
        position: relative;
        width: 108px;
        height: 108px;
        min-width: 108px;
        margin-top: -50px;
        z-index: 3;
    }

    .business-profile-image {
        width: 108px;
        height: 108px;
        object-fit: cover;
        border: 5px solid #fff;
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 8px 25px rgba(15,23,42,.14);
    }

    .profile-view-small {
        position: absolute;
        right: -4px;
        bottom: -4px;
        width: 31px;
        height: 31px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 3px solid #fff;
        border-radius: 50%;
        background: #2563eb;
        color: #fff;
        font-size: 11px;
        cursor: pointer;
    }

    .business-summary {
        min-width: 0;
        padding-bottom: 3px;
    }

    .business-name {
        margin: 0;
        color: #172033;
        font-size: 23px;
        line-height: 1.3;
        font-weight: 750;
        word-break: break-word;
    }

    .business-category {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 7px;
        padding: 5px 9px;
        border-radius: 20px;
        background: #eff6ff;
        color: #2563eb;
        font-size: 11px;
        font-weight: 650;
    }

    .overview-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 10px;
        color: #64748b;
        font-size: 12px;
    }

    .overview-meta-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .overview-meta-item i {
        color: #94a3b8;
    }

    .request-status {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 12px;
        border-radius: 20px;
        background: #fff7ed;
        color: #c2410c;
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
    }

    .request-status::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
    }


    /* =========================================================
       DETAIL ITEMS
    ========================================================= */

    .detail-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .detail-item {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 14px 0;
        border-bottom: 1px solid #f0f2f5;
    }

    .detail-item:first-child {
        padding-top: 0;
    }

    .detail-item:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .detail-item-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: #f8fafc;
        color: #64748b;
        font-size: 13px;
    }

    .detail-content {
        min-width: 0;
    }

    .detail-label {
        margin-bottom: 3px;
        color: #94a3b8;
        font-size: 10px;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: .35px;
        text-transform: uppercase;
    }

    .detail-value {
        color: #334155;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 600;
        word-break: break-word;
    }


    /* =========================================================
       DESCRIPTION
    ========================================================= */

    .description-box {
        position: relative;
        padding: 18px 20px;
        border: 1px solid #edf0f4;
        border-radius: 12px;
        background: #f8fafc;
    }

    .description-box::before {
        content: "";
        position: absolute;
        top: 15px;
        bottom: 15px;
        left: 0;
        width: 3px;
        border-radius: 0 5px 5px 0;
        background: #2563eb;
    }

    .description-text {
        margin: 0;
        color: #475569;
        font-size: 13px;
        line-height: 1.8;
        white-space: pre-line;
        word-break: break-word;
    }


    /* =========================================================
       SERVICES
    ========================================================= */

    .service-items {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
    }

    .service-item {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 11px;
        border: 1px solid #dcfce7;
        border-radius: 9px;
        background: #f0fdf4;
        color: #166534;
        font-size: 12px;
        font-weight: 600;
    }

    .service-check {
        width: 19px;
        height: 19px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #dcfce7;
        color: #16a34a;
        font-size: 9px;
    }

    .empty-state {
        padding: 20px;
        border: 1px dashed #cbd5e1;
        border-radius: 12px;
        color: #94a3b8;
        text-align: center;
        font-size: 12px;
    }


    /* =========================================================
       ATTACHMENTS
    ========================================================= */

    .attachment-card {
        height: 100%;
        overflow: hidden;
        border: 1px solid #edf0f4;
        border-radius: 14px;
        background: #fff;
        transition: all .2s ease;
    }

    .attachment-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(15,23,42,.07);
    }

    .attachment-image-wrap {
        position: relative;
        height: 230px;
        overflow: hidden;
        background: #f8fafc;
    }

    .attachment-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .3s ease;
    }

    .attachment-card:hover .attachment-image {
        transform: scale(1.025);
    }

    .attachment-image-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(15,23,42,.24);
        opacity: 0;
        transition: .2s;
    }

    .attachment-card:hover .attachment-image-overlay {
        opacity: 1;
    }

    .image-overlay-btn {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 50%;
        background: #fff;
        color: #2563eb;
        font-size: 14px;
        box-shadow: 0 6px 18px rgba(15,23,42,.18);
    }

    .attachment-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 13px 14px;
    }

    .attachment-info {
        min-width: 0;
    }

    .attachment-label {
        color: #334155;
        font-size: 12px;
        font-weight: 700;
    }

    .attachment-file {
        max-width: 190px;
        margin-top: 2px;
        overflow: hidden;
        color: #94a3b8;
        font-size: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .attachment-actions {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .attachment-action-btn {
        width: 33px;
        height: 33px;
        min-width: 33px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #fff;
        color: #64748b;
        font-size: 11px;
        text-decoration: none;
        transition: .2s;
    }

    .attachment-action-btn:hover {
        border-color: #bfdbfe;
        background: #eff6ff;
        color: #2563eb;
    }

    .attachment-download:hover {
        border-color: #bbf7d0;
        background: #f0fdf4;
        color: #16a34a;
    }


    /* =========================================================
       GALLERY
    ========================================================= */

    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }

    .gallery-item {
        position: relative;
        height: 190px;
        overflow: hidden;
        border: 1px solid #edf0f4;
        border-radius: 13px;
        background: #f8fafc;
    }

    .gallery-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .3s ease;
    }

    .gallery-item:hover .gallery-image {
        transform: scale(1.04);
    }

    .gallery-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 10px;
        padding: 12px;
        background:
            linear-gradient(
                180deg,
                transparent 35%,
                rgba(15,23,42,.78)
            );
        opacity: 0;
        transition: .2s;
    }

    .gallery-item:hover .gallery-overlay {
        opacity: 1;
    }

    .gallery-file-name {
        min-width: 0;
        overflow: hidden;
        color: #fff;
        font-size: 10px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .gallery-actions {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .gallery-action {
        width: 31px;
        height: 31px;
        min-width: 31px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 8px;
        background: rgba(255,255,255,.95);
        color: #334155;
        font-size: 10px;
        text-decoration: none;
    }

    .gallery-action:hover {
        background: #fff;
        color: #2563eb;
    }


    /* =========================================================
       IMAGE MODAL
    ========================================================= */

    .image-preview-modal .modal-content {
        overflow: hidden;
        border: 0;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 20px 60px rgba(15,23,42,.25);
    }

    .image-preview-modal .modal-header {
        padding: 15px 18px;
        border-bottom: 1px solid #edf0f4;
    }

    .image-preview-title {
        margin: 0;
        color: #334155;
        font-size: 14px;
        font-weight: 700;
    }

    .preview-image-holder {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 300px;
        padding: 18px;
        background: #f8fafc;
    }

    #modalImage {
        display: block;
        max-width: 100%;
        max-height: 75vh;
        object-fit: contain;
        border-radius: 10px;
    }


    /* =========================================================
       ACTION MODALS
    ========================================================= */

    .action-modal .modal-content {
        overflow: hidden;
        border: 0;
        border-radius: 18px;
        box-shadow: 0 20px 60px rgba(15,23,42,.20);
    }

    .action-modal-body {
        padding: 30px;
        text-align: center;
    }

    .action-modal-icon {
        width: 65px;
        height: 65px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 18px;
        border-radius: 50%;
        font-size: 25px;
    }

    .approve-modal-icon {
        background: #dcfce7;
        color: #16a34a;
    }

    .decline-modal-icon {
        background: #fee2e2;
        color: #dc2626;
    }

    .action-modal-title {
        margin-bottom: 7px;
        color: #1e293b;
        font-size: 19px;
        font-weight: 750;
    }

    .action-modal-description {
        max-width: 380px;
        margin: 0 auto 20px;
        color: #64748b;
        font-size: 13px;
        line-height: 1.6;
    }

    .remark-box {
        height: 46px;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: #f8fafc !important;
        color: #475569;
        font-size: 13px;
    }

    .modal-actions {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 22px;
    }

    .modal-cancel-btn,
    .modal-confirm-btn {
        min-width: 125px;
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border-radius: 9px;
        font-size: 13px;
        font-weight: 650;
    }


    /* =========================================================
       DARK MODE
    ========================================================= */

    body.dark-mode .request-card,
    body.dark-mode .section-card,
    body.dark-mode .attachment-card,
    body.dark-mode .service-back-btn,
    body.dark-mode .attachment-action-btn {
        background: #172033;
        border-color: #273449;
    }

    body.dark-mode .service-page-title,
    body.dark-mode .business-name,
    body.dark-mode .section-title,
    body.dark-mode .detail-value,
    body.dark-mode .attachment-label {
        color: #f1f5f9;
    }

    body.dark-mode .overview-cover {
        background: #111827;
    }

    body.dark-mode .business-profile-image {
        border-color: #172033;
        background: #172033;
    }

    body.dark-mode .profile-view-small {
        border-color: #172033;
    }

    body.dark-mode .detail-item {
        border-color: #273449;
    }

    body.dark-mode .detail-item-icon,
    body.dark-mode .description-box {
        background: #111827;
        border-color: #273449;
    }

    body.dark-mode .description-text {
        color: #cbd5e1;
    }

    body.dark-mode .image-preview-modal .modal-content,
    body.dark-mode .action-modal .modal-content {
        background: #172033;
        color: #e2e8f0;
    }

    body.dark-mode .image-preview-modal .modal-header {
        border-color: #273449;
    }

    body.dark-mode .preview-image-holder,
    body.dark-mode .remark-box {
        background: #111827 !important;
        border-color: #273449;
        color: #e2e8f0;
    }

    body.dark-mode .image-preview-title,
    body.dark-mode .action-modal-title {
        color: #f1f5f9;
    }


    /* =========================================================
       RESPONSIVE
    ========================================================= */

    @media (max-width: 1199px) {
        .gallery-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (max-width: 991px) {
        .gallery-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .overview-content {
            align-items: flex-start;
            flex-direction: column;
        }

        .request-status {
            margin-left: 126px;
        }
    }

    @media (max-width: 767px) {
        .service-page-header {
            align-items: flex-start;
            flex-direction: column;
        }

        .service-header-actions {
            width: 100%;
        }

        .action-btn {
            flex: 1;
        }

        .overview-cover {
            height: 140px;
        }

        .overview-content {
            padding: 0 18px 20px;
        }

        .overview-main {
            align-items: flex-start;
            flex-direction: column;
            gap: 12px;
        }

        .profile-image-wrap {
            width: 92px;
            height: 92px;
            min-width: 92px;
            margin-top: -42px;
        }

        .business-profile-image {
            width: 92px;
            height: 92px;
        }

        .request-status {
            margin-left: 0;
        }

        .gallery-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .gallery-item {
            height: 160px;
        }

        .gallery-overlay {
            opacity: 1;
        }

        .attachment-image-overlay {
            display: none;
        }
    }

    @media (max-width: 480px) {
        .gallery-grid {
            grid-template-columns: 1fr;
        }

        .gallery-item {
            height: 210px;
        }

        .business-name {
            font-size: 20px;
        }

        .section-card-body {
            padding: 17px;
        }

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

        .modal-cancel-btn,
        .modal-confirm-btn {
            width: 100%;
        }
    }
</style>

@endsection


@section('content')

@php
    /*
    |--------------------------------------------------------------------------
    | SERVICES
    |--------------------------------------------------------------------------
    */

    $services = $view_service->service;

    if (is_string($services)) {
        $decodedServices = json_decode($services, true);
        $services = is_array($decodedServices)
            ? $decodedServices
            : [$services];
    } elseif (!is_array($services)) {
        $services = !empty($services)
            ? [$services]
            : [];
    }


    /*
    |--------------------------------------------------------------------------
    | GALLERY
    |--------------------------------------------------------------------------
    */

    $galleryImages = $view_service->gallery;

    if (is_string($galleryImages)) {
        $decodedGallery = json_decode($galleryImages, true);

        $galleryImages = is_array($decodedGallery)
            ? $decodedGallery
            : (
                !empty($galleryImages)
                    ? [$galleryImages]
                    : []
            );
    } elseif (!is_array($galleryImages)) {
        $galleryImages = !empty($galleryImages)
            ? [$galleryImages]
            : [];
    }


    /*
    |--------------------------------------------------------------------------
    | SAFE DISPLAY VALUES
    |--------------------------------------------------------------------------
    */

    $profileImage = $view_service->business_profile ?? null;

    $coverImage = $view_service->business_cover_photo ?? null;

    $businessName = $view_service->business_name ?? 'N/A';

    $categoryName = $view_service->category_name ?? 'N/A';

    $ownerName = $view_service->name ?? 'N/A';

    $phoneNumber = $view_service->phone_number ?? 'N/A';

    $whatsappNumber = $view_service->whatsapp_number ?? 'N/A';

    $district = $view_service->district ?? 'N/A';

    $village = $view_service->village ?? 'N/A';

    $place = $view_service->place ?? 'N/A';

    $description = $view_service->description ?? 'No description available.';
@endphp


<div class="container-fluid page-wrapper service-view-page">


    {{-- ======================================================
         PAGE HEADER
    ======================================================= --}}

    <div class="service-page-header">

        <div class="service-header-left">

            <button
                type="button"
                class="service-back-btn"
                onclick="redirectToPreviousPage()"
                title="Go Back">

                <i class="fa-solid fa-arrow-left"></i>

            </button>


            <div>

                <h3 class="service-page-title">
                    Business Request Details
                </h3>

                <p class="service-page-subtitle">
                    Review complete business information before approval
                </p>

            </div>

        </div>


        <div class="service-header-actions">

            <button
                type="button"
                data-bs-toggle="modal"
                data-bs-target="#DeclineModal"
                class="btn action-btn decline-action-btn decline-btn"
                data-user-id="{{ $view_service->id }}"
                onclick="setDeclineId(this)">

                <i class="fa-regular fa-circle-xmark"></i>

                Decline

            </button>


            <button
                type="button"
                data-bs-toggle="modal"
                data-bs-target="#ApproveModal"
                class="btn action-btn approve-action-btn approve-btn"
                data-user-id="{{ $view_service->id }}"
                onclick="setApproveId(this)">

                <i class="fa-regular fa-circle-check"></i>

                Approve

            </button>

        </div>

    </div>



    {{-- ======================================================
         BUSINESS OVERVIEW
    ======================================================= --}}

    <div class="request-card business-overview">


        {{-- COVER --}}

        <div class="overview-cover">

            @if(!empty($coverImage))

                <img
                    src="{{ asset($coverImage) }}"
                    alt="{{ $businessName }}"
                    class="overview-cover-image">

                <button
                    type="button"
                    class="btn cover-view-btn view-btn"
                    data-bs-toggle="modal"
                    data-bs-target="#ViewProfileModal"
                    data-img-src="{{ asset($coverImage) }}">

                    <i class="fa-regular fa-eye"></i>

                    View Cover

                </button>

            @endif

        </div>


        {{-- OVERVIEW CONTENT --}}

        <div class="overview-content">

            <div class="overview-main">


                {{-- PROFILE --}}

                <div class="profile-image-wrap">

                    @if(!empty($profileImage))

                        <img
                            src="{{ asset($profileImage) }}"
                            alt="{{ $businessName }}"
                            class="business-profile-image">

                        <button
                            type="button"
                            class="profile-view-small view-btn"
                            data-bs-toggle="modal"
                            data-bs-target="#ViewProfileModal"
                            data-img-src="{{ asset($profileImage) }}"
                            title="View Profile Image">

                            <i class="fa-regular fa-eye"></i>

                        </button>

                    @else

                        <div
                            class="business-profile-image d-flex align-items-center justify-content-center">

                            <i class="fa-solid fa-building fs-3 text-secondary"></i>

                        </div>

                    @endif

                </div>


                {{-- SUMMARY --}}

                <div class="business-summary">

                    <h2 class="business-name">

                        {{ $businessName }}

                    </h2>


                    <div class="business-category">

                        <i class="fa-solid fa-layer-group"></i>

                        {{ $categoryName }}

                    </div>


                    <div class="overview-meta">

                        <span class="overview-meta-item">

                            <i class="fa-regular fa-user"></i>

                            {{ $ownerName }}

                        </span>


                        <span class="overview-meta-item">

                            <i class="fa-solid fa-phone"></i>

                            {{ $phoneNumber }}

                        </span>


                        <span class="overview-meta-item">

                            <i class="fa-solid fa-location-dot"></i>

                            {{ $place }}

                        </span>

                    </div>

                </div>

            </div>


            <div>

                <span class="request-status">

                    Pending Review

                </span>

            </div>

        </div>

    </div>



    {{-- ======================================================
         CONTACT + LOCATION
    ======================================================= --}}

    <div class="row g-4">


        {{-- CONTACT INFORMATION --}}

        <div class="col-lg-6">

            <div class="section-card">

                <div class="section-card-body">


                    <div class="section-heading">

                        <div class="section-title-wrap">

                            <div class="section-icon">

                                <i class="fa-regular fa-address-card"></i>

                            </div>

                            <div>

                                <h5 class="section-title">
                                    Contact Information
                                </h5>

                                <div class="section-subtitle">
                                    Business owner contact details
                                </div>

                            </div>

                        </div>

                    </div>


                    <div class="detail-list">


                        {{-- NAME --}}

                        <div class="detail-item">

                            <div class="detail-item-icon">

                                <i class="fa-regular fa-user"></i>

                            </div>

                            <div class="detail-content">

                                <div class="detail-label">
                                    Name
                                </div>

                                <div class="detail-value">

                                    {{ $ownerName }}

                                </div>

                            </div>

                        </div>


                        {{-- BUSINESS --}}

                        <div class="detail-item">

                            <div class="detail-item-icon">

                                <i class="fa-solid fa-building"></i>

                            </div>

                            <div class="detail-content">

                                <div class="detail-label">
                                    Business Name
                                </div>

                                <div class="detail-value">

                                    {{ $businessName }}

                                </div>

                            </div>

                        </div>


                        {{-- PHONE --}}

                        <div class="detail-item">

                            <div class="detail-item-icon">

                                <i class="fa-solid fa-phone"></i>

                            </div>

                            <div class="detail-content">

                                <div class="detail-label">
                                    Phone Number
                                </div>

                                <div class="detail-value">

                                    {{ $phoneNumber }}

                                </div>

                            </div>

                        </div>


                        {{-- WHATSAPP --}}

                        <div class="detail-item">

                            <div class="detail-item-icon">

                                <i class="fa-brands fa-whatsapp"></i>

                            </div>

                            <div class="detail-content">

                                <div class="detail-label">
                                    WhatsApp Number
                                </div>

                                <div class="detail-value">

                                    {{ $whatsappNumber }}

                                </div>

                            </div>

                        </div>


                        {{-- CATEGORY --}}

                        <div class="detail-item">

                            <div class="detail-item-icon">

                                <i class="fa-solid fa-layer-group"></i>

                            </div>

                            <div class="detail-content">

                                <div class="detail-label">
                                    Category
                                </div>

                                <div class="detail-value">

                                    {{ $categoryName }}

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>



        {{-- LOCATION --}}

        <div class="col-lg-6">

            <div class="section-card">

                <div class="section-card-body">


                    <div class="section-heading">

                        <div class="section-title-wrap">

                            <div class="section-icon">

                                <i class="fa-solid fa-location-dot"></i>

                            </div>

                            <div>

                                <h5 class="section-title">
                                    Business Location
                                </h5>

                                <div class="section-subtitle">
                                    Registered business location
                                </div>

                            </div>

                        </div>

                    </div>


                    <div class="detail-list">


                        {{-- DISTRICT --}}

                        <div class="detail-item">

                            <div class="detail-item-icon">

                                <i class="fa-regular fa-map"></i>

                            </div>

                            <div class="detail-content">

                                <div class="detail-label">
                                    District
                                </div>

                                <div class="detail-value">

                                    {{ $district }}

                                </div>

                            </div>

                        </div>


                        {{-- VILLAGE --}}

                        <div class="detail-item">

                            <div class="detail-item-icon">

                                <i class="fa-solid fa-map-location-dot"></i>

                            </div>

                            <div class="detail-content">

                                <div class="detail-label">
                                    Village
                                </div>

                                <div class="detail-value">

                                    {{ $village }}

                                </div>

                            </div>

                        </div>


                        {{-- PLACE --}}

                        <div class="detail-item">

                            <div class="detail-item-icon">

                                <i class="fa-solid fa-location-crosshairs"></i>

                            </div>

                            <div class="detail-content">

                                <div class="detail-label">
                                    Place
                                </div>

                                <div class="detail-value">

                                    {{ $place }}

                                </div>

                            </div>

                        </div>


                        {{-- FULL LOCATION --}}

                        <div class="detail-item">

                            <div class="detail-item-icon">

                                <i class="fa-solid fa-route"></i>

                            </div>

                            <div class="detail-content">

                                <div class="detail-label">
                                    Location
                                </div>

                                <div class="detail-value">

                                    {{ $place }}

                                    @if(
                                        !empty($village) &&
                                        $village !== 'N/A'
                                    )
                                        , {{ $village }}
                                    @endif

                                    @if(
                                        !empty($district) &&
                                        $district !== 'N/A'
                                    )
                                        , {{ $district }}
                                    @endif

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>



    {{-- ======================================================
         DESCRIPTION
    ======================================================= --}}

    <div class="request-card mt-4">

        <div class="section-card-body">

            <div class="section-heading">

                <div class="section-title-wrap">

                    <div class="section-icon">

                        <i class="fa-regular fa-file-lines"></i>

                    </div>

                    <div>

                        <h5 class="section-title">
                            About Business
                        </h5>

                        <div class="section-subtitle">
                            Business description
                        </div>

                    </div>

                </div>

            </div>


            <div class="description-box">

                <p class="description-text">{{ $description }}</p>

            </div>

        </div>

    </div>



    {{-- ======================================================
         SERVICES
    ======================================================= --}}

    <div class="request-card mt-4">

        <div class="section-card-body">

            <div class="section-heading">

                <div class="section-title-wrap">

                    <div class="section-icon">

                        <i class="fa-solid fa-list-check"></i>

                    </div>

                    <div>

                        <h5 class="section-title">
                            Services
                        </h5>

                        <div class="section-subtitle">
                            Services provided by this business
                        </div>

                    </div>

                </div>


                @if(count($services) > 0)

                    <span class="badge bg-primary rounded-pill">

                        {{ count($services) }}

                    </span>

                @endif

            </div>


            @if(count($services) > 0)

                <div class="service-items">

                    @foreach($services as $service)

                        @if(
                            !is_array($service) &&
                            !is_object($service) &&
                            trim((string) $service) !== ''
                        )

                            <div class="service-item">

                                <span class="service-check">

                                    <i class="fa-solid fa-check"></i>

                                </span>

                                {{ $service }}

                            </div>

                        @endif

                    @endforeach

                </div>

            @else

                <div class="empty-state">

                    <i class="fa-solid fa-list-check mb-2 d-block fs-4"></i>

                    No services available

                </div>

            @endif

        </div>

    </div>



    {{-- ======================================================
         BUSINESS ATTACHMENTS
    ======================================================= --}}

    <div class="request-card mt-4">

        <div class="section-card-body">


            <div class="section-heading">

                <div class="section-title-wrap">

                    <div class="section-icon">

                        <i class="fa-regular fa-images"></i>

                    </div>

                    <div>

                        <h5 class="section-title">
                            Business Attachments
                        </h5>

                        <div class="section-subtitle">
                            Profile and cover images
                        </div>

                    </div>

                </div>

            </div>


            <div class="row g-4">


                {{-- PROFILE IMAGE --}}

                <div class="col-lg-6">

                    @if(!empty($profileImage))

                        <div class="attachment-card">


                            <div class="attachment-image-wrap">

                                <img
                                    src="{{ asset($profileImage) }}"
                                    alt="Business Profile"
                                    class="attachment-image">


                                <div class="attachment-image-overlay">

                                    <button
                                        type="button"
                                        class="image-overlay-btn view-btn"
                                        data-bs-toggle="modal"
                                        data-bs-target="#ViewProfileModal"
                                        data-img-src="{{ asset($profileImage) }}">

                                        <i class="fa-regular fa-eye"></i>

                                    </button>

                                </div>

                            </div>


                            <div class="attachment-footer">

                                <div class="attachment-info">

                                    <div class="attachment-label">
                                        Business Profile
                                    </div>

                                    <div
                                        class="attachment-file"
                                        title="{{ basename($profileImage) }}">

                                        {{ basename($profileImage) }}

                                    </div>

                                </div>


                                <div class="attachment-actions">

                                    <button
                                        type="button"
                                        class="attachment-action-btn view-btn"
                                        data-bs-toggle="modal"
                                        data-bs-target="#ViewProfileModal"
                                        data-img-src="{{ asset($profileImage) }}"
                                        title="View">

                                        <i class="fa-regular fa-eye"></i>

                                    </button>


                                    <a
                                        href="{{ asset($profileImage) }}"
                                        download
                                        class="attachment-action-btn attachment-download"
                                        title="Download">

                                        <i class="fa-solid fa-download"></i>

                                    </a>

                                </div>

                            </div>

                        </div>

                    @else

                        <div class="empty-state h-100">

                            <i class="fa-regular fa-image fs-3 d-block mb-2"></i>

                            Business profile image not available

                        </div>

                    @endif

                </div>



                {{-- COVER IMAGE --}}

                <div class="col-lg-6">

                    @if(!empty($coverImage))

                        <div class="attachment-card">


                            <div class="attachment-image-wrap">

                                <img
                                    src="{{ asset($coverImage) }}"
                                    alt="Business Cover"
                                    class="attachment-image">


                                <div class="attachment-image-overlay">

                                    <button
                                        type="button"
                                        class="image-overlay-btn view-btn"
                                        data-bs-toggle="modal"
                                        data-bs-target="#ViewProfileModal"
                                        data-img-src="{{ asset($coverImage) }}">

                                        <i class="fa-regular fa-eye"></i>

                                    </button>

                                </div>

                            </div>


                            <div class="attachment-footer">

                                <div class="attachment-info">

                                    <div class="attachment-label">
                                        Business Cover Photo
                                    </div>

                                    <div
                                        class="attachment-file"
                                        title="{{ basename($coverImage) }}">

                                        {{ basename($coverImage) }}

                                    </div>

                                </div>


                                <div class="attachment-actions">

                                    <button
                                        type="button"
                                        class="attachment-action-btn view-btn"
                                        data-bs-toggle="modal"
                                        data-bs-target="#ViewProfileModal"
                                        data-img-src="{{ asset($coverImage) }}"
                                        title="View">

                                        <i class="fa-regular fa-eye"></i>

                                    </button>


                                    <a
                                        href="{{ asset($coverImage) }}"
                                        download
                                        class="attachment-action-btn attachment-download"
                                        title="Download">

                                        <i class="fa-solid fa-download"></i>

                                    </a>

                                </div>

                            </div>

                        </div>

                    @else

                        <div class="empty-state h-100">

                            <i class="fa-regular fa-image fs-3 d-block mb-2"></i>

                            Business cover image not available

                        </div>

                    @endif

                </div>

            </div>

        </div>

    </div>



    {{-- ======================================================
         GALLERY
    ======================================================= --}}

    <div class="request-card mt-4">

        <div class="section-card-body">


            <div class="section-heading">

                <div class="section-title-wrap">

                    <div class="section-icon">

                        <i class="fa-solid fa-images"></i>

                    </div>

                    <div>

                        <h5 class="section-title">
                            Gallery
                        </h5>

                        <div class="section-subtitle">
                            Business gallery images
                        </div>

                    </div>

                </div>


                @if(count($galleryImages) > 0)

                    <span class="badge bg-primary rounded-pill">

                        {{ count($galleryImages) }}

                    </span>

                @endif

            </div>



            @if(count($galleryImages) > 0)

                <div class="gallery-grid">

                    @foreach($galleryImages as $image)

                        @if(!empty($image))

                            <div class="gallery-item">

                                <img
                                    src="{{ asset($image) }}"
                                    alt="Gallery Image"
                                    class="gallery-image">


                                <div class="gallery-overlay">

                                    <div
                                        class="gallery-file-name"
                                        title="{{ basename($image) }}">

                                        {{ basename($image) }}

                                    </div>


                                    <div class="gallery-actions">

                                        <button
                                            type="button"
                                            class="gallery-action view-btn"
                                            data-bs-toggle="modal"
                                            data-bs-target="#ViewProfileModal"
                                            data-img-src="{{ asset($image) }}"
                                            title="View">

                                            <i class="fa-regular fa-eye"></i>

                                        </button>


                                        <a
                                            href="{{ asset($image) }}"
                                            download
                                            class="gallery-action"
                                            title="Download">

                                            <i class="fa-solid fa-download"></i>

                                        </a>

                                    </div>

                                </div>

                            </div>

                        @endif

                    @endforeach

                </div>

            @else

                <div class="empty-state">

                    <i class="fa-regular fa-images fs-3 d-block mb-2"></i>

                    No gallery images available

                </div>

            @endif

        </div>

    </div>



    {{-- ======================================================
         BOTTOM ACTION
    ======================================================= --}}

    <!-- <div
        class="d-flex justify-content-end flex-wrap gap-2 mt-4">

        <button
            type="button"
            data-bs-toggle="modal"
            data-bs-target="#DeclineModal"
            class="btn action-btn decline-action-btn"
            data-user-id="{{ $view_service->id }}"
            onclick="setDeclineId(this)">

            <i class="fa-regular fa-circle-xmark"></i>

            Decline Request

        </button>


        <button
            type="button"
            data-bs-toggle="modal"
            data-bs-target="#ApproveModal"
            class="btn action-btn approve-action-btn"
            data-user-id="{{ $view_service->id }}"
            onclick="setApproveId(this)">

            <i class="fa-regular fa-circle-check"></i>

            Approve Request

        </button>

    </div> -->

</div>



{{-- ==========================================================
     IMAGE VIEW MODAL
========================================================== --}}

<div
    class="modal fade image-preview-modal"
    id="ViewProfileModal"
    tabindex="-1"
    aria-hidden="true">

    <div class="modal-dialog modal-xl modal-dialog-centered">

        <div class="modal-content">


            <div class="modal-header">

                <h5 class="image-preview-title">

                    <i class="fa-regular fa-image me-2"></i>

                    Image Preview

                </h5>

                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close">
                </button>

            </div>


            <div class="modal-body p-0">

                <div class="preview-image-holder">

                    <img
                        id="modalImage"
                        src=""
                        alt="Image Preview">

                </div>

            </div>

        </div>

    </div>

</div>



{{-- ==========================================================
     APPROVE MODAL
========================================================== --}}

<div
    class="modal fade action-modal"
    id="ApproveModal"
    tabindex="-1"
    aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            <div class="action-modal-body">


                <div class="action-modal-icon approve-modal-icon">

                    <i class="fa-solid fa-check"></i>

                </div>


                <h5 class="action-modal-title">

                    Approve Business Request?

                </h5>


                <p class="action-modal-description">

                    Please confirm that you have reviewed the
                    business information and want to approve
                    this request.

                </p>


                <form
                    action="{{ route('approve_business') }}"
                    method="POST"
                    class="submit-form">

                    @csrf


                    <input
                        type="hidden"
                        id="approve_id"
                        name="approve_id">


                    <div class="text-start">

                        <label
                            for="approveRemark"
                            class="form-label fw-semibold">

                            Remark

                        </label>


                        <input
                            type="text"
                            id="approveRemark"
                            name="remark"
                            class="form-control remark-box"
                            value="Your service request has been accepted"
                            readonly>

                    </div>


                    <div class="modal-actions">

                        <button
                            type="button"
                            class="btn btn-light modal-cancel-btn"
                            data-bs-dismiss="modal">

                            Cancel

                        </button>


                        <button
                            type="submit"
                            class="btn btn-success modal-confirm-btn submit-btn">

                            <i class="fa-regular fa-circle-check"></i>

                            Yes, Approve

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>

</div>



{{-- ==========================================================
     DECLINE MODAL
========================================================== --}}

<div
    class="modal fade action-modal"
    id="DeclineModal"
    tabindex="-1"
    aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            <div class="action-modal-body">


                <div class="action-modal-icon decline-modal-icon">

                    <i class="fa-solid fa-xmark"></i>

                </div>


                <h5 class="action-modal-title">

                    Decline Business Request?

                </h5>


                <p class="action-modal-description">

                    Please confirm that you want to decline
                    this business request.

                </p>


                <form
                    action="{{ route('decline_business') }}"
                    method="POST"
                    enctype="multipart/form-data"
                    class="submit-form">

                    @csrf


                    <input
                        type="hidden"
                        id="decline_id"
                        name="decline_id">


                    <div class="text-start">

                        <label
                            for="declineRemark"
                            class="form-label fw-semibold">

                            Remark

                        </label>


                        <input
                            type="text"
                            id="declineRemark"
                            name="remark"
                            class="form-control remark-box"
                            value="Your service request has been rejected"
                            readonly>

                    </div>


                    <div class="modal-actions">

                        <button
                            type="button"
                            class="btn btn-light modal-cancel-btn"
                            data-bs-dismiss="modal">

                            Cancel

                        </button>


                        <button
                            type="submit"
                            class="btn btn-danger modal-confirm-btn submit-btn">

                            <i class="fa-regular fa-circle-xmark"></i>

                            Yes, Decline

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>

</div>


<script>
    /*
    |--------------------------------------------------------------------------
    | BACK
    |--------------------------------------------------------------------------
    */

    function redirectToPreviousPage() {
        window.history.back();
    }


    /*
    |--------------------------------------------------------------------------
    | SET APPROVE ID
    |--------------------------------------------------------------------------
    */

    function setApproveId(button) {

        const approveId =
            button.getAttribute('data-user-id');

        document.getElementById('approve_id').value =
            approveId;
    }


    /*
    |--------------------------------------------------------------------------
    | SET DECLINE ID
    |--------------------------------------------------------------------------
    */

    function setDeclineId(button) {

        const declineId =
            button.getAttribute('data-user-id');

        document.getElementById('decline_id').value =
            declineId;
    }


    document.addEventListener(
        'DOMContentLoaded',
        function () {


            /*
            |--------------------------------------------------------------------------
            | IMAGE PREVIEW
            |--------------------------------------------------------------------------
            */

            document
                .querySelectorAll('.view-btn')
                .forEach(function (button) {

                    button.addEventListener(
                        'click',
                        function () {

                            const imageSource =
                                this.getAttribute(
                                    'data-img-src'
                                );

                            if (!imageSource) {
                                return;
                            }

                            const modalImage =
                                document.getElementById(
                                    'modalImage'
                                );

                            modalImage.setAttribute(
                                'src',
                                imageSource
                            );
                        }
                    );

                });


            /*
            |--------------------------------------------------------------------------
            | CLEAR IMAGE AFTER MODAL CLOSE
            |--------------------------------------------------------------------------
            */

            const imageModal =
                document.getElementById(
                    'ViewProfileModal'
                );

            if (imageModal) {

                imageModal.addEventListener(
                    'hidden.bs.modal',
                    function () {

                        const modalImage =
                            document.getElementById(
                                'modalImage'
                            );

                        if (modalImage) {
                            modalImage.setAttribute(
                                'src',
                                ''
                            );
                        }
                    }
                );
            }


            /*
            |--------------------------------------------------------------------------
            | PREVENT DOUBLE SUBMIT
            |--------------------------------------------------------------------------
            */

            document
                .querySelectorAll('.submit-form')
                .forEach(function (form) {

                    form.addEventListener(
                        'submit',
                        function () {

                            const button =
                                form.querySelector(
                                    '.submit-btn'
                                );

                            if (!button) {
                                return;
                            }

                            button.disabled = true;

                            button.innerHTML = `
                                <span
                                    class="spinner-border spinner-border-sm"
                                    role="status"
                                    aria-hidden="true">
                                </span>

                                Processing...
                            `;
                        }
                    );

                });

        }
    );
</script>

@endsection


@section('footer')
@endsection