@extends('layouts.app', ['title' => 'Consultar Produto por Código Único'])
@section('css')
<link rel="stylesheet" href="{{ asset('css/produtos-modern.css') }}">
<style>
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
    }

    .page-title {
        font-size: 1.5rem;
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: #1f2937;
    }

    /* ---- CARD ---- */
    .card-modern {
        border: none;
        border-radius: 1rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        background: #fff;
        color: #212529;
    }

    /* ---- SEARCH CARD ---- */
    .search-card {
        background: #f8f9fa;
        border-radius: 1rem;
        padding: 1.5rem;
        margin-bottom: 2rem;
        border: 1px solid #e9ecef;
    }

    .search-card .form-label {
        color: #6c757d;
    }

    /* ---- TABLE ---- */
    .table-modern {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 8px;
    }

    .table-modern thead th {
        border: none;
        background: #f8f9fa;
        color: #6c757d;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
        padding: 1rem;
    }

    .table-modern tbody tr {
        background: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.02);
        transition: all 0.2s ease;
    }

    .table-modern tbody tr:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .table-modern td {
        padding: 1rem;
        vertical-align: middle;
        border: none;
        border-top: 1px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
        color: #212529;
    }

    .table-modern td:first-child {
        border-top-left-radius: 0.5rem;
        border-bottom-left-radius: 0.5rem;
        border-left: 1px solid #f0f0f0;
    }

    .table-modern td:last-child {
        border-top-right-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        border-right: 1px solid #f0f0f0;
    }

    /* ======== DARK MODE ======== */
    [data-theme="dark"] .page-title,
    [data-bs-theme="dark"] .page-title {
        color: #e2e8f0;
    }

    [data-theme="dark"] .card-modern,
    [data-bs-theme="dark"] .card-modern {
        background: #1e293b !important;
        color: #e2e8f0 !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        border: 1px solid #334155;
    }

    [data-theme="dark"] .search-card,
    [data-bs-theme="dark"] .search-card {
        background: #0f172a !important;
        border-color: #334155 !important;
    }

    [data-theme="dark"] .search-card .form-label,
    [data-bs-theme="dark"] .search-card .form-label {
        color: #94a3b8 !important;
    }

    [data-theme="dark"] .search-card .form-control,
    [data-theme="dark"] .search-card .form-select,
    [data-bs-theme="dark"] .search-card .form-control,
    [data-bs-theme="dark"] .search-card .form-select {
        background: #1e293b !important;
        border-color: #334155 !important;
        color: #e2e8f0 !important;
    }

    [data-theme="dark"] .search-card .input-group-text,
    [data-bs-theme="dark"] .search-card .input-group-text {
        background: #334155 !important;
        border-color: #334155 !important;
        color: #e2e8f0 !important;
    }

    [data-theme="dark"] .table-modern thead th,
    [data-bs-theme="dark"] .table-modern thead th {
        background: #0f172a !important;
        color: #94a3b8 !important;
    }

    [data-theme="dark"] .table-modern tbody tr,
    [data-bs-theme="dark"] .table-modern tbody tr {
        background: #1e293b !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    [data-theme="dark"] .table-modern tbody tr:hover,
    [data-bs-theme="dark"] .table-modern tbody tr:hover {
        background: #2d3b52 !important;
    }

    [data-theme="dark"] .table-modern td,
    [data-bs-theme="dark"] .table-modern td {
        color: #e2e8f0 !important;
        border-color: #334155 !important;
    }

    [data-theme="dark"] .badge.bg-light,
    [data-bs-theme="dark"] .badge.bg-light {
        background: #334155 !important;
        color: #e2e8f0 !important;
        border-color: #475569 !important;
    }

    /* Select2 dark */
    [data-theme="dark"] .select2-container--default .select2-selection--single,
    [data-bs-theme="dark"] .select2-container--default .select2-selection--single {
        background: #1e293b !important;
        border-color: #334155 !important;
        color: #e2e8f0 !important;
    }

    [data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
    [data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #e2e8f0 !important;
    }
</style>
@endsection

@section('content')
<div class="container-fluid px-4 py-4">
    <!-- Header -->
    <div class="page-header">
        <h1 class="page-title">
            <i class="ri-search-eye-line text-primary"></i>
            Consulta de Código Único
        </h1>
    </div>

    <div class="card card-modern">
        <div class="card-body p-4">
            
            <div class="search-card">
                {!!Form::open()->fill(request()->all())->get()!!}
                <div class="row g-3 align-items-end">
                    <div class="col-md-5">
                        <label class="form-label fw-bold text-muted small text-uppercase">Produto</label>
                        <select name="produto_id" class="form-select select2-produto">
                            <option value="">Digite para buscar o produto</option>
                            @if($produto != null)
                            <option value="{{ $produto->id }}" selected>#{{ $produto->numero_sequencial }} - {{ $produto->nome }}</option>
                            @endif
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold text-muted small text-uppercase">Código Único</label>
                        {!!Form::text('codigo', null)->placeholder('Digite o código...')->attrs(['class' => 'form-control'])!!}
                    </div>
                    <div class="col-md-3">
                        <div class="d-flex gap-2">
                            <button class="btn btn-primary rounded-pill w-100 shadow-sm" type="submit"> 
                                <i class="ri-search-line me-1"></i> Pesquisar
                            </button>
                            <a id="clear-filter" class="btn btn-outline-danger rounded-pill shadow-sm" href="{{ route('produto-consulta-codigo.index') }}">
                                <i class="ri-eraser-line"></i>
                            </a>
                        </div>
                    </div>
                </div>
                {!!Form::close()!!}
            </div>

            <div class="table-responsive">
                <table class="table table-modern">
                    <thead>
                        <tr>
                            <th>Produto</th>
                            <th>Código</th>
                            <th>Observação</th>
                            <th width="10%">Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($data as $item)
                        <tr>
                            <td class="fw-bold">{{ $item->produto->nome }}</td>
                            <td>
                                <span class="badge bg-light text-dark border font-monospace">{{ $item->codigo }}</span>
                            </td>
                            <td class="text-muted">{{ $item->observacao ?? '--' }}</td>
                            <td>
                                <button type="button" class="btn btn-soft-primary btn-sm rounded-pill px-3" title="Ver Detalhes" onclick="modalData('{{$item->id}}')">
                                    <i class="ri-eye-line me-1"></i> Detalhes
                                </button>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="text-center py-5">
                                <div class="d-flex flex-column align-items-center">
                                    <i class="ri-search-2-line display-4 text-muted mb-3 opacity-25"></i>
                                    <h5 class="text-muted">Nenhum registro encontrado</h5>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            
            <div class="d-flex justify-content-center mt-4">
                {!! $data->appends(request()->all())->links() !!}
            </div>

        </div>
    </div>
</div>

@include('modals._dados_produto_unico', ['not_submit' => true])

@endsection

@section('js')
<script src="/js/produto_unico.js"></script>
<script>
$(document).ready(function() {
    $('.select2-produto').select2({
        placeholder: 'Digite para buscar o produto',
        allowClear: true,
        minimumInputLength: 1,
        ajax: {
            url: path_url + 'api/produtos/select2',
            dataType: 'json',
            delay: 300,
            data: function(params) {
                return { q: params.term, empresa_id: $('#empresa_id').val() };
            },
            processResults: function(data) {
                return {
                    results: data.map(function(p) {
                        return { id: p.id, text: '#' + p.numero_sequencial + ' - ' + p.nome };
                    })
                };
            }
        }
    });
});
</script>
@endsection