@extends('layouts.app', ['title' => 'Valores Pizza'])

@section('css')
<style>
    .card-modern {
        border: none;
        border-radius: 1rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        background: #fff;
    }
    
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
    }
    
    .page-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1f2937;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .btn-back {
        background: white;
        border: 1px solid #e5e7eb;
        color: #4b5563;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.2s;
        font-weight: 500;
        text-decoration: none;
    }
    
    .btn-back:hover {
        background: #f9fafb;
        color: #1f2937;
        border-color: #d1d5db;
        transform: translateX(-2px);
    }

    /* Table Modernization */
    .table-modern {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }
    .table-modern thead th {
        background-color: #f9fafb;
        color: #374151;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
        padding: 1rem;
        border-bottom: 1px solid #e5e7eb;
    }
    .table-modern tbody td {
        padding: 1rem;
        border-bottom: 1px solid #f3f4f6;
        vertical-align: middle;
        color: #4b5563;
    }
    .table-modern tbody tr:last-child td {
        border-bottom: none;
    }
    .table-modern tbody tr:hover td {
        background-color: #f9fafb;
    }

    /* Input Force Light */
    .form-control {
        background-color: #fff !important;
        border-color: #ced4da;
        color: #212529 !important;
    }
    .form-control[readonly] {
        background-color: #e9ecef !important;
    }
</style>
@endsection

@section('content')

<div class="container-fluid px-4 py-4">
    <!-- Header -->
    <div class="page-header">
        <div>
            <h1 class="page-title">
                <i class="ri-price-tag-3-line text-primary"></i>
                Valores Pizza
            </h1>
            <p class="text-muted mt-2 mb-0">Definindo preços para: <strong class="text-primary">{{ $produto->nome }}</strong></p>
        </div>
        <a href="{{ route('produtos.index') }}" class="btn-back">
            <i class="ri-arrow-left-line"></i>
            Voltar
        </a>
    </div>

    <!-- Main Content -->
    <div class="card card-modern">
        <div class="card-body p-4">
            {!!Form::open()
            ->put()
            ->route('produtos.setar-tamanhos-valores', [$produto->id])
            !!}

            <div class="table-responsive rounded-3 border">
                <table class="table table-modern mb-0">
                    <thead>
                        <tr>
                            <th style="width: 50%;">Tamanho</th>
                            <th>Valor (R$)</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($tamanhos as $t)
                        <tr>
                            <td>
                                <input type="hidden" name="tamanho_id[]" value="{{ $t->id }}">
                                <div class="d-flex align-items-center">
                                    <div class="avatar-sm bg-light rounded-3 d-flex align-items-center justify-content-center me-3">
                                        <i class="ri-pie-chart-line text-primary fs-5"></i>
                                    </div>
                                    <span class="fw-bold fs-5 text-dark">{{ $t->nome }}</span>
                                </div>
                            </td>
                            
                            <td>
                                <div class="input-group">
                                    <span class="input-group-text bg-white border-end-0 text-muted">R$</span>
                                    <input required type="tel" name="valor[]" class="form-control moeda border-start-0 ps-0" 
                                    value="{{ $t->getValorDaPizza($produto->id) }}" placeholder="0,00">
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="2" class="text-center py-5">
                                <div class="text-muted">
                                    <i class="ri-error-warning-line display-4 mb-3 d-block text-warning"></i>
                                    <p class="mb-3">Nenhum tamanho de pizza cadastrado.</p>
                                    <a href="{{ route('tamanhos-pizza.index') }}" class="btn btn-outline-primary btn-sm">
                                        Cadastrar Tamanhos
                                    </a>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if(count($tamanhos) > 0)
            <div class="mt-4 text-end">
                <button type="submit" class="btn btn-success px-4">
                    <i class="ri-save-line me-2"></i> Salvar Valores
                </button>
            </div>
            @endif

            {!!Form::close()!!}
        </div>
    </div>
</div>

@endsection