@extends('layouts.app', ['title' => 'Composição do Produto'])

@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;
    }
</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-stack-line text-primary"></i>
                Composição do Produto
            </h1>
            <p class="text-muted mt-2 mb-0">Produto: <strong class="text-primary">{{$item->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()
            ->post()
            ->route('produto-composto.store', [$item->id])
            !!}
            <div class="row g-3 align-items-end">
                <input type="hidden" name="produto_id" value="{{$item->id}}">
                
                <div class="col-md-5">
                    <label class="form-label fw-bold text-muted small">Produto Insumo/Ingrediente</label>
                    {!!Form::select('ingrediente_id', 'Selecionar Produto')
                    ->attrs(['class' => 'select2 form-select'])->required()
                    !!}
                </div>
                
                <div class="col-md-3">
                    <label class="form-label fw-bold text-muted small">Quantidade</label>
                    {!!Form::text('quantidade', 'Quantidade')->attrs(['class' => 'form-control qtd', 'type' => 'number', 'min' => '0', 'step' => 'any', 'inputmode' => 'decimal'])->required()
                    !!}
                    <small class="text-muted">Use valores positivos. O sistema não permite quantidade negativa.</small>
                </div>
                
                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="ri-add-line"></i> Adicionar
                    </button>
                </div>
            </div>
            {!!Form::close()!!}

            <div class="table-responsive mt-4 rounded-3 border">
                <table class="table table-modern mb-0">
                    <thead>
                        <tr>
                            <th>Produto Insumo/Ingrediente</th>
                            <th>Quantidade</th>
                            <th class="text-end">Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($data as $item)
                        <tr>
                            <td>
                                <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-shopping-basket-2-line text-primary fs-5"></i>
                                    </div>
                                    <span class="fw-medium text-dark">{{ $item->ingrediente->nome }}</span>
                                </div>
                            </td>
                            <td>{{ $item->quantidade }}</td>
                            <td class="text-end">
                                <form action="{{ route('produto-composto.destroy', $item->id) }}" method="post" id="form-{{$item->id}}" class="d-inline">
                                    @csrf
                                    @method('delete')
                                    <button type="submit" title="Remover" class="btn btn-icon btn-soft-danger btn-sm btn-delete">
                                        <i class="ri-delete-bin-line"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="3" class="text-center py-5">
                                <div class="text-muted">
                                    <i class="ri-inbox-line display-4 mb-3 d-block"></i>
                                    <p class="mb-0">Nenhum ingrediente adicionado ainda.</p>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="mt-4 text-end">
                <a href="{{ route('produtos.index') }}" class="btn btn-success px-4">
                    <i class="ri-check-line me-2"></i> Finalizar Composição
                </a>
            </div>
        </div>
    </div>
</div>
@endsection