@extends('private_seller.layout')

@section('content')

<style>
.flex-wrap{
            flex-wrap:nowrap !important;
    }
    @media (max-width: 991.98px) {
        .seller-offers-table thead {
            display: none;
        }
        .flex-wrap{
            flex-wrap:wrap !important;
    }
form{
    width:100% !important;
    }

        .seller-offers-table,
        .seller-offers-table tbody,
        .seller-offers-table tr,
        .seller-offers-table td {
            display: block;
            width: 100%;
        }

        .seller-offers-table tr {
            background: #fff;
            border: 1px solid #e9ecef;
            border-radius: 12px;
            padding: 14px;
            margin-bottom: 16px;
        }

        .seller-offers-table td {
            border: 0 !important;
            padding: 8px 0 !important;
        }

        .seller-offers-table td::before {
            content: attr(data-label);
            font-weight: 600;
            display: block;
            margin-bottom: 4px;
        }

        .mobile-action-wrap {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .offers-filter-form {
            flex-direction: column;
            align-items: stretch !important;
            gap: 10px;
        }

        .offers-filter-form .form-control,
        .offers-filter-form .btn {
            width: 100% !important;
            max-width: 100% !important;
            margin-right: 0 !important;
        }
    }

    .offer-search {
        max-width: 240px;
    }

    .offer-status {
        max-width: 170px;
    }

</style>

<div class="page-header">
    <h4 class="page-title">Ofertas</h4>
</div>

<div class="row">
    <div class="col-md-12">

        <div class="card">

            <div class="card-header d-flex justify-content-between align-items-center flex-wrap">
                <div class="card-title mb-2 mb-md-0">Ofertas Recibidas</div>

                <form method="GET" class="d-flex align-items-center flex-wrap offers-filter-form ">
                    <input
                        type="text"
                        name="search"
                        value="{{ request('search') }}"
                        class="form-control offer-search mr-2"
                        placeholder="Buscar vehículo, automotora..."
                    >

                    <select name="status" class="form-control offer-status mr-2">
                        <option value="">Todos los Estatus</option>
                        <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pendiente</option>
                        <option value="accepted" {{ request('status') == 'accepted' ? 'selected' : '' }}>Acceptada</option>
                        <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Rechazada</option>
                    </select>

                    <button type="submit" class="btn btn-primary btn-sm mr-2">
                        <i class="fas fa-search"></i> Buscar
                    </button>

                    @if(request('search') || request('status'))
                        <a href="{{ route('seller.offers.index') }}" class="btn btn-secondary btn-sm">
                            Reiniciar
                        </a>
                    @endif
                </form>
            </div>

            <div class="card-body">

                @if (isset($offers) && count($offers) > 0)

                    <div class="table-responsive">
                        <table class="table table-striped mt-3 seller-offers-table">

                            <thead>
                                <tr>
                                    <th>Vehículo</th>
                                    <th>Automotora</th>
                                    <th>Email</th>
                                    <th>Precio</th>
                                    <th>Mensaje</th>
                                    <th>Status</th>
                                    <th>Fecha</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>

                            <tbody>
                                @foreach ($offers as $offer)
                                    <tr>

                                        <td data-label="Vehicle">
                                            {{ $offer->vehicle->title ?? 'N/A' }}
                                        </td>

                                        <td data-label="Dealer">
                                            {{ $offer->dealer->username ?? $offer->dealer->first_name ?? 'Dealer' }}
                                        </td>

                                        <td data-label="Email">
                                            {{ $offer->dealer->email ?? '-' }}
                                        </td>

                                        <td data-label="Price">
                                            {{ $offer->offer_price ?? '-' }}
                                        </td>

                                        <td data-label="Message">
                                            {{ !empty($offer->message) ? \Illuminate\Support\Str::limit($offer->message, 60) : '-' }}
                                        </td>

                                        <td data-label="Status">
                                            @if ($offer->status === 'accepted')
                                                <span class="badge badge-success">Acceptada</span>
                                            @elseif ($offer->status === 'rejected')
                                                <span class="badge badge-danger">Rechazada</span>
                                            @else
                                                <span class="badge badge-warning">Pendiente</span>
                                            @endif
                                        </td>

                                        <td data-label="Date">
                                            {{ optional($offer->created_at)->format('d M Y h:i A') }}
                                        </td>

                                        <td data-label="Actions">
                                            @if ($offer->status === 'pending')
                                                <div class="mobile-action-wrap">
                                                    <form
                                                        action="{{ route('seller.offers.accept', $offer->id) }}"
                                                        method="POST"
                                                        onsubmit="return confirm('¿Solicitar contacto con esta automotora?');"
                                                    >
                                                        @csrf
                                                        <button type="submit" class="btn btn-primary btn-sm">
                                                            <i class="fas fa-phone"></i> Solicitar Contacto
                                                        </button>
                                                    </form>

                                                    <form
                                                        action="{{ route('seller.offers.reject', $offer->id) }}"
                                                        method="POST"
                                                        onsubmit="return confirm('Reject this offer?');"
                                                    >
                                                        @csrf
                                                        <button type="submit" class="btn btn-danger btn-sm">
                                                            <i class="fas fa-times"></i> Rechazar
                                                        </button>
                                                    </form>
                                                </div>
                                            @else
                                                <span class="text-muted">—</span>
                                            @endif
                                        </td>

                                    </tr>
                                @endforeach
                            </tbody>

                        </table>
                    </div>

                @else
                    <h3 class="text-center">NO HAY OFERTAS ACTUALMENTE</h3>
                @endif

            </div>
        </div>

    </div>
</div>

@endsection