@extends('admin.layout')
@section('title', 'Business Profile View')
@section('header')


@endsection
@section('content')

<style>
    .page-title {
        margin-bottom: 1rem;
    }
    
    .breadcrumb-box {
        /* Style for the back button */
        cursor: pointer;
        padding: 8px;
        border-radius: 5px;
        background-color: #f0f0f0;
        display: flex;
        align-items: center;
    }
    
    .breadcrumb-box i {
        /* Style for the left arrow icon */
        font-size: 1rem;
        color: #555;
    }
    
    .page-top-heading {
        /* Style for the main heading */
        margin: 0; /* Reset default margin */
        font-size: 1.5rem;
        color: #333;
    }
    
    .accept-button {
        /* Style for the "Accept" button */
        background-color: #4CAF50; /* Green background */
        color: white;
        padding: 10px 15px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 1rem;
        transition: background-color 0.3s ease;
    }
    
    .accept-button:hover {
        background-color: #45a049;
    }
     .form-sub-heading {
        font-weight: 600;
        border-bottom: 2px solid #eee;
        padding-bottom: 5px;
    }

    .services-ul {
        padding-left: 0;
        list-style: none;
    }

    .services-ul li {
        background: #f8f9fa;
        margin-bottom: 8px;
        padding: 10px 15px;
        border-radius: 6px;
        font-size: 14px;
        color: #333;
    }

    .profile-img {
        max-width: 180px;
        border: 2px solid #ddd;
        padding: 3px;
    }

    .portfolio-item {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        transition: transform 0.3s;
    }

    .portfolio-item:hover {
        transform: scale(1.05);
    }

    .portfolio-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(0,0,0,0.5);
        color: #fff;
        opacity: 0;
        transition: opacity 0.3s;
    }

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

    .gallery-img {
        width: 100%;
        height: 150px;
        object-fit: cover;
    }
    .decline-button {
        /* Style for the "Decline" button */
        background-color: #f44336; /* Red background */
        color: white;
        padding: 10px 15px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 1rem;
        transition: background-color 0.3s ease;
    }
    
    .decline-button:hover {
        background-color: #d32f2f;
    }
    
    .data-display-area {
        /* Style for the data display area */
        background-color: #f9f9f9;
        padding: 1rem;
        border-radius: 5px;
        border: 1px solid #ddd;
        margin-top: 1rem;
    }
        .data-display-area p{
            margin-bottom: 0.5rem;
        }
    </style>
<div class="container-fluid page-wrapper">
    <h2 class="page-title">View Business</h2>
    <div class="row align-items-center justify-content-between">
        <div class="col-auto d-flex align-items-center">
            <div class="breadcrumb-box" onclick="redirectToPreviousPage()">
                <i class="fa-solid fa-chevron-left"></i>
            </div>
            <div class="ms-3">
                <h3 class="page-top-heading"></h3>
            </div>
        </div>
       @if($business)
    <div class="col-auto">
        <div class="d-flex">
            <button type="button" class="btn accept-button me-2"
                    data-bs-toggle="modal"
                    data-bs-target="#AcceptModal"
                    data-item-id="{{ $business->id }}"
                    onclick="setAcceptId(this)">
                Accept
            </button>
            <button type="button" class="btn decline-button"
                    data-bs-toggle="modal"
                    data-bs-target="#DeclineModal"
                    data-item-id="{{ $business->id }}"
                    onclick="setDeclineId(this)">
                Decline
            </button>
        </div>
    </div>
@else
    <p>No pending business requests found.</p>
@endif

    </div>
        <div class="row mt-4">
            <div class="col-xl-12 col-lg-12">
                <div class="card blured-card">
                   <div class="card-body">

    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="profile-tab-pane" role="tabpanel"
            aria-labelledby="profile-tab" tabindex="0">
            <div class="d-flex justify-content-end align-items-center my-4">
            </div>

            <div class="row">
                <div class="col-lg-12">
                    @if($business)
                        <form action="#">
                            <div class="row">

                                <!-- Category Name -->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label">Category Name</label>
                                        <input type="text" class="form-control"
                                            value="{{ $business?->category_name ?? '' }}">
                                    </div>
                                </div>

                                <!-- Sub-Category Name -->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label">Sub-Category Name</label>
                                        <input type="text" class="form-control"
                                            value="{{ $business?->subcategory_name ?? '' }}">
                                    </div>
                                </div>

                                <!-- Business Name -->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label">Business Name</label>
                                        <input type="text" class="form-control"
                                            value="{{ $business?->business_name ?? '' }}">
                                    </div>
                                </div>

                                <!-- Business Name in Tamil -->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label">Business Name in Tamil</label>
                                        <input type="text" class="form-control"
                                            value="{{ $business?->business_name_tamil ?? '' }}">
                                    </div>
                                </div>

                                <!-- About Us -->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label">About Us</label>
                                        <input type="text" class="form-control"
                                            value="{{ $business?->about_us ?? '' }}">
                                    </div>
                                </div>

                                <!-- About Us in Tamil -->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label">About Us in Tamil</label>
                                        <input type="text" class="form-control"
                                            value="{{ $business?->about_us_intam ?? '' }}">
                                    </div>
                                </div>

                                <!-- Business Contact Info -->
                                <div class="row">
                                    <div class="col-lg-12">
                                        <h5 class="form-sub-heading mt-3 mb-4">Business</h5>
                                    </div>

                                    <!-- Phone Number -->
                                    <div class="col-lg-6">
                                        <div class="mb-3">
                                            <label class="form-label">Phone Number</label>
                                            <input type="tel" class="form-control"
                                                value="{{ $business?->phone_number ?? '' }}">
                                        </div>
                                    </div>

                                    <!-- Whatsapp Number -->
                                    <div class="col-lg-6">
                                        <div class="mb-3">
                                            <label class="form-label">Whatsapp Number</label>
                                            <input type="tel" class="form-control"
                                                value="{{ $business?->whatsapp_number ?? '' }}">
                                        </div>
                                    </div>

                                    <!-- Email -->
                                    <div class="col-lg-6">
                                        <div class="mb-3">
                                            <label class="form-label">Email</label>
                                            <input type="email" class="form-control"
                                                value="{{ $business?->email ?? '' }}">
                                        </div>
                                    </div>

                                    <!-- Location -->
                                    <div class="col-lg-6">
                                        <div class="mb-3">
                                            <label class="form-label">Location</label>
                                            <input type="text" class="form-control"
                                                value="{{ $business?->location ?? '' }}">
                                        </div>
                                    </div>
                                </div>

                                <!-- Social Media Links -->
                                <div class="col-lg-12">
                                    <h5 class="form-sub-heading mt-3 mb-4">Social Media Links</h5>
                                </div>

                                <!-- Facebook -->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label">Facebook</label>
                                        <input type="text" class="form-control"
                                            value="{{ $business?->facebook ?? '' }}">
                                    </div>
                                </div>

                                <!-- Instagram -->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label">Instagram</label>
                                        <input type="text" class="form-control"
                                            value="{{ $business?->instagram ?? '' }}">
                                    </div>
                                </div>

                                <!-- Twitter -->
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label">Twitter</label>
                                        <input type="text" class="form-control"
                                            value="{{ $business?->twitter ?? '' }}">
                                    </div>
                                </div>

                            </div>
                        </form>

                        <!-- Services Offered -->
                        <div class="row business-details">
                             <div class="col-lg-6 col-xl-6 mb-4">
    <!-- Business Profile Section -->
   <!-- Business Profile Section -->
<!-- Business Profile Section -->
<h5 class="form-sub-heading mt-4 mb-3">
    Business Profile
</h5>

@php
    $businessProfileUrl = null;

    $digitalOceanBaseUrl =
        'https://dstone.sfo3.digitaloceanspaces.com';

    if (!empty($business?->business_profile)) {

        $storedProfile = trim(
            $business->business_profile
        );

        /*
        |--------------------------------------------------------------------------
        | Full URL இருந்தால் URL path மட்டும் எடுக்கவும்
        |--------------------------------------------------------------------------
        */
        if (
            str_starts_with($storedProfile, 'http://') ||
            str_starts_with($storedProfile, 'https://')
        ) {
            $storedPath = parse_url(
                $storedProfile,
                PHP_URL_PATH
            );
        } else {
            $storedPath = $storedProfile;
        }

        /*
        |--------------------------------------------------------------------------
        | எந்த folder/path இருந்தாலும் filename மட்டும் எடுக்கவும்
        |--------------------------------------------------------------------------
        */
        $fileName = basename(
            rawurldecode($storedPath)
        );

        if (!empty($fileName)) {
            $businessProfileUrl =
                rtrim($digitalOceanBaseUrl, '/') .
                '/business_profile/' .
                rawurlencode($fileName);
        }
    }
@endphp

<div class="text-center mb-3">

    @if($businessProfileUrl)

        <img
            src="{{ $businessProfileUrl }}"
            alt="Business Profile"
            class="img-fluid rounded profile-img"
            style="max-width: 250px; height: auto;"
            loading="lazy"
            onerror="
                this.style.display='none';
                this.nextElementSibling.style.display='block';
            "
        >

        <p class="text-danger mt-2"
           style="display:none;">
            Image not found
        </p>

    @else

        <p class="text-muted">
            No profile image available.
        </p>

    @endif

</div>
</div>
                            <!-- <div class="col-lg-6 col-xl-6 mb-4">
                                <h5 class="form-sub-heading mt-4 mb-3">Services Offered</h5>
                                <ul class="list-group services-ul">
                                    @php
                                        $services = is_array($business?->service)
                                                    ? $business->service
                                                    : explode(',', trim(str_replace(['[', ']', '"'], '', $business?->service ?? '')));
                                    @endphp

                                    @if(!empty($services))
                                        @foreach($services as $service)
                                            <li class="list-group-item">{{ trim($service) }}</li>
                                        @endforeach
                                    @else
                                        <li class="list-group-item text-muted">No services available</li>
                                    @endif
                                </ul>
                            </div> -->
                             <!-- Portfolio Section -->
<!-- Portfolio Section -->
<div class="col-lg-12 col-xl-12 mb-4">

    <h5 class="form-sub-heading mt-4 mb-3">
        Portfolio
    </h5>

    @php
        $portfolioImages = [];

        $digitalOceanBaseUrl =
            'https://dstone.sfo3.digitaloceanspaces.com';

        $storedPortfolio = $business?->portfolio ?? [];

        /*
        |--------------------------------------------------------------------------
        | Convert portfolio value into array
        |--------------------------------------------------------------------------
        */
        if (is_array($storedPortfolio)) {
            $portfolioImages = $storedPortfolio;
        } elseif (!empty($storedPortfolio)) {
            $decodedPortfolio = json_decode(
                $storedPortfolio,
                true
            );

            if (
                json_last_error() === JSON_ERROR_NONE &&
                is_array($decodedPortfolio)
            ) {
                $portfolioImages = $decodedPortfolio;
            } else {
                $portfolioImages = explode(
                    ',',
                    trim($storedPortfolio)
                );
            }
        }

        /*
        |--------------------------------------------------------------------------
        | Remove empty values
        |--------------------------------------------------------------------------
        */
        $portfolioImages = array_values(
            array_filter(
                $portfolioImages,
                function ($image) {
                    return !empty(
                        trim((string) $image)
                    );
                }
            )
        );
    @endphp

    @if(count($portfolioImages) > 0)

        <div class="row g-3 mt-2">

            @foreach($portfolioImages as $picture)

                @php
                    $portfolioImageUrl = null;

                    $storedImage = trim(
                        (string) $picture
                    );

                    /*
                    |--------------------------------------------------------------------------
                    | Get path from full URL or local path
                    |--------------------------------------------------------------------------
                    */
                    if (
                        str_starts_with(
                            $storedImage,
                            'http://'
                        ) ||
                        str_starts_with(
                            $storedImage,
                            'https://'
                        )
                    ) {
                        $storedPath = parse_url(
                            $storedImage,
                            PHP_URL_PATH
                        );
                    } else {
                        $storedPath = $storedImage;
                    }

                    /*
                    |--------------------------------------------------------------------------
                    | Get only filename
                    |--------------------------------------------------------------------------
                    */
                    $fileName = basename(
                        rawurldecode(
                            (string) $storedPath
                        )
                    );

                    /*
                    |--------------------------------------------------------------------------
                    | Create DigitalOcean URL
                    |--------------------------------------------------------------------------
                    */
                    if (!empty($fileName)) {
                        $portfolioImageUrl =
                            rtrim(
                                $digitalOceanBaseUrl,
                                '/'
                            ) .
                            '/portfolio/' .
                            rawurlencode($fileName);
                    }
                @endphp

                @if($portfolioImageUrl)

                    <div class="col-6 col-md-4 col-xl-3">

                        <div class="card h-100">

                            <div class="card-body p-2 text-center">

                                <img
                                    src="{{ $portfolioImageUrl }}"
                                    class="card-img-top rounded"
                                    alt="Portfolio image"
                                    style="
                                        width: 100%;
                                        height: 150px;
                                        object-fit: cover;
                                    "
                                    loading="lazy"
                                    onerror="
                                        this.style.display='none';
                                        this.nextElementSibling.style.display='block';
                                    "
                                >

                                <p
                                    class="text-danger mt-2"
                                    style="display:none;"
                                >
                                    Image not found
                                </p>

                                <small
                                    class="d-block text-truncate mt-2"
                                    title="{{ $fileName }}"
                                >
                                    {{ $fileName }}
                                </small>

                                <div class="mt-2">

                                    <a
                                        href="{{ $portfolioImageUrl }}"
                                        download="{{ $fileName }}"
                                        class="btn btn-sm btn-outline-primary"
                                        target="_blank"
                                    >
                                        <i class="ti tabler-download me-1"></i>
                                        View
                                    </a>

                                </div>

                            </div>

                        </div>

                    </div>

                @endif

            @endforeach

        </div>

    @else

        <p class="text-muted mt-3">
            No portfolio images available.
        </p>

    @endif

</div>
<!-- Portfolio Section Ends -->

                        </div>
                        <!-- Business details row ends -->

                    @else

                        <p class="text-muted">
                            No business profile available for this user.
                        </p>

                    @endif

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

<!-- View Profile and Cover Image Modal -->
<div
    class="modal fade zoom-in"
    id="ViewProfileModal"
    tabindex="-1"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
>
    <div class="modal-dialog modal-lg">

        <div class="modal-content">

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

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

            </div>

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

                <div class="row">

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

                        <div class="text-center">

                            <img
                                id="modalImage"
                                src=""
                                class="img-fluid img-responsive"
                                alt="Business image"
                            >

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>
</div>
<!-- View Profile Modal Ends -->


<!-- Accept Modal -->
<div
    class="modal fade"
    id="AcceptModal"
    tabindex="-1"
    aria-hidden="true"
>
    <div class="modal-dialog">

        <form
            method="POST"
            action="{{ route('accept_request') }}"
        >
            @csrf

            <input
                type="hidden"
                name="profile_id"
                id="accept_profile_id"
            >

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title">
                        Accept Service Request
                    </h5>

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

                </div>

                <div class="modal-body">

                    Are you sure you want to
                    <strong>accept</strong>
                    this request?

                </div>

                <div class="modal-footer">

                    <button
                        type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal"
                    >
                        Cancel
                    </button>

                    <button
                        type="submit"
                        class="btn btn-success"
                    >
                        Accept
                    </button>

                </div>

            </div>

        </form>

    </div>
</div>
<!-- Accept Modal Ends -->


<!-- Decline Modal -->
<div
    class="modal fade"
    id="DeclineModal"
    tabindex="-1"
    aria-hidden="true"
>
    <div class="modal-dialog">

        <form
            method="POST"
            action="{{ route('decline_request') }}"
        >
            @csrf

            <input
                type="hidden"
                name="profile_id"
                id="decline_profile_id"
            >

            <div class="modal-content">

                <div class="modal-header">

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

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

                </div>

                <div class="modal-body">

                    Are you sure you want to
                    <strong>decline</strong>
                    this request?

                </div>

                <div class="modal-footer">

                    <button
                        type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal"
                    >
                        Cancel
                    </button>

                    <button
                        type="submit"
                        class="btn btn-danger"
                    >
                        Decline
                    </button>

                </div>

            </div>

        </form>

    </div>
</div>
<!-- Decline Modal Ends -->

</div>
<!-- Container Fluid Ends -->


<script>
    document.addEventListener('DOMContentLoaded', function () {
        const downloadProfileButton =
            document.getElementById('downld-profile');

        if (downloadProfileButton) {
            downloadProfileButton.addEventListener(
                'click',
                function () {
                    const profileImage =
                        document.getElementById('bus-prof-img');

                    if (!profileImage || !profileImage.src) {
                        return;
                    }

                    const imageUrl = profileImage.src;

                    const imageName = decodeURIComponent(
                        imageUrl.substring(
                            imageUrl.lastIndexOf('/') + 1
                        )
                    );

                    const downloadLink =
                        document.createElement('a');

                    downloadLink.href = imageUrl;
                    downloadLink.download = imageName;
                    downloadLink.target = '_blank';

                    document.body.appendChild(downloadLink);

                    downloadLink.click();

                    document.body.removeChild(downloadLink);
                }
            );
        }

        const viewButtons =
            document.querySelectorAll('.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.setAttribute(
                            'src',
                            imageSource
                        );
                    }
                }
            );
        });
    });

    function setAcceptId(element) {
        const profileId =
            element.getAttribute('data-item-id');

        document.getElementById(
            'accept_profile_id'
        ).value = profileId;
    }

    function setDeclineId(element) {
        const profileId =
            element.getAttribute('data-item-id');

        document.getElementById(
            'decline_profile_id'
        ).value = profileId;
    }
</script>

@endsection

@section('footer')
@endsection