@extends('layouts.master')

@section('title', 'Dashboard')

@push('css')
    <style>
        .categories-section {
            display: flex;
            width: 100%;
            overflow: auto;
        }

        .categories-section::-webkit-scrollbar {
            height: 4px;
        }

        .categories-section::-webkit-scrollbar-track {
            background-color: rgba(217, 217, 217, 0.2);
        }

        .categories-section::-webkit-scrollbar-thumb {
            background-color: #D9D9D9;
            border-radius: 8px;
        }

        .categories-section::-webkit-scrollbar-thumb:hover {
            background-color: rgba(58, 58, 58, 0.5);
        }

        .category_img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: #ececec;
            padding: 6px;
            margin-bottom: 0.25rem;
            object-fit: cover;
        }

        .category_name {
            font-size: 11px;
            text-align: center;
            color: #000;
        }

        .asset_item a {
            color: #66615b;
        }

        .asset_img {
            width: 240px;
            border-radius: 8px;
        }

        .asset_name {
            font-weight: 500;
            font-size: 16px;
            color: #000;
        }

        .asset_status_1,
        .asset_status_2,
        .asset_status_5 {
            font-weight: 500;
            color: #bf032a;
        }

        .asset_status_3,
        .asset_status_6 {
            color: #c69400;
        }

        .asset_status_4 {
            color: #42A084;
        }
    </style>
@endpush

@section('content')
    <div class="content p-4">
        <div class="row categories-section mx-0 mb-3">
            <div class="col-auto">
                <a href="{{ route('main') }}">
                    <img src="{{ asset('upload/asset_categories/all-2.png') }}" class="category_img img-fluid">
                    <div class="category_name">Semua</div>
                </a>
            </div>
            @foreach ($categories as $category)
                <div class="col-auto">
                    <a href="{{ route('main') }}?category_id={{ $category->id }}">
                        <img src="{{ $category->icon }}" class="category_img img-fluid">
                        <div class="category_name">{{ $category->name }}</div>
                    </a>
                </div>
            @endforeach
        </div>

        <div class="row">
            @forelse ($assets as $asset)
                <div class="col-md-3">
                    <div class="asset_item mb-4">
                        @can('show-Asset')
                            <a href="{{ route('assets.show', $asset->id) }}">
                                <img src="{{ asset($asset->photo) }}" class="asset_img img-fluid">
                                <div class="asset_name">{{ $asset->name }}</div>
                                <div class="asset_status_{{ $asset->status }} fw-bold">{{ $asset->status_name }}</div>
                                <div>{{ $asset->brand_name }} &bull; {{ $asset->cost }} m<sup>2</sup></div>
                                <div>{{ $asset->city_name }}</div>
                                <div>{{ $asset->category_name }}</div>
                            </a>
                        @else
                            <img src="{{ asset($asset->photo) }}" class="asset_img img-fluid">
                            <div class="asset_name">{{ $asset->name }}</div>
                            <div class="asset_status_{{ $asset->status }}">{{ $asset->status_name }}</div>
                            <div>{{ $asset->brand_name }} &bull; {{ $asset->cost }} m<sup>2</sup></div>
                            <div>{{ $asset->city_name }}</div>
                            <div>{{ $asset->category_name }}</div>
                        @endcan
                    </div>
                </div>
            @empty
                <div class="col-md-12">
                    <div class="alert alert-warning font-weight-bold rounded">Data tidak ditemukan</div>
                </div>
            @endforelse
        </div>
        <div class="d-flex justify-content-center">
            {!! $assets->links() !!}
        </div>
    </div>
@endsection