@extends('../layouts/partials/header')

@section('content')

    <style>
        table {
            width: 100%; /* Ocupa el 100% del ancho del contenedor */
            border-collapse: collapse; /* Opcional: para eliminar el espacio entre bordes de celdas */
        }
        .img-custom-size {
            width: 444px;
            height: 300px;
            border: 3px solid black; border-radius: 15px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
        }
        .table td {
            text-align: left;
        }


    </style>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css" rel="stylesheet">


    <div class="container mt-3">
        <br>
        <div class="card text-center">
            <div class="card-header">
                <!-- Nav Tabs -->
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link {{ old('active_tab',session('active_tab', 'tab2')) == 'tab2' ? 'active' : '' }}" id="tab2-tab" data-bs-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="true">Nuevo Registro</a>
                    </li>

                </ul>
            </div>

            <div class="card-header">
                <div class="tab-content" id="myTabContent">

                    <div class="tab-pane fade {{ old('active_tab',session('active_tab', 'tab2')) == 'tab2' ? 'show active' : '' }}" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
                        <div class="container">
                            <div class="row">

                            </div>
                            <div class="row">
                                <div class="text-center">
                                    <strong>COTIZACIONES</strong><br><br>
                                </div>
                            </div>
                            <div class="row">
                                Los campos marcados con (*) son mandatorios.
                            </div>


                            <form action="{{ route('cotizaciones.newcargo',$cotizacion) }}" method="POST" id="formCaptura" enctype="multipart/form-data" >
                                @csrf

                                <br>
                                <div class="row">
                                    @if(session('success'))
                                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                                        <strong>OK! :</strong>{{ session('success') }}
                                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                    </div>
                                    @endif

                                    @if ( $errors->any() )
                                        <div class="alert alert-danger">
                                            <ul>
                                                @foreach ( $errors->all() as $error )
                                                    <li>{{ $error }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif

                                </div>
                                <div class="row">
                                    <div class="col-md-2 text-start">
                                        <div class="form-group">
                                            <label for="fecha" style="all: unset;"><strong>Fecha:</strong></label>
                                            <input type="date" id="fecha" name="fecha" value="{{ $cotizacion->fecha }}" class="form-control" disabled>
                                        </div>
                                    </div>
                                    <div class="col-md-2 text-start">
                                        <div class="form-group">
                                            <label for="vigencia" style="all: unset;"><strong>Vigencia:</strong></label>
                                            <input type="date" id="vigencia" name="vigencia" value="{{ $cotizacion->vigencia }}" class="form-control" disabled>
                                        </div>
                                    </div>
                                    <div class="col-md-4 text-start">
                                        <div class="form-group">
                                            <label for="empresa" style="all: unset;"><strong>Empresa:</strong></label>
                                            <input type="text" id="empresa" name="empresa" value="{{ $cotizacion->empresa }}" class="form-control" disabled>
                                        </div>
                                    </div>
                                    <div class="col-md-4 text-start">
                                        <div class="form-group">
                                            <label for="cliente" style="all: unset;"><strong>Cliente:</strong></label>
                                            <input type="text" id="cliente" name="cliente" value="{{ $cotizacion->cliente }}" class="form-control" disabled>
                                        </div>
                                    </div>
                                    <div class="col-md-1">
                                        <a href="{{ route('cotizaciones.generarPDF', $cotizacion->id) }}">
                                        <img src="{{ asset('images/icono_pdf.png') }}" alt="Ícono PDF" width="40" height="40">
                                        </a>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-2 text-start">
                                        <div class="form-group">
                                            <label for="origen" style="all: unset;"><strong>*Origen:</strong></label>
                                            <input type="text" style="text-transform: uppercase;" id="origen" name="origen" value="{{ old('origen') }}" class="form-control" maxlength="191" required>
                                        </div>
                                    </div>
                                    <div class="col-md-2 text-start">
                                        <div class="form-group">
                                            <label for="intermedio" style="all: unset;"><strong>Intermedio:</strong></label>
                                            <input type="text" style="text-transform: uppercase;" id="intermedio" name="intermedio" value="{{ old('intermedio') }}" class="form-control" maxlength="191">
                                        </div>
                                    </div>
                                    <div class="col-md-2 text-start">
                                        <div class="form-group">
                                            <label for="destino" style="all: unset;"><strong>*Destino:</strong></label>
                                            <input type="text" style="text-transform: uppercase;" id="destino" name="destino" value="{{ old('destino') }}" class="form-control" maxlength="191" required>
                                        </div>
                                    </div>
                                    <div class="col-md-2 text-start">
                                        <div class="form-group">
                                            <label for="concepto" style="all: unset;"><strong>*Concepto:</strong></label>
                                            <input type="text" style="text-transform: uppercase;" id="concepto" name="concepto" value="{{ old('concepto') }}" class="form-control" maxlength="191" required>
                                        </div>
                                    </div>
                                    <div class="col-md-2 text-start">
                                        <div class="form-group">
                                            <label for="costo" style="all: unset;"><strong>*Costo:</strong></label>
                                            <input type="text" id="costo" name="costo" value="{{ old('costo') }}" class="form-control" maxlength="10" required>
                                        </div>
                                    </div>
                                    <div class="col-md-1 text-start">
                                        @php
                                            $monedaSeleccionada = old('moneda', $cotizacion->moneda ?? 'MXN');
                                        @endphp
                                        <div class="form-group">
                                            <label for="moneda" style="all: unset;"><strong>*Moneda:</strong></label>
                                            <select id="moneda" name="moneda" class="form-control" required>
                                                <option value="MXN" {{ $monedaSeleccionada === 'MXN' ? 'selected' : '' }}>MXN</option>
                                                <option value="USD" {{ $monedaSeleccionada === 'USD' ? 'selected' : '' }}>USD</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-1">
                                        <br>
                                        <input type="hidden" name="active_tab" id="active_tab" value="{{ old('active_tab',session('active_tab', 'tab2')) }}">
                                        <button type="submit" class="btn btn-primary btn-sm">Guardar</button>
                                    </div>

                                </div>
                            </form>



                                <div class="row">
                                    <div class="table-responsive col-md-11">
                                        <table class="table table-hover align-middle table-bordered" style="color: #f8f9fa;">
                                            <thead class="">
                                                <tr class="table-dark">
                                                    <th></th>
                                                    <th>Origen</th>
                                                    <th>Intermedio</th>
                                                    <th>Destino</th>
                                                    <th>Concepto</th>
                                                    <th>Costo</th>
                                                    <th>Moneda</th>
                                                </tr>
                                            </thead>
                                            <tbody class="bg-secondary text-white">
                                                @if( isset($detalles) )
                                                    @foreach($detalles as $detalle)
                                                        <tr>
                                                            <td>
                                                                <!-- Formulario para eliminar -->
                                                                <form action="{{ route('cotizaciones.destroy', $detalle->id) }}" method="POST" style="display: inline;" enctype="multipart/form-data">
                                                                    @csrf
                                                                    @method('DELETE')
                                                                    <button type="submit" class="btn btn-sm btn-danger" title="Eliminar">
                                                                        <i class="bi bi-trash"></i>
                                                                    </button>
                                                                </form>
                                                            </td>
                                                            <td>{{ $detalle->origen }}</td>
                                                            <td>{{ $detalle->intermedio }}</td>
                                                            <td>{{ $detalle->destino }}</td>
                                                            <td>{{ $detalle->concepto }}</td>
                                                            <td class="text-right">{{ number_format($detalle->costo, 2) }}</td>
                                                            <td>{{ $detalle->moneda }}</td>
                                                        </tr>
                                                    @endforeach
                                                    {{-- <tr class="table-success">
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <th class="text-right">Total</th>
                                                        <th class="text-right">
                                                            $ {{ number_format($detalles->sum('costo'), 2) }}
                                                        </th>
                                                    </tr> --}}
                                                @endif

                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="col-12 text-end">
                                        <i>
                                            {{ $cotizacion->user->name }}<br>
                                            {{$cotizacion->created_at}}
                                        </i>
                                    </div>


                                </div>




                        </div>
                    </div>


                </div>
            </div>

        </div>



    </div>



    <script>
        document.addEventListener('DOMContentLoaded', function () {
        // Capturar el cambio de pestaña
        const tabs = document.querySelectorAll('a[data-bs-toggle="tab"]');
        tabs.forEach(tab => {
            tab.addEventListener('shown.bs.tab', function (e) {
                // Guardar el id de la pestaña activa en el input oculto
                document.getElementById('active_tab').value = e.target.getAttribute('href').substring(1);
            });
        });

        // Activar la pestaña correcta al cargar la página
        const activeTab = '{{ old('active_tab',session('active_tab', 'tab1')) }}';
        const tabElement = document.querySelector(`a[href="#${activeTab}"]`);
        if (tabElement) {
            const tabInstance = new bootstrap.Tab(tabElement);
            tabInstance.show();
        }
        });

    </script>


@endsection


@extends('../layouts/partials/footer')