@section('title', 'Costos Maniobra')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1 class="mb-0">Costos Maniobra</h1>
            <small class="text-muted">Catálogo administrativo de costos por naviera y maniobra</small>
        </div>
    </div>
@stop

<div>
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">
            {{ session('success') }}
            <button type="button" class="close" data-dismiss="alert">&times;</button>
        </div>
    @endif

    <div class="mb-3">
        <button type="button"
                wire:click="nuevo"
                class="btn btn-success btn-sm">
            <i class="fas fa-plus mr-1"></i>
            Nuevo costo
        </button>
    </div>

    <div class="card card-outline card-secondary">
        <div class="card-header">
            <div>
                <h3 class="card-title mb-2">Listado</h3>

                <div class="mt-2" style="max-width: 400px;">
                    <input type="text"
                        wire:model.live="search"
                        class="form-control form-control-sm"
                        placeholder="Buscar por naviera, maniobra o moneda...">
                </div>
            </div>
        </div>

        <div class="card-body table-responsive p-0">
            <table class="table table-sm table-bordered table-hover mb-0">
                <thead>
                    <tr>
                        <th>Naviera</th>
                        <th>Maniobra</th>
                        <th class="text-right">Total</th>
                        <th>Moneda</th>
                        <th>Estatus</th>
                        <th width="160">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($costos as $item)
                        <tr>
                            <td>{{ $item->naviera }}</td>
                            <td>{{ $item->maniobra }}</td>
                            <td class="text-right">{{ number_format($item->total, 2) }}</td>
                            <td>{{ $item->moneda }}</td>
                            <td>
                                @if($item->activo)
                                    <span class="badge badge-success">Activo</span>
                                @else
                                    <span class="badge badge-secondary">Inactivo</span>
                                @endif
                            </td>
                            <td>
                                <button type="button" wire:click="editar({{ $item->id }})" class="btn btn-warning btn-xs">
                                    <i class="fas fa-edit"></i>
                                </button>

                                <button type="button" wire:click="toggleActivo({{ $item->id }})" class="btn btn-secondary btn-xs">
                                    <i class="fas fa-power-off"></i>
                                </button>

                                <button type="button"
                                        wire:click="eliminar({{ $item->id }})" wire:confirm="¿Deseas eliminar este costo?"
                                        class="btn btn-danger btn-xs">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center text-muted">
                                No hay costos registrados.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="card-footer">
            {{ $costos->links() }}
        </div>
    </div>
    @if($mostrarModal)
        <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,.5);">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title">
                            {{ $editandoId ? 'Editar costo de maniobra' : 'Nuevo costo de maniobra' }}
                        </h5>

                        <button type="button" class="close" wire:click="cerrarModal">
                            <span>&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-4">
                                <label>Maniobra</label>
                                <select wire:model="maniobra" class="form-control form-control-sm @error('maniobra') is-invalid @enderror">
                                    <option value="">Seleccione</option>
                                    <option value="Merchant">Merchant</option>
                                    <option value="Carrier">Carrier</option>
                                </select>
                                @error('maniobra') <small class="text-danger">{{ $message }}</small> @enderror
                            </div>

                            <div class="col-md-4">
                                <label>Naviera</label>
                                <select wire:model="naviera_id" class="form-control form-control-sm @error('naviera_id') is-invalid @enderror">
                                    <option value="">Seleccione</option>
                                    @foreach($navieras as $naviera)
                                        <option value="{{ $naviera->id }}">{{ $naviera->nombre }}</option>
                                    @endforeach
                                </select>
                                @error('naviera_id') <small class="text-danger">{{ $message }}</small> @enderror
                            </div>

                            <div class="col-md-2">
                                <label>Total</label>
                                <input type="number" step="0.01" min="0" wire:model="total"
                                    class="form-control form-control-sm @error('total') is-invalid @enderror">
                                @error('total') <small class="text-danger">{{ $message }}</small> @enderror
                            </div>

                            <div class="col-md-2">
                                <label>Moneda</label>
                                <select wire:model="moneda" class="form-control form-control-sm @error('moneda') is-invalid @enderror">
                                    <option value="MX">MX</option>
                                    <option value="DLLS">DLLS</option>
                                </select>
                                @error('moneda') <small class="text-danger">{{ $message }}</small> @enderror
                            </div>

                            <div class="col-md-12 mt-3">
                                <label>
                                    <input type="checkbox" wire:model="activo">
                                    Activo
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" wire:click="cerrarModal" class="btn btn-secondary btn-sm">
                            Cancelar
                        </button>

                        <button type="button" wire:click="guardarModal" class="btn btn-primary btn-sm">
                            <i class="fas fa-save mr-1"></i>
                            {{ $editandoId ? 'Actualizar' : 'Guardar' }}
                        </button>
                    </div>

                </div>
            </div>
        </div>
        @endif
</div>