@extends('user.layouts')
@section('title', 'Business Profile View')
@section('header')


@endsection
@section('content')




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


        <div class="row">
            <div class="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">P321616</h3>
                </div>
            </div>
        </div>


        <div class="row mt-4">
            <div class="col-xl-12 col-lg-12">
                <div class="card blured-card">
                    <div class="card-body">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button style="min-width:200px;" class="nav-link active" id="profile-tab"
                                    data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab"
                                    aria-controls="profile-tab-pane" aria-selected="true">Profile</button>
                            </li>
                        </ul>
                        <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">
                                        <form action="#">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label for="category name" class="form-label">Category Name</label>
                                                        <input type="text" class="form-control" id="category-name"
                                                            placeholder="" value="{{ $view_business->category_name }}">
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label for="business name" class="form-label">Business Name</label>
                                                        <input type="text" class="form-control" id="business-name"
                                                            placeholder="" value=" {{ $view_business->business_name }}">
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label for="pnumber" class="form-label">Phone Number</label>
                                                        <input type="tel" class="form-control" id="pnumber"
                                                            placeholder="" value="{{ $view_business->phone_number }}">
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label for="alter pnumber" class="form-label">Alternative Phone
                                                            No</label>
                                                        <input type="tel" class="form-control" id="pnumber"
                                                            placeholder=""
                                                            value="{{ $view_business->alternative_phone_number }}">
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label for="whatsapp number" class="form-label">Whatsapp No</label>
                                                        <input type="tel" class="form-control" id="whatsapp-number"
                                                            placeholder="" value="{{ $view_business->whatsapp_number }}">
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <h5 class="form-sub-heading mt-3 mb-4">Business Location</h5>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="mb-3">
                                                            <label for="district" class="form-label">District</label>
                                                            <input type="text" class="form-control" id="district"
                                                                placeholder="" value="{{ $view_business->district }}">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="mb-3">
                                                            <label for="village" class="form-label">Village</label>
                                                            <input type="text" class="form-control" id="village"
                                                                placeholder="" value="{{ $view_business->village }}">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="mb-3">
                                                            <label for="place" class="form-label">Place</label>
                                                            <input type="text" class="form-control" id="place"
                                                                placeholder="" value="{{ $view_business->place }}">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                        <!-- Form Ends -->
                                    </div>
                                </div>
                                <!-- Businness Details Row -->
                                <div class="row business-details">
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 mb-3">
                                        <h5 class="form-sub-heading mt-3 mb-4">Business Profile</h5>
                                        <img src="{{ asset($view_business->business_profile) }}"
                                            class="img-fluid img-responsive business-prof-img" id="bus-prof-img">
                                        <div class="mt-3">
                                            <div class="d-flex align-items-center">
                                                <div class="img-file-name">Profile.svg</div>
                                                <div class="d-flex align-items-center ms-2">
                                                    <button data-bs-toggle="modal" data-bs-target="#ViewProfileModal" 
                                                    data-img-src="{{ asset($view_business->business_profile) }}" 
                                                    class="btn transparent-btn view-btn">
                                                <i class="fa-regular fa-eye view-icon"></i>
                                            </button>
                                                    {{-- <button class="btn transparent-btn" id="downld-profile"><i
                                                            class="fa-solid fa-download download-icon"></i></button> --}}
                                                                <a href="{{ asset($view_business->business_profile) }}" 
   download 
   class="btn transparent-btn">
   <i class="fa-solid fa-download download-icon"></i>
</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 mb-3">
                                        <h5 class="form-sub-heading mt-3 mb-4">Business Cover Photo</h5>
                                        <img src="{{ asset($view_business->business_cover_photo) }}"
                                            class="img-fluid img-responsive business-cover-img">
                                        <div class="mt-3">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div class="img-file-name">Cover.jpg</div>
                                                <div class="d-flex align-items-center ms-2">
                                                    <button data-bs-toggle="modal" data-bs-target="#ViewProfileModal" 
                                                    data-img-src="{{ asset($view_business->business_cover_photo) }}" 
                                                    class="btn transparent-btn view-btn">
                                                <i class="fa-regular fa-eye view-icon"></i>
                                            </button>
                                                    
                                                                 <a href="{{ asset($view_business->business_cover_photo) }}" 
   download 
   class="btn transparent-btn">
   <i class="fa-solid fa-download download-icon"></i>
</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-12 mt-3">
                                        <h5 class="form-sub-heading mt-3 mb-4">Description</h5>
                                        <p class="work-description">
                                            {{ $view_business->description }}
                                        </p>
                                    </div>
                                    <div class="col-lg-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 mb-3">
                                        <h5 class="form-sub-heading mt-5 mb-4">Add Service</h5>
                                     
                                        <div>
                                            <ul class="services-ul">
                                                @php
                                                    $services = is_array($view_business->service) 
                                                                ? $view_business->service 
                                                                : explode(',', trim(str_replace(['[', ']', '"'], '', $view_business->service)));
                                                @endphp
                                        
                                                @if (!empty($services))
                                                    @foreach ($services as $service)
                                                        <li>{{ trim($service) }}</li>
                                                    @endforeach
                                                @else
                                                    <li>No services available</li>
                                                @endif
                                            </ul>
                                        </div>
                                    </div>
                                    {{-- <div class="col-lg-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 mb-3">
                                        <h5 class="form-sub-heading mt-5 mb-4">Gallery</h5>
                                        <div class="row">
                                            @if(isset($view_business->gallery) && !empty($view_business->gallery))
                                                @foreach ($view_business->gallery as $picture)
                                                    <div class="col-xl-6 col-lg-6 col-6">
                                                        <img src="{{ asset($picture) }}" class="img-fluid img-responsive gallery-img">
                                                        <div class="mt-3">
                                                            <div class="d-flex justify-content-between align-items-center">
                                                                <div class="img-file-name">Cover.jpg</div>
                                                                <div class="d-flex align-items-center ms-2">
                                                                    <button data-bs-toggle="modal" data-bs-target="#ViewProfileModal" 
                                                                            data-img-src="{{ asset($picture) }}" 
                                                                            class="btn transparent-btn view-btn">
                                                                        <i class="fa-regular fa-eye view-icon"></i>
                                                                    </button>
                                                                    <button class="btn transparent-btn"></button>    <!-- Businness Details Row -->
                                                                        <div class="row business-details">
                                                                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 mb-3">
                                                                                <h5 class="form-sub-heading mt-3 mb-4">Business Profile</h5>
                                                                                <img src="{{ asset($view_business->business_profile) }}"
                                                                                    class="img-fluid img-responsive business-prof-img" id="bus-prof-img">
                                                                                <div class="mt-3">
                                                                                    <div class="d-flex align-items-center">
                                                                                        <div class="img-file-name">Profile.svg</div>
                                                                                        <div class="d-flex align-items-center ms-2">
                                                                                            <button data-bs-toggle="modal" data-bs-target="#ViewProfileModal" 
                                                                                            data-img-src="{{ asset($view_business->business_profile) }}" 
                                                                                            class="btn transparent-btn view-btn">
                                                                                        <i class="fa-regular fa-eye view-icon"></i>
                                                                                    </button>
                                                                                            <button class="btn transparent-btn" id="downld-profile"><i
                                                                                                    class="fa-solid fa-download download-icon"></i></button>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-lg-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 mb-3">
                                                                                <h5 class="form-sub-heading mt-3 mb-4">Business Cover Photo</h5>
                                                                                <img src="{{ asset($view_business->business_cover_photo) }}"
                                                                                    class="img-fluid img-responsive business-cover-img">
                                                                                <div class="mt-3">
                                                                                    <div class="d-flex justify-content-between align-items-center">
                                                                                        <div class="img-file-name">Cover.jpg</div>
                                                                                        <div class="d-flex align-items-center ms-2">
                                                                                            <button data-bs-toggle="modal" data-bs-target="#ViewProfileModal" 
                                                                                            data-img-src="{{ asset($view_business->business_cover_photo) }}" 
                                                                                            class="btn transparent-btn view-btn">
                                                                                        <i class="fa-regular fa-eye view-icon"></i>
                                                                                    </button>
                                                                                            <button class="btn transparent-btn"  id="downld-profile" ><i
                                                                                                    class="fa-solid fa-download download-icon"></i></button>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>>
                                                                        <i class="fa-solid fa-download download-icon"></i>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @else
                                                <p>No images available.</p>
                                            @endif
                                        </div>
                                        
                                    </div>
                                </div> --}}
                                  <div class="col-lg-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 mb-3">
                                        <h5 class="form-sub-heading mt-5 mb-4">Gallery</h5>
                                        <div class="row">
                                            @if(is_array($view_business->gallery))
                                                @foreach($view_business->gallery as $image)
                                                    <div class="col-xl-6 col-lg-6 col-6 mb-4">
                                                        <img src="{{ $image }}" class="img-fluid img-responsive gallery-img">
                                                        <div class="mt-3">
                                                            <div class="d-flex justify-content-between align-items-center">
                                                                <div class="img-file-name">{{ basename($image) }}</div> <!-- Display the image file name -->
                                                                <div class="d-flex align-items-center ms-2">
                                                                    <button data-bs-toggle="modal" data-bs-target="#ViewProfileModal"
                                                                        data-img-src="{{ $image }}"
                                                                        class="btn transparent-btn view-btn">
                                                                        <i class="fa-regular fa-eye view-icon"></i>
                                                                    </button>
                                                                    {{-- <button class="btn transparent-btn">
                                                                        <i class="fa-solid fa-download download-icon"></i>
                                                                    </button> --}}
                                                                    <a href="{{ asset($view_business->image) }}" 
   download 
   class="btn transparent-btn">
   <i class="fa-solid fa-download download-icon"></i>
</a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @else
                                                <div class="col-xl-6 col-lg-6 col-6 mb-4">
                                                    <img src="{{ $view_business->gallery }}" class="img-fluid img-responsive gallery-img">
                                                    <div class="mt-3">
                                                        <div class="d-flex justify-content-between align-items-center">
                                                            <div class="img-file-name">{{ basename($view_business->gallery) }}</div> <!-- Display the image file name -->
                                                            <div class="d-flex align-items-center ms-2">
                                                                <button data-bs-toggle="modal" data-bs-target="#ViewProfileModal"
                                                                    data-img-src="{{ $view_business->gallery }}"
                                                                    class="btn transparent-btn view-btn">
                                                                    <i class="fa-regular fa-eye view-icon"></i>
                                                                </button>
                                                                <button class="btn transparent-btn">
                                                                    <i class="fa-solid fa-download download-icon"></i>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                            </div>
                        </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">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
        <!--Modal Ends-->

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


    <script>
        document.getElementById("downld-profile").addEventListener("click", function() {
            var imgSrc = document.getElementById("bus-prof-img").src;
            var imgName = imgSrc.substring(imgSrc.lastIndexOf('/') + 1);
            var link = document.createElement('a');
            link.href = imgSrc;
            link.download = imgName;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });
    </script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const viewButtons = document.querySelectorAll('.view-btn');
        viewButtons.forEach(button => {
            button.addEventListener('click', function() {
                const imgSrc = this.getAttribute('data-img-src');
                document.getElementById('modalImage').setAttribute('src', imgSrc);
            });
        });
    });
</script>



@endsection
@section('footer')



@endsection