@extends('backend.layouts.app')

<style>
    .badge {
        height: auto !important;
        width: auto !important;
    }
</style>

@section('content')
    <div class="aiz-titlebar text-left mt-2 mb-3">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h1 class="h3">{{ translate('All Lenses') }}</h1>
            </div>
            @can('add_lenses')
                <div class="col-md-6 text-md-right">
                    <a href="{{ route('lenses.create') }}" class="btn btn-primary">
                        <span>{{ translate('Add New Lens') }}</span>
                    </a>
                </div>
            @endcan
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h5 class="mb-0 h6">{{ translate('Lenses List') }}</h5>
            <div class="pull-right">
                <form id="sort_lenses" action="" method="GET">
                    <div class="box-inline pad-rgt pull-left">
                        <div class="" style="min-width: 200px;">
                            <input type="text" class="form-control" id="search" name="search"
                                @isset($sort_search) value="{{ $sort_search }}" @endisset
                                placeholder="{{ translate('Type name & Enter') }}">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="card-body">
            <table class="table aiz-table mb-0">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>{{ translate('Image') }}</th>
                        <th>{{ translate('Name') }}</th>
                        <th>{{ translate('Colors') }}</th>
                        <th>{{ translate('Main Price') }}</th>
                        <th>{{ translate('Discounted') }}</th>
                        <th>{{ translate('Sort Order') }}</th>
                        <th>{{ translate('Default') }}</th>
                        <th class="text-right">{{ translate('Options') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($lenses as $key => $lens)
                        <tr>
                            <td>{{ $key + 1 + ($lenses->currentPage() - 1) * $lenses->perPage() }}</td>
                            <td>
                                @if ($lens->image != null)
                                    <img src="{{ uploaded_asset($lens->image) }}" alt="Lens Image"
                                        class="size-50px img-fit">
                                @else
                                    <img src="{{ static_asset('assets/img/placeholder.jpg') }}" alt="Placeholder"
                                        class="size-50px img-fit">
                                @endif
                            </td>
                            <td>{{ $lens->name }}</td>
                            <td>
                                @if ($lens->color)
                                    <div class="d-flex flex-wrap">
                                        @foreach ($lens->getColorsArray() as $color)
                                            <div class="badge mr-1 mb-1"
                                                style="background-color: {{ $color }}; color: {{ getContrastColor($color) }}; padding: 5px 10px; border: 1px solid #ddd;">
                                                {{ strtoupper($color) }}
                                            </div>
                                        @endforeach
                                    </div>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                            <td>{{ single_price($lens->main_price) }}</td>
                            <td>
                                @if ($lens->hasDiscount())
                                    <span class="badge badge-success">{{ single_price($lens->discounted_price) }}</span>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                            <td>
                                <span class="badge badge-inline badge-info">{{ $lens->sort_order }}</span>
                            </td>
                            <td>
                                @if ($lens->is_default == 1)
                                    <span class="badge badge-inline badge-success">{{ translate('Yes') }}</span>
                                @else
                                    <span class="badge badge-inline badge-secondary">{{ translate('No') }}</span>
                                @endif
                            </td>
                            <td class="text-right">
                                @can('edit_lenses')
                                    <a class="btn btn-soft-primary btn-icon btn-circle btn-sm"
                                        href="{{ route('lenses.edit', $lens->id) }}" title="{{ translate('Edit') }}">
                                        <i class="las la-edit"></i>
                                    </a>
                                @endcan
                                @can('delete_lenses')
                                <a href="#" class="btn btn-soft-danger btn-icon btn-circle btn-sm confirm-delete"
                                    data-href="{{ route('lenses.destroy', $lens->id) }}"
                                    title="{{ translate('Delete') }}">
                                    <i class="las la-trash"></i>
                                </a>
                                @endcan
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            <div class="aiz-pagination">
                {{ $lenses->appends(request()->input())->links() }}
            </div>
        </div>
    </div>
@endsection