@extends('layouts.admin')

@section('title', __('admin_products.title'))

@push('styles')
    .filters {
        display: grid;
        grid-template-columns: minmax(220px, 1fr) 220px auto;
        gap: 12px;
        align-items: end;
        margin-bottom: 20px;
    }

    .field label {
        display: block;
        margin-bottom: 7px;
        color: #475467;
        font-size: 14px;
        font-weight: 700;
    }

    .field input,
    .field select {
        width: 100%;
        padding: 11px 12px;
        border: 1px solid #d0d9e4;
        border-radius: 8px;
        background: #ffffff;
        font-size: 14px;
    }

    .checkbox-field {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 15px 0 20px;
    }

    .checkbox-field input {
        width: 18px;
        height: 18px;
    }

    .table-wrapper {
        overflow-x: auto;
    }

    .products-table {
        width: 100%;
        min-width: 1050px;
        border-collapse: collapse;
    }

    .products-table th {
        padding: 13px 10px;
        background: #0756a3;
        color: #ffffff;
        text-align: start;
        white-space: nowrap;
    }

    .products-table td {
        padding: 13px 10px;
        border-bottom: 1px solid #e4eaf1;
        vertical-align: middle;
    }

    .product-image,
    .no-image {
        width: 62px;
        height: 62px;
        border-radius: 9px;
    }

    .product-image {
        display: block;
        object-fit: cover;
        border: 1px solid #dce5ef;
    }

    .no-image {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px;
        background: #edf2f7;
        color: #667085;
        text-align: center;
        font-size: 11px;
    }

    .product-name {
        font-weight: 700;
        color: #172033;
    }

    .product-code {
        color: #667085;
        font-family: monospace;
        font-size: 13px;
    }

    .status-badge,
    .active-badge {
        display: inline-flex;
        padding: 6px 9px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
    }

    .status-available {
        background: #dff6e7;
        color: #176b35;
    }

    .status-on-request {
        background: #fff0d6;
        color: #955a00;
    }

    .status-unavailable {
        background: #fde2e2;
        color: #a61b1b;
    }

    .active-yes {
        background: #eaf3fc;
        color: #0756a3;
    }

    .active-no {
        background: #edf0f3;
        color: #475467;
    }

    .price-line {
        white-space: nowrap;
        line-height: 1.8;
    }

    .actions {
        display: flex;
        gap: 7px;
        flex-wrap: wrap;
    }

    .small-button {
        padding: 7px 10px;
        border: 0;
        border-radius: 7px;
        color: #ffffff;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        cursor: pointer;
    }

    .edit-button {
        background: #0756a3;
    }

    .delete-button {
        background: #b42318;
    }

    .restore-button {
        background: #17803d;
    }

    .empty-state {
        padding: 45px 20px;
        color: #667085;
        text-align: center;
    }

    .pagination-wrapper {
        margin-top: 22px;
    }

    @media (max-width: 800px) {
        .filters {
            grid-template-columns: 1fr;
        }
    }
@endpush

@section('content')
    <div class="page-header">
        <h1 class="page-title">
            {{ __('admin_products.title') }}
        </h1>

        @unless(request()->boolean('trashed'))
            <a
                class="button"
                href="{{ route('admin.products.create') }}"
            >
                {{ __('admin_products.add_product') }}
            </a>
        @endunless
    </div>

    <section class="card">
        <form
            method="GET"
            action="{{ route('admin.products.index') }}"
        >
            <div class="filters">
                <div class="field">
                    <label for="search">
                        {{ __('admin_products.search') }}
                    </label>

                    <input
                        id="search"
                        type="search"
                        name="search"
                        value="{{ $search }}"
                        placeholder="{{ __('admin_products.search_placeholder') }}"
                    >
                </div>

                <div class="field">
                    <label for="status">
                        {{ __('admin_products.availability') }}
                    </label>

                    <select
                        id="status"
                        name="status"
                    >
                        <option value="">
                            {{ __('admin_products.all_statuses') }}
                        </option>

                        <option
                            value="available"
                            @selected($status === 'available')
                        >
                            {{ __('admin_products.available') }}
                        </option>

                        <option
                            value="on_request"
                            @selected($status === 'on_request')
                        >
                            {{ __('admin_products.on_request') }}
                        </option>

                        <option
                            value="unavailable"
                            @selected($status === 'unavailable')
                        >
                            {{ __('admin_products.unavailable') }}
                        </option>
                    </select>
                </div>

                <button
                    class="button"
                    type="submit"
                >
                    {{ __('admin_products.filter') }}
                </button>
            </div>

            <label class="checkbox-field">
                <input
                    type="checkbox"
                    name="trashed"
                    value="1"
                    @checked(request()->boolean('trashed'))
                    onchange="this.form.submit()"
                >

                <span>
                    {{ __('admin_products.show_deleted') }}
                </span>
            </label>
        </form>

        <div class="table-wrapper">
            <table class="products-table">
                <thead>
                    <tr>
                        <th>{{ __('admin_products.image') }}</th>
                        <th>{{ __('admin_products.code') }}</th>
                        <th>{{ __('admin_products.name') }}</th>
                        <th>{{ __('admin_products.brand') }}</th>
                        <th>{{ __('admin_products.stock') }}</th>
                        <th>{{ __('admin_products.availability') }}</th>
                        <th>{{ __('admin_products.prices') }}</th>
                        <th>{{ __('admin_products.active') }}</th>
                        <th>{{ __('admin_products.actions') }}</th>
                    </tr>
                </thead>

                <tbody>
                    @forelse($products as $product)
                        @php
                            $translation = $product
                                ->translation(app()->getLocale())
                                ?? $product->translation('ar')
                                ?? $product->translations->first();

                            $primaryImage = $product->media
                                ->firstWhere('is_primary', true)
                                ?? $product->media->first();

                            $jodPrice = $product->basePrices
                                ->firstWhere('currency', 'JOD');

                            $usdPrice = $product->basePrices
                                ->firstWhere('currency', 'USD');

                            $statusClass = match (
                                $product->availability_status
                            ) {
                                'available' => 'status-available',
                                'on_request' => 'status-on-request',
                                default => 'status-unavailable',
                            };

                            $statusText = match (
                                $product->availability_status
                            ) {
                                'available' => __('admin_products.available'),
                                'on_request' => __('admin_products.on_request'),
                                default => __('admin_products.unavailable'),
                            };
                        @endphp

                        <tr>
                            <td>
                                @if(
                                    $primaryImage
                                    && $primaryImage->file_path
                                )
                                    <img
                                        class="product-image"
                                        src="{{ Storage::url($primaryImage->file_path) }}"
                                        alt="{{ $translation?->name ?? '' }}"
                                    >
                                @else
                                    <div class="no-image">
                                        {{ __('admin_products.no_image') }}
                                    </div>
                                @endif
                            </td>

                            <td>
                                <span class="product-code">
                                    {{ $product->internal_code }}
                                </span>
                            </td>

                            <td>
                                <span class="product-name">
                                    {{ $translation?->name ?? '—' }}
                                </span>
                            </td>

                            <td>
                                {{ $product->part_brand ?? '—' }}
                            </td>

                            <td>
                                {{ number_format($product->stock_quantity) }}
                            </td>

                            <td>
                                <span class="status-badge {{ $statusClass }}">
                                    {{ $statusText }}
                                </span>
                            </td>

                            <td>
                                <div class="price-line">
                                    {{ $jodPrice
                                        ? number_format((float) $jodPrice->amount, 3)
                                        : '—' }}

                                    {{ __('admin_products.jod') }}
                                </div>

                                <div class="price-line">
                                    {{ $usdPrice
                                        ? number_format((float) $usdPrice->amount, 3)
                                        : '—' }}

                                    {{ __('admin_products.usd') }}
                                </div>
                            </td>

                            <td>
                                <span class="active-badge {{ $product->is_active ? 'active-yes' : 'active-no' }}">
                                    {{ $product->is_active
                                        ? __('admin_products.active')
                                        : __('admin_products.inactive') }}
                                </span>
                            </td>

                            <td>
                                <div class="actions">
                                    @if($product->trashed())
                                        <form
                                            method="POST"
                                            action="{{ route(
                                                'admin.products.restore',
                                                $product->id
                                            ) }}"
                                        >
                                            @csrf

                                            <button
                                                class="small-button restore-button"
                                                type="submit"
                                            >
                                                {{ __('admin_products.restore') }}
                                            </button>
                                        </form>
                                    @else
                                        <a
                                            class="small-button edit-button"
                                            href="{{ route(
                                                'admin.products.edit',
                                                $product
                                            ) }}"
                                        >
                                            {{ __('admin_products.edit') }}
                                        </a>

                                        <form
                                            method="POST"
                                            action="{{ route(
                                                'admin.products.destroy',
                                                $product
                                            ) }}"
                                            onsubmit="return confirm(
                                                @js(__('admin_products.confirm_delete'))
                                            )"
                                        >
                                            @csrf
                                            @method('DELETE')

                                            <button
                                                class="small-button delete-button"
                                                type="submit"
                                            >
                                                {{ __('admin_products.delete') }}
                                            </button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td
                                class="empty-state"
                                colspan="9"
                            >
                                {{ __('admin_products.no_products') }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($products->hasPages())
            <div class="pagination-wrapper">
                {{ $products->links() }}
            </div>
        @endif
    </section>
@endsection