@extends('layouts.app', ['title' => 'Movimentações'])

@section('css')
<link rel="stylesheet" href="{{ asset('css/produtos-modern.css') }}">
<style type="text/css">
    @page { size: auto;  margin: 0mm; }

    @media print {
        .print{
            margin: 10px;
        }
    }

    /* Modern Card & Layout */
    .card-modern {
        border: none;
        border-radius: 1rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        background: #fff;
        transition: transform 0.2s;
    }

    /* Modern 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.05);
        background-color: #fff;
    }
    .table-modern td {
        padding: 1rem;
        vertical-align: middle;
        border: none;
        border-top: 1px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
    }
    .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;
    }

    /* Header & Details */
    .product-header {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid #f3f4f6;
    }
    .product-img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 1rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .product-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1f2937;
        margin: 0;
    }
    
    .detail-card {
        background: #f9fafb;
        border-radius: 0.75rem;
        padding: 1rem;
        height: 100%;
    }
    .detail-label {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #6b7280;
        margin-bottom: 0.25rem;
        display: block;
    }
    .detail-value {
        font-weight: 600;
        color: #111827;
        font-size: 1rem;
    }

    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
    }
    .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);
    }
</style>
@endsection

@section('content')
<div class="container-fluid px-4 py-4 print">
    
    <div class="page-header d-print-none">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Detalhes do Produto</h1>
            <p class="text-muted mb-0">Histórico de movimentações e informações</p>
        </div>
        <a href="{{ route('produtos.index') }}" class="btn-back">
            <i class="ri-arrow-left-line"></i> Voltar
        </a>
    </div>

    <div class="card card-modern">
        <div class="card-body p-4">

            <!-- Product Header -->
            <div class="product-header">
                <img class="product-img" src="{{ $item->img }}" alt="{{ $item->nome }}">
                <div>
                    <h2 class="product-title">{{ $item->nome }}</h2>
                    <div class="mt-2 text-muted">
                        <i class="ri-barcode-line align-middle"></i> {{ $item->codigo_barras }}
                    </div>
                </div>
            </div>

            <!-- Details Grid -->
            <div class="row g-4 mb-4">
                <div class="col-md-3">
                    <div class="detail-card">
                        <span class="detail-label">Total de Movimentações</span>
                        <span class="detail-value text-primary">{{ sizeof($data) }}</span>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="detail-card">
                        <span class="detail-label">Categoria</span>
                        <span class="detail-value">{{ $item->categoria ? $item->categoria->nome : '--' }}</span>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="detail-card">
                        <span class="detail-label">Marca</span>
                        <span class="detail-value">{{ $item->marca ? $item->marca->nome : '--' }}</span>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="detail-card">
                        <span class="detail-label">Preços</span>
                        <div class="d-flex flex-col">
                            <span class="text-success fw-bold">Venda: R$ {{ __moeda($item->valor_unitario) }}</span>
                            <span class="text-muted small">Compra: R$ {{ __moeda($item->valor_compra) }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="fw-bold m-0"><i class="ri-history-line me-1"></i> Histórico de Estoque</h5>
                <button onclick="window.print()" class="btn btn-light btn-sm d-print-none">
                    <i class="ri-printer-line"></i> Imprimir
                </button>
            </div>

            <div class="table-responsive">
                <table class="table table-modern">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Qtd. Modificada</th>
                            <th>Qtd. Estoque</th>
                            <th>Tipo</th>
                            <th>Usuário</th>
                            <th>Data</th>
                            <th>Origem</th>
                            <th>Variação</th>
                            <th class="d-print-none">Ação</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($data as $i)
                        <tr>
                            <td>{{ $i->id }}</td>
                            <td>
                                @if(!$i->produto->unidadeDecimal())
                                {{ number_format($i->quantidade, 0, '.', '') }}
                                @else
                                {{ number_format($i->quantidade, 3) }}
                                @endif
                            </td>
                            <td>
                                @if($i->estoque_atual)
                                    @if(!$i->produto->unidadeDecimal())
                                    {{ number_format($i->estoque_atual, 0, '.', '') }}
                                    @else
                                    {{ number_format($i->estoque_atual, 3) }}
                                    @endif
                                @else
                                    --
                                @endif
                            </td>
                            <td>
                                @if($i->tipo == 'reducao')
                                <span class="badge bg-danger-subtle text-danger rounded-pill">Saída</span>
                                @else
                                <span class="badge bg-success-subtle text-success rounded-pill">Entrada</span>
                                @endif
                            </td>
                            <td>{{ $i->usuario ? $i->usuario->name : '--' }}</td>
                            <td>{{ __data_pt($i->created_at) }}</td>
                            <td>{{ $i->tipo_transacao }}</td>
                            <td>
                                @if($i->produto_variacao_id)
                                <span class="badge bg-info-subtle text-info">
                                    {{ $i->produtoVariacao->descricao }}
                                </span>
                                @else
                                --
                                @endif
                            </td>
                            <td class="d-print-none">
                                {!!Form::open()
                                ->post()
                                ->route('estoque.destroy', [$i->id])
                                ->id('form-'.$i->id)
                                !!}
                                @method('DELETE')
                                <button type="button" class="btn btn-sm btn-soft-danger btn-delete" title="Remover">
                                    <i class="ri-delete-bin-line"></i>
                                </button>
                                {!!Form::close()!!}
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

        </div>
    </div>
</div>
@endsection

@section('js')
<script>
    $('.btn-delete').on('click', function (e) {
        e.preventDefault();
        var form = $(this).parents('form').attr('id');
        swal({
            title: "Você está certo?",
            text: "Uma vez deletado, você não poderá recuperar esse item novamente!",
            icon: "warning",
            buttons: true,
            buttons: ["Cancelar", "Excluir"],
            dangerMode: true,
        })
        .then((willDelete) => {
            if (willDelete) {
                $('#'+form).submit();
            }
        });
    });
</script>
@endsection