@extends('admin.layouts.main')

@section('content')
<div class="page-wrapper">
    <!-- ============================================================== -->
    <!-- Container fluid  -->
    <!-- ============================================================== -->
    <div class="container-fluid">
        <!-- ============================================================== -->
        <!-- Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <div class="row page-titles">
            <div class="col-md-5 align-self-center">
                <h3 class="text-themecolor">Business Profile</h3>
            </div>
            <div class="col-md-7 align-self-center text-right">
                <div class="d-flex justify-content-end align-items-center">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ url('dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item active">
                            <a href="{{ url('business') }}" class="text-cyan">Business Profile</a>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- End Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <!-- End Row -->
        <div class="row">
            <!-- Column -->
            <div class="col-lg-4 col-xlg-3 col-md-5">
            @include('admin.includes.alert')
                <div class="card"> <img class="card-img" src="{{ url('/') }}/assets/images/background/socialbg.jpg" style="object-fit: cover;" height="350" alt="Card image">
                    <div class="card-img-overlay card-inverse text-white social-profile d-flex justify-content-center">
                        <div class="align-self-center">
                            <img src="{{ $data->picture_url != null ? $data->picture_url : url('assets/images/logo1.png') }}" class="img-circle mb-2" 
                            style="width: 35%; object-fit: cover;" >
                            <h4 class="card-title">{{ $data->user->name }}</h4>
                            <h6 class="card-subtitle text-white">{{ $data->email }}</h6>
                            <h6 class="card-subtitle text-white">{{ $data->phone }}</h6>
                            <h6 class="card-subtitle text-white">{{ $data->business_name }}</h6>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-8 col-xlg-9 col-md-7">
                <div class="card">
                    <ul class="nav nav-tabs profile-tab" role="tablist">
                        <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#profile" role="tab">Profile</a> </li>
                        <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#business-Cover" role="tab">Business Profile Cover</a> </li>
                        <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#gallery" role="tab">Gallery</a> </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="profile" role="tabpanel">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-3 col-xs-6 b-r"> <strong>Username</strong>
                                        <br>
                                        <p class="text-muted">{{ $data->user->name }}</p>
                                    </div>
                                    <div class="col-md-3 col-xs-6 b-r"> <strong>Email</strong>
                                        <br>
                                        <p class="text-muted">{{ $data->email }}</p>
                                    </div>
                                    <div class="col-md-3 col-xs-6"> <strong>Phone</strong>
                                        <br>
                                        <p class="text-muted">{{ $data->phone }}</p>
                                    </div>

                                    <div class="col-md-4 col-xs-6"> <strong>Location</strong>
                                        <br>
                                        <p class="text-muted">{{ $data->address }}</p>
                                    </div>

                                    <div class="col-md-3 col-xs-6"> <strong>State</strong>
                                        <br>
                                        <p class="text-muted">{{ $data->state }}</p>
                                    </div>
                                    <div class="col-md-3 col-xs-6"> <strong>City</strong>
                                        <br>
                                        <p class="text-muted">{{ $data->city }}</p>
                                    </div>
                                    <div class="col-md-3 col-xs-6"> <strong>Zip Code</strong>
                                        <br>
                                        <p class="text-muted">{{ $data->zip_code }}</p>
                                    </div>
                                    <div class="col-md-3 col-xs-6"> <strong>Start Time</strong>
                                        <br>
                                        <p class="text-muted">{{ $data->time_from }}</p>
                                    </div>

                                    <div class="col-md-3 col-xs-6"> <strong>End Time</strong>
                                        <br>
                                        <p class="text-muted">{{ $data->time_to }}</p>
                                    </div>

                                    <div class="col-md-3 col-xs-6"> <strong>Days</strong>
                                        <br>
                                        <p class="text-muted">{{ $data->days }} Day</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane" id="business-Cover" role="tabpanel">
                            <div class="card-body">
                                <div class="profiletimeline">

                                    <div class="row">
                                        <div class="col-sm-4">
                                            @if( @$data->cover )

                                            <p class="text-center mt-4">

                                                @foreach($data->cover as $cover)

                                                <a href="{{ $cover->cover_url }}" target="blank"> Click to view</a>

                                                <img src="{{ $cover->cover_url }}" alt="" class="h-50 w-100">

                                                @endforeach
                                            </p>
                                            @else
                                            <p class="text-center mt-4">Not Uploaded</p>
                                            @endif

                                        </div>

                                    </div>

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

                        <div class="tab-pane" id="gallery" role="tabpanel">
                            <div class="card-body">
                                <div class="profiletimeline">
                                    <div class="row">
                                        <div class="col-sm-4">
                                        @if( @$data->pictures )

                                            <p class="text-center mt-4">

                                                @foreach($data->pictures as $picture)

                                                <a href="{{ $picture->image_url }}" target="blank"> Click to view</a>

                                                <img src="{{ $picture->image_url }}" alt="" class="h-50 w-100">

                                                @endforeach
                                            </p>
                                            @else
                                            <p class="text-center mt-4">Not Uploaded</p>
                                        @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Row -->
        <!-- ============================================================== -->
        <!-- End PAge Content -->
        <!-- ============================================================== -->
    </div>
    <!-- ============================================================== -->
    <!-- End Container fluid  -->
    <!-- ============================================================== -->
</div>

@endsection
@push('script')
<script>
    $(document).ready(function() {

    });
</script>
@endpush