@extends('voyager::master')

@section('page_title', __('voyager::generic.viewing').' '.$dataType->getTranslatedAttribute('display_name_plural'))

@section('page_header')
<style type="text/css">
    .pl {
    top: 10px;
    width: max-content;
}

.bgClassMain_active {
    background-color: #489304 !important;
}

.set_color {
    position: relative;
    border-radius: 5px;
    width: max-content;
    top: -6px;
    text-align: center;
    color: #fff;
    line-height: 10px;
    padding: 3px;
    font-size: 9px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
}

.bgClassMain_soldout{
    background-color: #ff0000 !important;
}
.bgClassMain_active{
    background-color: #489304 !important;
}
.bgClassMain_approbation{
    background-color: #b2b502 !important;
}
.bgClassMain_inrepair{
    background-color: #201ac2 !important;
}
.bgClassMain_inreview{
    background-color: #eb970d !important;
}
.bgClassMain_inactive{
    background-color: #000000 !important;
}

.bgClassMain_jobrecived{
    background-color: #ff0000 !important;
}

.bgClassMain_inWorkshop{
    background-color: #f3a612 !important;
}

.bgClassMain_readyToCollection{
    background-color: #489304 !important;
}

.bgClassMain_requestForCollection{
    background-color: Blue !important;
}

.bgClassMain_doneJobs{
    background-color: Purple !important;
}

.bgClassMain_cancelled{
    background-color: Gray !important;
}

.bgClassMain_postage{
    background-color: #cb0996 !important;
}
.bgClassMain_new{
    background-color:#c4c200 !important;
}


.section-grid{
   display: flex; 
   padding-left: 25px;
   padding-right: 25px;
}
.grid-prod{
/*  flex: 1 1 auto;*/
  display: flex; 
  flex-flow: row wrap;  
}
.prod-grid{
/*  flex: 1 1 21%;*/
  margin:1%;
  padding:10px;
  border: 2px solid #5a5a5a38;
  height: 450px;
  width: 259px;
}

.prod-grid img{
  width:236px;
  height: 215px;
}

#content .bloc .content h3 {
    color: #282828;
    font-size: 19px !important;
}

@media (min-width : 320px) and (max-width : 480px) { 
  .section-list, .buttons{
    display: none;
  }
}

.flex-container {   
    display: flex;          /* Enable flexbox layout */
   margin: 8px 1px 1px 1px;
}

.flex-item {
    flex: none;
    margin: 0 2px;
    border: 1px solid #5a5a5a7d;
        height: 23px;
    width: 23px;
}

.button-container {
            display: flex;               /* Use flexbox for layout */
            justify-content: flex-end;   /* Align buttons to the right */
            padding: 10px;              /* Add some padding */
        }

        #div2 { display: none; }

        .buttons {
            cursor: pointer; /* Change cursor to pointer for better UX */
            margin-left: -25px; /* Space between icons */
            font-size: 24px; /* Increase icon size (adjust as needed) */
        }

#content .bloc .content p{
    padding: 0;
}

.fade-image {
    transition: opacity 0.5s ease-in-out; /* Adjust the duration as needed */
    opacity: 1; /* Initial opacity */
}

.fade-image.hidden {
    opacity: 0; /* Hidden state */
}
</style>
    <div class="container-fluid">
        <h1 class="page-title">
            <i class="{{ $dataType->icon }}"></i> {{ $dataType->getTranslatedAttribute('display_name_plural') }}
        </h1>
        @can('add', app($dataType->model_name))
            <a href="{{ route('voyager.'.$dataType->slug.'.create') }}" class="btn btn-success btn-add-new">
                <i class="voyager-plus"></i> <span>{{ __('voyager::generic.add_new') }}</span>
            </a>
        @endcan
        @can('delete', app($dataType->model_name))
            @include('voyager::partials.bulk-delete')
        @endcan
        @can('edit', app($dataType->model_name))
            @if(!empty($dataType->order_column) && !empty($dataType->order_display_column))
                <a href="{{ route('voyager.'.$dataType->slug.'.order') }}" class="btn btn-primary btn-add-new">
                    <i class="voyager-list"></i> <span>{{ __('voyager::bread.order') }}</span>
                </a>
            @endif
        @endcan
        @can('delete', app($dataType->model_name))
            @if($usesSoftDeletes)
                <input type="checkbox" @if ($showSoftDeleted) checked @endif id="show_soft_deletes" data-toggle="toggle" data-on="{{ __('voyager::bread.soft_deletes_off') }}" data-off="{{ __('voyager::bread.soft_deletes_on') }}">
            @endif
        @endcan
        @foreach($actions as $action)
            @if (method_exists($action, 'massAction'))
                @include('voyager::bread.partials.actions', ['action' => $action, 'data' => null])
            @endif
        @endforeach
        @include('voyager::multilingual.language-selector')
    </div>
@stop

@section('content')
<style type="text/css">
    .view-container {
    margin-top: 20px;
}

.grid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.grid-item {
    width: calc(33.333% - 20px); /* Adjust for 3 columns */
    background-color: #f9f9f9;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
  .view-container h3 {
    color: #282828;
    font-size: 19px !important;
}
</style>
    <div class="page-content browse container-fluid">
        @include('voyager::alerts')
        @php
        $getbiewstyle = request('view') ? request('view') : 'list';
        @endphp
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-bordered">
                    <div class="panel-body">
                        @if ($isServerSide)
                            <form method="get" class="form-search">

                                <input type="hidden" name="view" value="{{$getbiewstyle }}">
                                <div id="search-input">
                                    <div class="col-2">
                                        <select id="search_key" name="key">
                                            @foreach($searchNames as $key => $name)
                                                <option value="{{ $key }}" @if($search->key == $key || (empty($search->key) && $key == $defaultSearchKey)) selected @endif>{{ $name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-2">
                                        <select id="filter" name="filter">
                                            <option value="contains" @if($search->filter == "contains") selected @endif>{{ __('voyager::generic.contains') }}</option>
                                            <option value="equals" @if($search->filter == "equals") selected @endif>=</option>
                                        </select>
                                    </div>
                                    <div class="input-group col-md-12">
                                        <input type="text" class="form-control" placeholder="{{ __('voyager::generic.search') }}" name="s" value="{{ $search->value }}">
                                        <span class="input-group-btn">
                                            <button class="btn btn-info btn-lg" type="submit">
                                                <i class="voyager-search"></i>
                                            </button>
                                        </span>
                                    </div>
                                </div>
                                @if (Request::has('sort_order') && Request::has('order_by'))
                                    <input type="hidden" name="sort_order" value="{{ Request::get('sort_order') }}">
                                    <input type="hidden" name="order_by" value="{{ Request::get('order_by') }}">
                                @endif
                            </form>
                        @endif

                        <div class="table-responsive">
                           <!--  <div class="view-toggle">
                                <button id="listViewBtn" onclick="setView('list')">List View</button>
                                <button id="gridViewBtn" onclick="setView('grid')">Grid View</button>
                            </div> -->
                            <div class="button-container">
                            <div class="view-toggle">
                                <a href="{{ request()->fullUrlWithQuery(['view' => 'grid']) }}" class="btn btn-default"><i class="fas fa-th"></i></a>
                                <a href="{{ request()->fullUrlWithQuery(['view' => 'list']) }}" class="btn btn-default"><i class="fas fa-list"></i></a>
                            </div>
                           <!--  <i class="voyager-list" id="listViewBtn" style="font-size: 30px;" aria-hidden="true"  onclick="setView('list')" title="Show List View"></i> 
                            <i class="voyager-window-list" style="font-size: 30px;" onclick="setView('grid')" id="gridViewBtn" aria-hidden="true" title="Show Grid View"></i> -->
                            </div>
                            <div id="tableView" style="{{ $getbiewstyle === 'list' ? 'display: block;' : 'display: none;' }}" class="view-container">
                            <table id="dataTable" class="table table-hover">
                                <thead>
                                    <tr>
                                        @if($showCheckboxColumn)
                                            <th class="dt-not-orderable">
                                                <input type="checkbox" class="select_all">
                                            </th>
                                        @endif
                                        @foreach($dataType->browseRows as $row)
                                        <th>
                                            @if ($isServerSide && in_array($row->field, $sortableColumns))
                                                <a href="{{ $row->sortByUrl($orderBy, $sortOrder) }}">
                                            @endif
                                            {{ $row->getTranslatedAttribute('display_name') }}
                                            @if ($isServerSide)
                                                @if ($row->isCurrentSortField($orderBy))
                                                    @if ($sortOrder == 'asc')
                                                        <i class="voyager-angle-up pull-right"></i>
                                                    @else
                                                        <i class="voyager-angle-down pull-right"></i>
                                                    @endif
                                                @endif
                                                </a>
                                            @endif
                                        </th>
                                        @endforeach
                                        <th class="actions text-right dt-not-orderable">{{ __('voyager::generic.actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($dataTypeContent as $data)
                                    <tr>
                                        @if($showCheckboxColumn)
                                            <td>
                                                <input type="checkbox" name="row_id" id="checkbox_{{ $data->getKey() }}" value="{{ $data->getKey() }}">
                                            </td>
                                        @endif
                                        @foreach($dataType->browseRows as $row)
                                            @php
                                            if ($data->{$row->field.'_browse'}) {
                                                $data->{$row->field} = $data->{$row->field.'_browse'};
                                            }
                                            @endphp
                                            <td>
                                                @if (isset($row->details->view_browse))
                                                    @include($row->details->view_browse, ['row' => $row, 'dataType' => $dataType, 'dataTypeContent' => $dataTypeContent, 'content' => $data->{$row->field}, 'view' => 'browse', 'options' => $row->details])
                                                @elseif (isset($row->details->view))
                                                    @include($row->details->view, ['row' => $row, 'dataType' => $dataType, 'dataTypeContent' => $dataTypeContent, 'content' => $data->{$row->field}, 'action' => 'browse', 'view' => 'browse', 'options' => $row->details])
                                                @elseif($row->type == 'image')
                                                    @if($row->field == 'image')