@extends('user.layouts')

@section('title', 'Business Profile View')

@section('header')

<style>

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

.business-profile-page {
    padding-top: 22px;
    padding-bottom: 45px;
}

.business-profile-page * {
    box-sizing: border-box;
}

.page-header-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.page-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.back-btn {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #e7e9ed;
    border-radius: 10px;

    background: #ffffff;
    color: #4d5561;

    cursor: pointer;

    transition: all .2s ease;
}

.back-btn:hover {
    background: #f5f7fa;
    color: #0d6efd;
    border-color: #dce4ef;
}

.page-heading {
    margin: 0;
    color: #20242a;
    font-size: 24px;
    font-weight: 700;
}

.page-subtitle {
    margin: 4px 0 0;
    color: #8a9099;
    font-size: 13px;
}


/* =========================================================
   MAIN PROFILE HERO
========================================================= */

.profile-hero {
    position: relative;

    border: 0;
    border-radius: 16px;

    background: #ffffff;

    box-shadow: 0 4px 22px rgba(0, 0, 0, .05);

    overflow: hidden;
    margin-bottom: 22px;
}

.cover-wrapper {
    position: relative;
    width: 100%;
    height: 250px;

    background: #f3f5f8;

    overflow: hidden;
}

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

.cover-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0) 30%,
            rgba(0,0,0,.38) 100%
        );
}

.cover-actions {
    position: absolute;
    right: 18px;
    top: 18px;

    display: flex;
    gap: 8px;
}

.media-action-btn {
    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 9px;

    background: rgba(255,255,255,.94);
    color: #3d4248;

    text-decoration: none;

    box-shadow: 0 2px 10px rgba(0,0,0,.08);

    transition: all .2s ease;
}

.media-action-btn:hover {
    background: #ffffff;
    color: #0d6efd;
}


/* =========================================================
   PROFILE HEADER
========================================================= */

.profile-main-info {
    position: relative;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    padding: 0 25px 24px;
}

.profile-identity {
    display: flex;
    align-items: flex-end;
    gap: 18px;
}

.profile-image-wrapper {
    width: 120px;
    height: 120px;

    flex-shrink: 0;

    margin-top: -55px;

    position: relative;
    z-index: 2;

    border: 5px solid #ffffff;
    border-radius: 18px;

    background: #ffffff;

    box-shadow: 0 5px 20px rgba(0,0,0,.10);

    overflow: hidden;
}

.profile-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-title-area {
    padding-top: 16px;
}

.business-name {
    margin: 0;

    font-size: 23px;
    font-weight: 700;

    color: #20242a;
}

.business-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-top: 7px;

    padding: 5px 10px;

    border-radius: 20px;

    background: #eef5ff;
    color: #0d6efd;

    font-size: 12px;
    font-weight: 600;
}

.business-location-text {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-top: 9px;

    color: #7c838d;
    font-size: 13px;
}

.profile-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.profile-action-btn {
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 0 13px;

    border: 1px solid #e1e5ea;
    border-radius: 8px;

    background: #ffffff;

    color: #555c66;

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;

    transition: all .2s ease;
}

.profile-action-btn:hover {
    background: #f5f7fa;
    color: #0d6efd;
}


/* =========================================================
   CARDS
========================================================= */

.info-card {
    height: 100%;

    border: 0;
    border-radius: 14px;

    background: #ffffff;

    box-shadow: 0 3px 18px rgba(0, 0, 0, .045);
}

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

.card-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding-bottom: 15px;
    margin-bottom: 18px;

    border-bottom: 1px solid #f0f1f3;
}

.card-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-icon {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: #eef5ff;
    color: #0d6efd;

    font-size: 14px;
}

.section-title {
    margin: 0;

    color: #2d3238;

    font-size: 15px;
    font-weight: 700;
}


/* =========================================================
   INFORMATION ROWS
========================================================= */

.info-list {
    display: flex;
    flex-direction: column;
}

.info-row {
    display: flex;
    align-items: flex-start;

    gap: 13px;

    padding: 12px 0;

    border-bottom: 1px solid #f3f4f6;
}

.info-row:first-child {
    padding-top: 0;
}

.info-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.info-row-icon {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: #f6f7f9;
    color: #707782;

    font-size: 13px;
}

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

.info-label {
    margin-bottom: 3px;

    color: #969ca5;

    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: .3px;
}

.info-value {
    margin: 0;

    color: #363b42;

    font-size: 13px;
    font-weight: 500;

    word-break: break-word;
}


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

.description-text {
    margin: 0;

    color: #626973;

    font-size: 13px;
    line-height: 1.8;

    white-space: pre-line;
}


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

.services-wrapper {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;
}

.service-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 11px;

    border: 1px solid #e2ebf8;
    border-radius: 7px;

    background: #f7faff;
    color: #536273;

    font-size: 12px;
    font-weight: 500;
}

.service-chip i {
    color: #0d6efd;
    font-size: 10px;
}


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

.gallery-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 14px;
}

.gallery-item {
    position: relative;

    height: 175px;

    border-radius: 12px;

    background: #f3f5f7;

    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .3s ease;
}

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

.gallery-overlay {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    opacity: 0;

    background: rgba(0,0,0,.40);

    transition: opacity .25s ease;
}

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

.gallery-btn {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 8px;

    background: #ffffff;
    color: #444b54;

    text-decoration: none;
}

.gallery-btn:hover {
    color: #0d6efd;
}

.no-data {
    padding: 25px;

    text-align: center;

    border: 1px dashed #dfe3e8;
    border-radius: 10px;

    color: #969ca5;

    font-size: 13px;
}


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

.image-modal .modal-content {
    border: 0;
    border-radius: 15px;

    overflow: hidden;

    box-shadow: 0 15px 50px rgba(0,0,0,.20);
}

.image-modal .modal-header {
    position: absolute;

    top: 10px;
    right: 10px;

    z-index: 10;

    padding: 0;

    border: 0;
}

.image-modal .btn-close {
    width: 34px;
    height: 34px;

    padding: 0;

    border-radius: 50%;

    background-color: #ffffff;

    opacity: 1;

    box-shadow: 0 2px 10px rgba(0,0,0,.15);
}

.image-modal .modal-body {
    background: #111111;
}

#modalImage {
    display: block;

    width: 100%;

    max-height: 80vh;

    object-fit: contain;
}


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

@media (max-width: 991.98px) {

    .cover-wrapper {
        height: 210px;
    }

    .profile-main-info {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-actions {
        padding-left: 138px;
    }

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

}

@media (max-width: 767.98px) {

    .business-profile-page {
        padding-top: 16px;
    }

    .page-heading {
        font-size: 20px;
    }

    .cover-wrapper {
        height: 180px;
    }

    .profile-main-info {
        padding: 0 16px 20px;
    }

    .profile-identity {
        align-items: flex-start;
        flex-direction: column;

        gap: 10px;
    }

    .profile-image-wrapper {
        width: 100px;
        height: 100px;

        margin-top: -45px;
    }

    .profile-title-area {
        padding-top: 0;
    }

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

    .profile-actions {
        width: 100%;

        padding-left: 0;
    }

    .profile-action-btn {
        flex: 1;
    }

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

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

        gap: 10px;
    }

    .gallery-item {
        height: 140px;
    }

    .gallery-overlay {
        opacity: 1;

        align-items: flex-end;
        justify-content: flex-end;

        padding: 8px;

        background:
            linear-gradient(
                180deg,
                transparent 50%,
                rgba(0,0,0,.45)
            );
    }

}

@media (max-width: 420px) {

    .cover-wrapper {
        height: 155px;
    }

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

    .gallery-item {
        height: 190px;
    }

}

</style>

@endsection


@section('content')

<div class="container-fluid page-wrapper business-profile-page">


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

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

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

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

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

            </div>

            <div>

                <h3 class="page-heading">
                    Business Profile
                </h3>

                <p class="page-subtitle">
                    View complete business information
                </p>

            </div>

        </div>

    </div>


    {{-- =========================================================
         PROFILE HERO
    ========================================================== --}}

    <div class="profile-hero">


        {{-- COVER PHOTO --}}

        <div class="cover-wrapper">

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

                <img
                    src="{{ asset($view_business->business_cover_photo) }}"
                    alt="{{ $view_business->business_name ?? 'Business Cover' }}">

            @endif


            <div class="cover-overlay"></div>


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

                <div class="cover-actions">

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

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

                    </button>


                    <a
                        href="{{ asset($view_business->business_cover_photo) }}"
                        download
                        class="media-action-btn"
                        title="Download Cover">

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

                    </a>

                </div>

            @endif

        </div>


        {{-- PROFILE INFORMATION --}}

        <div class="profile-main-info">

            <div class="profile-identity">


                {{-- PROFILE IMAGE --}}

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

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

                        <img
                            id="businessProfileImage"
                            src="{{ asset($view_business->business_profile) }}"
                            alt="{{ $view_business->business_name ?? 'Business Profile' }}">

                    @endif

                </div>


                {{-- TITLE --}}

                <div class="profile-title-area">

                    <h2 class="business-name">

                        {{ $view_business->business_name ?? '-' }}

                    </h2>


                    <div class="business-category">

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

                        {{ $view_business->category_name ?? '-' }}

                    </div>


                    <div class="business-location-text">

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

                        <span>

                            @if(!empty($view_business->place))
                                {{ $view_business->place }}
                            @endif

                            @if(!empty($view_business->village))
                                {{ !empty($view_business->place) ? ', ' : '' }}
                                {{ $view_business->village }}
                            @endif

                            @if(!empty($view_business->district))
                                {{ (!empty($view_business->place) || !empty($view_business->village)) ? ', ' : '' }}
                                {{ $view_business->district }}
                            @endif

                            @if(
                                empty($view_business->place) &&
                                empty($view_business->village) &&
                                empty($view_business->district)
                            )
                                -
                            @endif

                        </span>

                    </div>

                </div>

            </div>


            {{-- PROFILE IMAGE ACTIONS --}}

            <div class="profile-actions">

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

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

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

                        View Profile

                    </button>


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

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

                        Download

                    </a>

                @endif

            </div>

        </div>

    </div>


    {{-- =========================================================
         INFORMATION
    ========================================================== --}}

    <div class="row g-4">


        {{-- CONTACT DETAILS --}}

        <div class="col-xl-6 col-lg-6 col-md-12">

            <div class="card info-card">

                <div class="card-body">

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

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

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

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

                        </div>

                    </div>


                    <div class="info-list">


                        {{-- BUSINESS NAME --}}

                        <div class="info-row">

                            <div class="info-row-icon">
                                <i class="fa-solid fa-building"></i>
                            </div>

                            <div class="info-content">

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

                                <p class="info-value">
                                    {{ $view_business->business_name ?? '-' }}
                                </p>

                            </div>

                        </div>


                        {{-- CATEGORY --}}

                        <div class="info-row">

                            <div class="info-row-icon">
                                <i class="fa-solid fa-layer-group"></i>
                            </div>

                            <div class="info-content">

                                <div class="info-label">
                                    Category Name
                                </div>

                                <p class="info-value">
                                    {{ $view_business->category_name ?? '-' }}
                                </p>

                            </div>

                        </div>


                        {{-- PHONE --}}

                        <div class="info-row">

                            <div class="info-row-icon">
                                <i class="fa-solid fa-phone"></i>
                            </div>

                            <div class="info-content">

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

                                <p class="info-value">
                                    {{ $view_business->phone_number ?? '-' }}
                                </p>

                            </div>

                        </div>


                        {{-- ALTERNATIVE PHONE --}}

                        <div class="info-row">

                            <div class="info-row-icon">
                                <i class="fa-solid fa-mobile-screen-button"></i>
                            </div>

                            <div class="info-content">

                                <div class="info-label">
                                    Alternative Phone
                                </div>

                                <p class="info-value">
                                    {{ $view_business->alternative_phone_number ?? '-' }}
                                </p>

                            </div>

                        </div>


                        {{-- WHATSAPP --}}

                        <div class="info-row">

                            <div class="info-row-icon">
                                <i class="fa-brands fa-whatsapp"></i>
                            </div>

                            <div class="info-content">

                                <div class="info-label">
                                    Whatsapp Number
                                </div>

                                <p class="info-value">
                                    {{ $view_business->whatsapp_number ?? '-' }}
                                </p>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>


        {{-- LOCATION DETAILS --}}

        <div class="col-xl-6 col-lg-6 col-md-12">

            <div class="card info-card">

                <div class="card-body">

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

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

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

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

                        </div>

                    </div>


                    <div class="info-list">


                        {{-- DISTRICT --}}

                        <div class="info-row">

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

                            <div class="info-content">

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

                                <p class="info-value">
                                    {{ $view_business->district ?? '-' }}
                                </p>

                            </div>

                        </div>


                        {{-- VILLAGE --}}

                        <div class="info-row">

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

                            <div class="info-content">

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

                                <p class="info-value">
                                    {{ $view_business->village ?? '-' }}
                                </p>

                            </div>

                        </div>


                        {{-- PLACE --}}

                        <div class="info-row">

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

                            <div class="info-content">

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

                                <p class="info-value">
                                    {{ $view_business->place ?? '-' }}
                                </p>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>


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

        <div class="col-12">

            <div class="card info-card">

                <div class="card-body">

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

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

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

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

                        </div>

                    </div>


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

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

                    @else

                        <div class="no-data">
                            No description available.
                        </div>

                    @endif

                </div>

            </div>

        </div>


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

        <div class="col-12">

            <div class="card info-card">

                <div class="card-body">

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

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

                            <div class="card-icon">
                                <i class="fa-solid fa-briefcase"></i>
                            </div>

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

                        </div>

                    </div>


                    @php

                        $services = [];

                        if (!empty($view_business->service)) {

                            if (is_array($view_business->service)) {

                                $services = $view_business->service;

                            } else {

                                $services = explode(
                                    ',',
                                    trim(
                                        str_replace(
                                            ['[', ']', '"'],
                                            '',
                                            $view_business->service
                                        )
                                    )
                                );

                            }

                        }

                        $services = array_filter(
                            array_map('trim', $services)
                        );

                    @endphp


                    @if(!empty($services))

                        <div class="services-wrapper">

                            @foreach($services as $service)

                                <div class="service-chip">

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

                                    {{ $service }}

                                </div>

                            @endforeach

                        </div>

                    @else

                        <div class="no-data">
                            No services available.
                        </div>

                    @endif

                </div>

            </div>

        </div>


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

        <div class="col-12">

            <div class="card info-card">

                <div class="card-body">

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

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

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

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

                        </div>

                    </div>


                    @php

                        $galleryImages = [];

                        if (!empty($view_business->gallery)) {

                            if (is_array($view_business->gallery)) {

                                $galleryImages =
                                    $view_business->gallery;

                            } else {

                                $galleryImages = [
                                    $view_business->gallery
                                ];

                            }

                        }

                    @endphp


                    @if(count($galleryImages) > 0)

                        <div class="gallery-grid">

                            @foreach($galleryImages as $image)

                                @if(!empty($image))

                                    <div class="gallery-item">

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


                                        <div class="gallery-overlay">


                                            {{-- VIEW --}}

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

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

                                            </button>


                                            {{-- DOWNLOAD --}}

                                            <a
                                                href="{{ $image }}"
                                                download
                                                class="gallery-btn"
                                                title="Download Image">

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

                                            </a>

                                        </div>

                                    </div>

                                @endif

                            @endforeach

                        </div>

                    @else

                        <div class="no-data">

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

                            No gallery images available.

                        </div>

                    @endif

                </div>

            </div>

        </div>

    </div>


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

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

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

            <div class="modal-content">

                <div class="modal-header">

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

                </div>

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

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

                </div>

            </div>

        </div>

    </div>

</div>

@endsection


@section('footer')

<script>

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

    /*
    |--------------------------------------------------------------------------
    | IMAGE VIEW MODAL
    |--------------------------------------------------------------------------
    */

    const viewButtons =
        document.querySelectorAll('.image-view-btn');


    viewButtons.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 MODAL IMAGE AFTER CLOSE
    |--------------------------------------------------------------------------
    */

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


    if (imageModal) {

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

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

                if (modalImage) {

                    modalImage.src = '';

                }

            }
        );

    }

});

</script>

@endsection