@extends('user.layouts')

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

@section('header')

<style>
    /* =========================================================
       PAGE
    ========================================================= */

    .service-view-page {
        padding-top: 22px;
        padding-bottom: 45px;
    }

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

    .service-topbar-left {
        display: flex;
        align-items: center;
        gap: 13px;
    }

    .service-back-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #e5eaf0;
        border-radius: 11px;
        background: #fff;
        color: #475569;
        cursor: pointer;
        transition: all .2s ease;
    }

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

    .page-main-title {
        margin: 0;
        color: #1e293b;
        font-size: 24px;
        font-weight: 700;
    }

    .page-main-subtitle {
        margin: 4px 0 0;
        color: #94a3b8;
        font-size: 11px;
    }

    .top-actions {
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .approve-action-btn,
    .decline-action-btn {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 8px 17px;
        border-radius: 9px;
        font-size: 11px;
        font-weight: 700;
        transition: all .2s ease;
    }

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

    .approve-action-btn:hover {
        border-color: #1d4ed8;
        background: #1d4ed8;
        color: #fff;
    }

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

    .decline-action-btn:hover {
        border-color: #dc2626;
        background: #dc2626;
        color: #fff;
    }


    /* =========================================================
       HERO
    ========================================================= */

    .business-hero {
        position: relative;
        overflow: hidden;
        margin-bottom: 20px;
        padding: 25px;
        border: 1px solid #e7edf5;
        border-radius: 17px;
        background:
            radial-gradient(
                circle at top right,
                rgba(37, 99, 235, .10),
                transparent 30%
            ),
            linear-gradient(
                135deg,
                #ffffff 0%,
                #f8fbff 100%
            );
        box-shadow: 0 5px 18px rgba(15, 23, 42, .04);
    }

    .business-hero-content {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .business-avatar {
        width: 72px;
        height: 72px;
        min-width: 72px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border: 4px solid #fff;
        border-radius: 16px;
        background: #eff6ff;
        box-shadow: 0 5px 16px rgba(15, 23, 42, .08);
        color: #2563eb;
        font-size: 24px;
        font-weight: 700;
    }

    .business-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .business-hero-info {
        min-width: 0;
    }

    .business-title {
        margin: 0 0 7px;
        color: #172033;
        font-size: 22px;
        font-weight: 750;
        word-break: break-word;
    }

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

    .category-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 10px;
        border-radius: 20px;
        background: #eef2ff;
        color: #4f46e5;
        font-size: 10px;
        font-weight: 700;
    }

    .request-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 10px;
        border-radius: 20px;
        background: #f1f5f9;
        color: #64748b;
        font-size: 10px;
        font-weight: 650;
    }


    /* =========================================================
       SECTION CARD
    ========================================================= */

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

    .section-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 15px 18px;
        border-bottom: 1px solid #eef2f6;
    }

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

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

    .section-title {
        margin: 0;
        color: #334155;
        font-size: 13px;
        font-weight: 700;
    }

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

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


    /* =========================================================
       DETAILS
    ========================================================= */

    .detail-item {
        height: 100%;
        min-height: 78px;
        padding: 13px 14px;
        border: 1px solid #edf0f4;
        border-radius: 11px;
        background: #fbfcfe;
    }

    .detail-label {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 7px;
        color: #94a3b8;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .25px;
        text-transform: uppercase;
    }

    .detail-label i {
        color: #64748b;
    }

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

    .detail-value a {
        color: inherit;
        text-decoration: none;
    }


    /* =========================================================
       LOCATION
    ========================================================= */

    .location-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .location-item {
        padding: 14px;
        border: 1px solid #edf0f4;
        border-radius: 11px;
        background: #fbfcfe;
    }

    .location-icon {
        width: 29px;
        height: 29px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 9px;
        border-radius: 8px;
        background: #f0fdf4;
        color: #16a34a;
        font-size: 10px;
    }

    .location-label {
        margin-bottom: 4px;
        color: #94a3b8;
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .location-value {
        color: #334155;
        font-size: 12px;
        font-weight: 650;
    }


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

    .description-box {
        position: relative;
        padding: 16px 17px;
        border: 1px solid #e9edf3;
        border-radius: 11px;
        background: #f8fafc;
        color: #475569;
        font-size: 12px;
        line-height: 1.75;
        white-space: pre-line;
    }

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


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

    .service-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .service-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 11px;
        border: 1px solid #dcfce7;
        border-radius: 20px;
        background: #f0fdf4;
        color: #15803d;
        font-size: 10px;
        font-weight: 650;
    }

    .service-chip i {
        font-size: 9px;
    }

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


    /* =========================================================
       MEDIA
    ========================================================= */

    .media-view-card {
        height: 100%;
        overflow: hidden;
        border: 1px solid #e7ebf0;
        border-radius: 13px;
        background: #fff;
        transition: all .2s ease;
    }

    .media-view-card:hover {
        border-color: #cfd9e6;
        box-shadow: 0 7px 20px rgba(15, 23, 42, .07);
        transform: translateY(-2px);
    }

    .media-preview {
        position: relative;
        overflow: hidden;
        height: 230px;
        background: #f1f5f9;
    }

    .media-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .3s ease;
    }

    .media-view-card:hover .media-preview img {
        transform: scale(1.025);
    }

    .media-type-badge {
        position: absolute;
        top: 11px;
        left: 11px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 9px;
        border-radius: 20px;
        background: rgba(15, 23, 42, .78);
        color: #fff;
        font-size: 9px;
        font-weight: 650;
        backdrop-filter: blur(5px);
    }

    .media-info {
        padding: 13px;
    }

    .media-filename {
        overflow: hidden;
        margin-bottom: 11px;
        color: #64748b;
        font-size: 10px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .media-actions {
        display: flex;
        gap: 7px;
    }

    .media-action-btn {
        flex: 1;
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-radius: 8px;
        font-size: 10px;
        font-weight: 650;
        text-decoration: none;
    }

    .media-view-btn {
        border: 1px solid #dbeafe;
        background: #eff6ff;
        color: #2563eb;
    }

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

    .media-download-btn {
        border: 1px solid #dcfce7;
        background: #f0fdf4;
        color: #15803d;
    }

    .media-download-btn:hover {
        background: #16a34a;
        color: #fff;
    }


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

    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 13px;
    }

    .gallery-card {
        overflow: hidden;
        border: 1px solid #e7ebf0;
        border-radius: 11px;
        background: #fff;
    }

    .gallery-image-wrap {
        position: relative;
        overflow: hidden;
        height: 170px;
        background: #f1f5f9;
    }

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

    .gallery-card:hover img {
        transform: scale(1.04);
    }

    .gallery-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: rgba(15, 23, 42, .45);
        opacity: 0;
        transition: opacity .2s ease;
    }

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

    .gallery-icon-btn {
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 9px;
        background: #fff;
        color: #334155;
        text-decoration: none;
    }

    .gallery-icon-btn:hover {
        color: #2563eb;
    }

    .gallery-file {
        overflow: hidden;
        padding: 9px 10px;
        color: #64748b;
        font-size: 9px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


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

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

    .image-modal-body {
        padding: 15px;
        background: #f8fafc;
        text-align: center;
    }

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

    .confirm-icon {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 14px;
        border-radius: 50%;
        font-size: 22px;
    }

    .confirm-icon.success {
        background: #ecfdf5;
        color: #16a34a;
    }

    .confirm-icon.danger {
        background: #fef2f2;
        color: #dc2626;
    }

    .modal-confirm-title {
        margin-bottom: 6px;
        color: #1e293b;
        font-size: 17px;
        font-weight: 700;
    }

    .modal-confirm-text {
        margin-bottom: 20px;
        color: #94a3b8;
        font-size: 11px;
    }


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

    body.dark-mode .business-hero,
    body.dark-mode .section-card,
    body.dark-mode .media-view-card,
    body.dark-mode .gallery-card,
    body.dark-mode .service-back-btn {
        border-color: #273449;
        background: #172033;
    }

    body.dark-mode .page-main-title,
    body.dark-mode .business-title,
    body.dark-mode .section-title,
    body.dark-mode .detail-value,
    body.dark-mode .location-value {
        color: #f1f5f9;
    }

    body.dark-mode .section-card-header {
        border-color: #273449;
    }

    body.dark-mode .detail-item,
    body.dark-mode .location-item,
    body.dark-mode .description-box,
    body.dark-mode .empty-state {
        border-color: #2d394c;
        background: #111827;
        color: #cbd5e1;
    }


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

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

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

        .top-actions {
            width: 100%;
        }

        .approve-action-btn,
        .decline-action-btn {
            flex: 1;
        }

        .business-hero-content {
            align-items: flex-start;
        }

        .location-grid {
            grid-template-columns: 1fr;
        }

        .gallery-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 575px) {
        .service-view-page {
            padding-left: 12px;
            padding-right: 12px;
        }

        .business-hero {
            padding: 18px;
        }

        .business-avatar {
            width: 60px;
            height: 60px;
            min-width: 60px;
        }

        .business-title {
            font-size: 18px;
        }

        .media-preview {
            height: 200px;
        }
    }
</style>

@endsection


@section('content')

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

    $services = $view_service->service ?? [];

    if (is_string($services)) {

        $decodedServices = json_decode($services, true);

        if (is_array($decodedServices)) {

            $services = $decodedServices;

        } elseif (trim($services) !== '') {

            $services = [$services];

        } else {

            $services = [];
        }

    } elseif (!is_array($services)) {

        $services = !empty($services)
            ? [$services]
            : [];
    }


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

    $galleryImages = $view_service->gallery ?? [];

    if (is_string($galleryImages)) {

        $decodedGallery = json_decode($galleryImages, true);

        if (is_array($decodedGallery)) {

            $galleryImages = $decodedGallery;

        } elseif (trim($galleryImages) !== '') {

            $galleryImages = [$galleryImages];

        } else {

            $galleryImages = [];
        }

    } elseif (!is_array($galleryImages)) {

        $galleryImages = !empty($galleryImages)
            ? [$galleryImages]
            : [];
    }


    /*
    |--------------------------------------------------------------------------
    | BUSINESS INITIAL
    |--------------------------------------------------------------------------
    */

    $businessName =
        $view_service->business_name
        ?: 'Business';

    $businessInitial =
        strtoupper(
            substr(
                trim($businessName),
                0,
                1
            )
        );
@endphp


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

    {{-- =====================================================
         TOP BAR
    ====================================================== --}}

    <div class="service-topbar">

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

            <div
                class="service-back-btn"
                onclick="redirectToPreviousPage()">

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

            </div>


            <div>

                <h3 class="page-main-title">
                    Edit Service Request
                </h3>

                <p class="page-main-subtitle">
                    Review complete business information and request details
                </p>

            </div>

        </div>


        <div class="top-actions">

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

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

                Approve

            </button>


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

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

                Decline

            </button>

        </div>

    </div>


    {{-- =====================================================
         BUSINESS HERO
    ====================================================== --}}

    <div class="business-hero">

        <div class="business-hero-content">

            <div class="business-avatar">

                @if(!empty($view_service->business_profile))

                    <img
                        src="{{ asset($view_service->business_profile) }}"
                        alt="{{ $businessName }}">

                @else

                    {{ $businessInitial }}

                @endif

            </div>


            <div class="business-hero-info">

                <h4 class="business-title">
                    {{ $businessName }}
                </h4>


                <div class="business-meta">

                    <span class="category-pill">

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

                        {{ $view_service->category_name ?: 'No Category' }}

                    </span>


                    <span class="request-pill">

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

                        Request {{ $view_service->id }}

                    </span>

                </div>

            </div>

        </div>

    </div>


    {{-- =====================================================
         DETAILS + LOCATION
    ====================================================== --}}

    <div class="row g-3 mb-3">


        {{-- PERSONAL / BUSINESS DETAILS --}}

        <div class="col-xl-7 col-lg-7">

            <div class="section-card">

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

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

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

                        <div>

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

                            <div class="section-subtitle">
                                Contact and business details
                            </div>

                        </div>

                    </div>

                </div>


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

                    <div class="row g-3">

                        {{-- NAME --}}
                        <div class="col-md-6">

                            <div class="detail-item">

                                <div class="detail-label">

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

                                    Name

                                </div>

                                <div class="detail-value">
                                    {{ $view_service->name ?: 'N/A' }}
                                </div>

                            </div>

                        </div>


                        {{-- CATEGORY --}}
                        <div class="col-md-6">

                            <div class="detail-item">

                                <div class="detail-label">

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

                                    Category Name

                                </div>

                                <div class="detail-value">
                                    {{ $view_service->category_name ?: 'N/A' }}
                                </div>

                            </div>

                        </div>


                        {{-- BUSINESS --}}
                        <div class="col-md-6">

                            <div class="detail-item">

                                <div class="detail-label">

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

                                    Business Name

                                </div>

                                <div class="detail-value">
                                    {{ $view_service->business_name ?: 'N/A' }}
                                </div>

                            </div>

                        </div>


                        {{-- PHONE --}}
                        <div class="col-md-6">

                            <div class="detail-item">

                                <div class="detail-label">

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

                                    Phone Number

                                </div>

                                <div class="detail-value">

                                    @if(!empty($view_service->phone_number))

                                        <a href="tel:{{ $view_service->phone_number }}">
                                            {{ $view_service->phone_number }}
                                        </a>

                                    @else

                                        N/A

                                    @endif

                                </div>

                            </div>

                        </div>


                        {{-- WHATSAPP --}}
                        <div class="col-md-6">

                            <div class="detail-item">

                                <div class="detail-label">

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

                                    WhatsApp No

                                </div>

                                <div class="detail-value">
                                    {{ $view_service->whatsapp_number ?: 'N/A' }}
                                </div>

                            </div>

                        </div>


                        {{-- REQUEST ID --}}
                        <div class="col-md-6">

                            <div class="detail-item">

                                <div class="detail-label">

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

                                    Request ID

                                </div>

                                <div class="detail-value">
                                    #{{ $view_service->id }}
                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>


        {{-- LOCATION --}}

        <div class="col-xl-5 col-lg-5">

            <div class="section-card">

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

                    <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="section-card-body">

                    <div class="location-grid">

                        <div class="location-item">

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

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

                            <div class="location-value">
                                {{ $view_service->district ?: 'N/A' }}
                            </div>

                        </div>


                        <div class="location-item">

                            <div class="location-icon">
                                <i class="fa-solid fa-map-pin"></i>
                            </div>

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

                            <div class="location-value">
                                {{ $view_service->village ?: 'N/A' }}
                            </div>

                        </div>


                        <div class="location-item">

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

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

                            <div class="location-value">
                                {{ $view_service->place ?: 'N/A' }}
                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>


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

    <div class="section-card mb-3">

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

            <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="section-card-body">

            <div class="row g-3">


                {{-- BUSINESS PROFILE --}}

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

                    @if(!empty($view_service->business_profile))

                        <div class="media-view-card">

                            <div class="media-preview">

                                <span class="media-type-badge">

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

                                    Business Profile

                                </span>


                                <img
                                    src="{{ asset($view_service->business_profile) }}"
                                    alt="Business Profile">

                            </div>


                            <div class="media-info">

                                <div
                                    class="media-filename"
                                    title="{{ basename($view_service->business_profile) }}">

                                    {{ basename($view_service->business_profile) }}

                                </div>


                                <div class="media-actions">

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

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

                                        View

                                    </button>


                                    <a
                                        href="{{ asset($view_service->business_profile) }}"
                                        download
                                        class="media-action-btn media-download-btn">

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

                                        Download

                                    </a>

                                </div>

                            </div>

                        </div>

                    @else

                        <div class="empty-state">
                            No business profile image available.
                        </div>

                    @endif

                </div>


                {{-- COVER PHOTO --}}

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

                    @if(!empty($view_service->business_cover_photo))

                        <div class="media-view-card">

                            <div class="media-preview">

                                <span class="media-type-badge">

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

                                    Cover Photo

                                </span>


                                <img
                                    src="{{ asset($view_service->business_cover_photo) }}"
                                    alt="Business Cover Photo">

                            </div>


                            <div class="media-info">

                                <div
                                    class="media-filename"
                                    title="{{ basename($view_service->business_cover_photo) }}">

                                    {{ basename($view_service->business_cover_photo) }}

                                </div>


                                <div class="media-actions">

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

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

                                        View

                                    </button>


                                    <a
                                        href="{{ asset($view_service->business_cover_photo) }}"
                                        download
                                        class="media-action-btn media-download-btn">

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

                                        Download

                                    </a>

                                </div>

                            </div>

                        </div>

                    @else

                        <div class="empty-state">
                            No business cover photo available.
                        </div>

                    @endif

                </div>

            </div>

        </div>

    </div>


    {{-- =====================================================
         DESCRIPTION + SERVICES
    ====================================================== --}}

    <div class="row g-3 mb-3">


        {{-- DESCRIPTION --}}

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

            <div class="section-card">

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

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

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

                        <div>

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

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

                        </div>

                    </div>

                </div>


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

                    @if(!empty($view_service->description))

                        <div class="description-box">{{ $view_service->description }}</div>

                    @else

                        <div class="empty-state">
                            No description available.
                        </div>

                    @endif

                </div>

            </div>

        </div>


        {{-- SERVICES --}}

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

            <div class="section-card">

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

                    <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">

                                {{ count($services) }}

                                {{ count($services) === 1 ? 'service' : 'services' }}

                            </div>

                        </div>

                    </div>

                </div>


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

                    @if(count($services) > 0)

                        <div class="service-list">

                            @foreach($services as $item)

                                @if(!empty($item))

                                    <span class="service-chip">

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

                                        {{ $item }}

                                    </span>

                                @endif

                            @endforeach

                        </div>

                    @else

                        <div class="empty-state">
                            No services available.
                        </div>

                    @endif

                </div>

            </div>

        </div>

    </div>


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

    <div class="section-card">

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

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

                <div class="section-icon">
                    <i class="fa-regular fa-images"></i>
                </div>

                <div>

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

                    <div class="section-subtitle">

                        {{ count($galleryImages) }}

                        {{ count($galleryImages) === 1 ? 'image' : 'images' }}

                    </div>

                </div>

            </div>

        </div>


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

            @if(count($galleryImages) > 0)

                <div class="gallery-grid">

                    @foreach($galleryImages as $image)

                        @if(!empty($image))

                            <div class="gallery-card">

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

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


                                    <div class="gallery-overlay">

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

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

                                        </button>


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

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

                                        </a>

                                    </div>

                                </div>


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

                                    {{ basename($image) }}

                                </div>

                            </div>

                        @endif

                    @endforeach

                </div>

            @else

                <div class="empty-state">

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

                    No gallery images found.

                </div>

            @endif

        </div>

    </div>


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

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

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

            <div class="modal-content custom-modal-content">

                <div class="modal-header border-0">

                    <h5 class="modal-title">
                        Image Preview
                    </h5>

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

                </div>


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

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

                </div>

            </div>

        </div>

    </div>


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

    <div
        class="modal fade zoom-in"
        id="ApproveModal"
        tabindex="-1">

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

            <div class="modal-content custom-modal-content">

                <div class="modal-body text-center p-4 p-md-5">

                    <div class="confirm-icon success">

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

                    </div>


                    <h5 class="modal-confirm-title">
                        Approve Service Request?
                    </h5>


                    <p class="modal-confirm-text">
                        Are you sure you want to accept this service request?
                    </p>


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

                        @csrf


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


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


                        <div class="d-flex justify-content-center gap-2">

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

                                Cancel

                            </button>


                            <button
                                type="submit"
                                class="btn btn-primary px-4 submit-btn">

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

                                Yes, Approve

                            </button>

                        </div>

                    </form>

                </div>

            </div>

        </div>

    </div>


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

    <div
        class="modal fade zoom-in"
        id="DeclineModal"
        tabindex="-1">

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

            <div class="modal-content custom-modal-content">

                <div class="modal-body text-center p-4 p-md-5">

                    <div class="confirm-icon danger">

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

                    </div>


                    <h5 class="modal-confirm-title">
                        Decline Service Request?
                    </h5>


                    <p class="modal-confirm-text">
                        Are you sure you want to reject this service request?
                    </p>


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

                        @csrf


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


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


                        <div class="d-flex justify-content-center gap-2">

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

                                Cancel

                            </button>


                            <button
                                type="submit"
                                class="btn btn-danger px-4 submit-btn">

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

                                Yes, Decline

                            </button>

                        </div>

                    </form>

                </div>

            </div>

        </div>

    </div>

</div>


<script>
    /*
    |--------------------------------------------------------------------------
    | 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'
                                    );

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

                                if (
                                    modalImage &&
                                    imageSource
                                ) {

                                    modalImage.src =
                                        imageSource;
                                }
                            }
                        );
                    }
                );


            /*
            |--------------------------------------------------------------------------
            | CLEAR IMAGE WHEN MODAL CLOSED
            |--------------------------------------------------------------------------
            */

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

            if (imageModal) {

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

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

                        if (modalImage) {
                            modalImage.src = '';
                        }
                    }
                );
            }


            /*
            |--------------------------------------------------------------------------
            | SUBMIT LOADING
            |--------------------------------------------------------------------------
            */

            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 me-2"
                                        role="status">
                                    </span>
                                    Processing...
                                `;
                            }
                        );
                    }
                );
        }
    );
</script>

@endsection


@section('footer')
@endsection