@extends('layouts.app')

@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/custom_uploader.css') }}">
@endpush

@section('title')
    @lang('translate.adds')
@endsection

@section('page_header')
    <!-- Basic button -->
    <div class="page-header page-header-light border rounded mb-3">
        <div class="page-header-content d-flex">
            <div class="page-title">
                <h5 class="mb-0">@lang('translate.section_adds')</h5>
                <div class="text-muted mt-1">@lang('translate.adds_info')</div>
            </div>
            <div class="my-auto ms-auto">

                @if($add->published == 0)
                    <a  class="btn btn-outline-success" href="{{route('add.change_publish',[$add->id])}}">Publish</a>
                @else
                    <a  class="btn btn-outline-danger" href="{{route('add.change_publish',[$add->id])}}">Un Publish</a>
                @endif

            </div>
        </div>
        <div class="page-header-content border-top">
            <div class="breadcrumb">
                <a href="/" class="breadcrumb-item py-2">@lang('translate.home')</a>
                <span class="breadcrumb-item active py-2">@lang('translate.adds')</span>
            </div>
        </div>
    </div>
    <!-- /basic button -->
@endsection

@section('content')
    <!-- Content area -->
    <div class="content">

        <!-- Inner container -->
        <div class="d-flex align-items-stretch align-items-lg-start flex-column flex-lg-row">

            <!-- Left content -->
            <div class="flex-1 order-2 order-lg-1">

                <!-- Post -->
                <div class="card">
                    <div class="card-body">
                        <div class="mb-4">
                            <div class="mb-3 text-center">
                                <a href="#" class="d-inline-block">
                                    <img src="{{$thumbnail_image}}" class="img-fluid rounded" alt="">
                                </a>
                            </div>

                            <h3 class="card-title pt-2 mb-1">
                                <a href="#" class="text-body">{{$add->title}}</a>
                            </h3>

                            <ul class="list-inline list-inline-bullet text-muted mb-3">
                                <li class="list-inline-item">By <a href="#">{{$add?->User?->fullname}}</a></li>
                                <li class="list-inline-item">{{\Carbon\Carbon::parse($add->created_at)->format('Y-m-d')}}</li>

                            </ul>

                            <div class="mb-3">
                                {{$add->description}}
                            </div>

                        </div>

                        <div class="mb-4">

                            <table class="table">
                                <thead>
                                @foreach($attribute_values as $values)
                                    @if($values['type'] != 'multi_select')
                                        @if($values['type'] == 'single_select')
                                            <tr>
                                                <th>{{$values['key'] ?? ""}}</th>
                                                <th>
                                                    @php

                                                        $attr_value = \App\Models\AttributeValue::find($values['values']);
                                                        $attr_value_data = $attr_value?->value;
                                                    @endphp

                                                    {{$attr_value_data}}
                                                </th>
                                            </tr>
                                        @else
                                            <tr>
                                                <th>{{$values['key'] ?? ""}}</th>
                                                <th>{{$values['values'] ?? ""}}</th>
                                            </tr>
                                        @endif

                                    @endif
                                @endforeach
                                </thead>

                            </table>


                        </div>

                        @foreach($attribute_values as $values)
                            @if($values['type'] == 'multi_select')
                                <div>


                                    <h5>{{$values['key']}}</h5>


                                    <div class="row">

                                        @php
                                                $attr_values_multi = \App\Models\AttributeValue::whereIn('id',explode(',' , $values['values']))->get();

                                        @endphp

                                        @foreach($attr_values_multi as $multi)
                                            <div class="col-lg-4">
                                                <ul class="list list-unstyled">
                                                    <li>
                                                        <i class="ph-check-circle text-success me-2"></i>
                                                        {{$multi->value}}
                                                    </li>

                                                </ul>
                                            </div>
                                        @endforeach


                                    </div>
                                </div>

                            @endif

                        @endforeach

                    </div>
                </div>
                <!-- /post -->


                <!-- About author -->
                <div class="card">
                    <div class="card-header d-sm-flex border-bottom-0 pb-0">
                        <h5 class="mb-0">About the author</h5>

                    </div>

                    <div class="card-body d-flex flex-column flex-lg-row">
                        <div class="me-lg-3 mb-2 mb-lg-0">
                            <a href="#">
                                <img src="{{$add?->User?->image}}" class="rounded-circle" width="40" height="40" alt="">
                            </a>
                        </div>

                        <div class="flex-fill">
                            <h6 class="mb-1">{{$add?->User?->fullname}}</h6>
                            <p>{{$add?->User?->email}}</p>
                            <p>{{$add?->User?->phone}}</p>


                        </div>
                    </div>
                </div>
                <!-- /about author -->


            </div>
            <!-- /left content -->


            <!-- Right sidebar component -->
            <div
                class="sidebar sidebar-component sidebar-expand-lg bg-transparent shadow-none order-1 order-lg-2 ms-lg-3 mb-3">

                <!-- Sidebar content -->
                <div class="sidebar-content">


                    <!-- Categories -->
                    <div class="card">
                        <div class="sidebar-section-header border-bottom">
                            <span class="fw-semibold">Categories</span>
                        </div>

                        <div class="nav nav-sidebar">

                            @foreach($categories as $category)
                                <li class="nav-item">
                                    <a href="#" class="nav-link">
                                        <i class="ph-file-text me-2"></i>
                                        {{$category->title}}
                                        <span
                                            class="text-muted fs-sm fw-normal ms-auto">{{$category->multi_adds_count}}</span>
                                    </a>
                                </li>
                            @endforeach


                        </div>
                    </div>
                    <!-- /categories -->


                    <!-- Photos from Flickr -->
                    <div class="card">
                        <div class="sidebar-section-header border-bottom">
                            <span class="fw-semibold">Photos from Flickr</span>
                        </div>

                        <div class="sidebar-section-body">
                            <div class="row g-0">


                                @foreach($images as $image)
                                    <div class="col">
                                        <div class="card-img-actions">
                                            <a href="{{$image}}" class="text-white"
                                               data-bs-popup="lightbox">
                                                <img class="img-fluid rounded-top-start"
                                                     src="{{$image}}" alt="">
                                                <span class="card-img-actions-overlay rounded-top-start">
															<i class="ph-plus"></i>
														</span>
                                            </a>
                                        </div>
                                    </div>
                                @endforeach


                            </div>
                        </div>
                    </div>
                    <!-- /photos from Flickr -->


                </div>
                <!-- /sidebar content -->

            </div>
            <!-- /right sidebar component -->

        </div>
        <!-- /inner container -->

    </div>
    <!-- /content area -->
@endsection
@push('scripts')
    <script src="{{asset('global_assets/js/vendor/editors/quill/quill.min.js')}}"></script>
    <script src="{{asset('global_assets/js/vendor/media/glightbox.min.js')}}"></script>

    <script src="{{asset('global_assets/demo/pages/blog_single.js')}}"></script>
    @include('adds.script')
@endpush