@extends('layouts.admin')

@section('styles')
<link rel="stylesheet" href="{{asset('plugins/slim-select/slimselect.min.css')}}">
<style>
    .nav-tabs .nav-link.active {
        border-top: 3px solid #696cff;
        /* Color primario Sneat */
        font-weight: bold;
        color: #566a7f;
    }

    .info-card {
        transition: transform 0.3s ease;
    }

    .info-card:hover {
        transform: translateY(-5px);
    }
</style>
@endsection

@section('content')
<div class="container-fluid py-4">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="fw-bold m-0">
            <span class="text-muted fw-light">Servicios /</span> Detalle del Caso #{{$servi->id}}
        </h4>
        <a target="_blank" class="btn btn-info text-white shadow-sm" href="{{route('servi.printService', ['id' => $servi->id])}}">
            <i class="fas fa-print me-2"></i> Imprimir Ficha
        </a>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm border-0">

                <div class="card-header bg-white p-0 mx-3 mt-3 border-bottom">
                    <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                        <li class="nav-item">
                            <button class="nav-link active" id="tab-datos" data-bs-toggle="tab" data-bs-target="#content-datos" type="button" role="tab" aria-selected="true">
                                <i class="fas fa-file-alt me-2"></i>Datos del Servicio
                            </button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link" id="tab-editar" data-bs-toggle="tab" data-bs-target="#content-editar" type="button" role="tab" aria-selected="false">
                                <i class="fas fa-edit me-2"></i>Actualizar
                            </button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link" id="tab-repuestos" data-bs-toggle="tab" data-bs-target="#content-repuestos" type="button" role="tab" aria-selected="false">
                                <i class="fas fa-tools me-2"></i>Asignar Repuestos
                            </button>
                        </li>
                    </ul>
                </div>

                <div class="card-body p-4">
                    <div class="tab-content" id="custom-tabs-one-tabContent">

                        <div class="tab-pane fade show active" id="content-datos" role="tabpanel">
                            <div class="row g-4">

                                <div class="col-lg-8 order-2 order-lg-1">

                                    <div class="row g-3 mb-4">
                                        <div class="col-md-4">
                                            <div class="card bg-light border-start border-primary border-3 info-card">
                                                <div class="card-body text-center p-3">
                                                    <small class="text-muted text-uppercase fw-bold">Total</small>
                                                    <h5 class="mb-0 fw-bold text-primary">Q. {{number_format($servi->total, 2)}}</h5>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="card bg-light border-start border-success border-3 info-card">
                                                <div class="card-body text-center p-3">
                                                    <small class="text-muted text-uppercase fw-bold">Anticipo</small>
                                                    <h5 class="mb-0 fw-bold text-success">Q. {{number_format($servi->anticipo, 2)}}</h5>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="card bg-light border-start border-danger border-3 info-card">
                                                <div class="card-body text-center p-3">
                                                    <small class="text-muted text-uppercase fw-bold">Pendiente</small>
                                                    <h5 class="mb-0 fw-bold text-danger">Q. {{number_format($servi->pendiente, 2)}}</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card border">
                                        <div class="card-header bg-light fw-bold">
                                            <i class="fas fa-cogs me-2"></i>Repuestos Utilizados
                                        </div>
                                        <div class="card-body p-0">
                                            <ul class="list-group list-group-flush">
                                                @forelse($repuesto as $rep)
                                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                                    <div>
                                                        <span class="fw-bold text-capitalize text-dark">{{$rep->nombre}}</span>
                                                        <br>
                                                        <small class="text-muted">
                                                            <i class="far fa-calendar-alt me-1"></i> {{$rep->repuesto->fechadeventa}}
                                                        </small>
                                                    </div>
                                                    <div class="text-end">
                                                        <div class="mb-1">
                                                            <span class="badge bg-label-primary">Venta: Q. {{$rep->repuesto->cotos}}</span>
                                                            @can('servi.costo')
                                                            <span class="badge bg-label-secondary">Costo: Q. {{$rep->repuesto->p_costo}}</span>
                                                            @endcan
                                                        </div>
                                                        <a class="btn btn-sm btn-outline-danger" href="{{route('servi.deleteserviciorepuesto', ['id' => $rep->id])}}" onclick="return confirm('¿Eliminar repuesto?')">
                                                            <i class="fa fa-trash"></i>
                                                        </a>
                                                    </div>
                                                </li>
                                                @empty
                                                <li class="list-group-item text-center text-muted py-3">No hay repuestos asignados</li>
                                                @endforelse
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-4 order-1 order-lg-2">
                                    <div class="card bg-label-secondary border-0 h-100">
                                        <div class="card-body">
                                            <div class="text-center mb-4">
                                                <div class="avatar avatar-xl mx-auto mb-2">
                                                    <span class="avatar-initial rounded-circle bg-primary text-white" style="font-size: 1.5rem;">
                                                        <i class="fas fa-paint-brush"></i>
                                                    </span>
                                                </div>
                                                <h5 class="fw-bold text-capitalize mb-0">{{$servi->articulo}}</h5>
                                                <span class="badge bg-white text-primary shadow-sm mt-2">{{$servi->tipo}}</span>
                                                <div class="mt-2">
                                                    Estado: <span class="badge {{$estado == 'Activo' ? 'bg-success' : 'bg-secondary'}}">{{$estado}}</span>
                                                </div>
                                            </div>

                                            <hr>

                                            <div class="mb-3">
                                                <label class="small fw-bold text-muted">DETALLES TÉCNICOS</label>
                                                <p class="mb-1"><strong>Problema:</strong> {{$servi->problema}}</p>
                                                <p class="mb-1"><strong>Solución:</strong> {{$servi->solucion}}</p>
                                                <p><strong>Total + Repuestos:</strong> <span class="fw-bold">Q. {{$total}}</span></p>
                                            </div>

                                            <div class="mb-3 row g-2">
                                                <div class="col-6">
                                                    <div class="p-2 bg-white rounded shadow-sm text-center">
                                                        <small class="d-block text-muted">Recibido</small>
                                                        <strong>{{ \Carbon\Carbon::parse($servi->fecha_rev)->format('d/m/Y') }}</strong>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="p-2 bg-white rounded shadow-sm text-center">
                                                        <small class="d-block text-muted">Entrega</small>
                                                        <strong>{{ \Carbon\Carbon::parse($servi->fecha_ent)->format('d/m/Y') }}</strong>
                                                    </div>
                                                </div>
                                            </div>

                                            <hr>

                                            <div class="mb-3">
                                                <label class="small fw-bold text-muted">CLIENTE</label>
                                                <div class="d-flex align-items-center mb-2">
                                                    <div class="me-2"><i class="fas fa-user-circle fa-2x text-secondary"></i></div>
                                                    <div>
                                                        <div class="fw-bold">{{$servi->cliente->nombre}}</div>
                                                        <small class="text-muted"><i class="fas fa-phone me-1"></i> {{$servi->cliente->telefono1}} / {{$servi->cliente->telefono2}}</small>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="mb-3">
                                                <label class="small fw-bold text-muted">UBICACIÓN / CAJA</label>
                                                <p><i class="fas fa-box-open me-2 text-warning"></i> {{$servi->caja}}</p>
                                            </div>

                                            <div class="mb-3">
                                                <label class="small fw-bold text-muted">OBSERVACIONES</label>
                                                <div class="alert alert-warning p-2 small mb-0">
                                                    <i class="fas fa-sticky-note me-1"></i> {{$servi->observacion}}
                                                </div>
                                            </div>

                                            <div class="mb-4">
                                                <label class="small fw-bold text-muted">TÉCNICO</label>
                                                <p><i class="fas fa-user-cog me-2 text-info"></i> {{$servi->name}}</p>
                                            </div>

                                            <div class="d-grid gap-2">
                                                @if($estado == 'Activo')
                                                <a href="{{route('servi.entregar',['id' => $servi->id])}}" class="btn btn-primary" onclick="return confirm('¿Marcar como entregado?')">
                                                    <i class="fas fa-check-circle me-2"></i> Entregar {{$servi->articulo}}
                                                </a>
                                                @endif

                                                @if($estado == 'Inactivo')
                                                <a href="{{route('servi.entregar',['id' => $servi->id])}}" class="btn btn-secondary" onclick="return confirm('¿Reactivar servicio?')">
                                                    <i class="fas fa-undo me-2"></i> Reactivar {{$servi->articulo}}
                                                </a>
                                                @endif
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="content-editar" role="tabpanel">
                            <div class="card border-0">
                                <div class="card-body">
                                    <h5 class="fw-bold mb-4">Editar Información del Servicio</h5>
                                    <form action="{{route('servi.update', ['id' => $servi->id])}}" method="post">
                                        @csrf()
                                        @method('PUT')

                                        @include('admin.servicios.forms.from')

                                        <hr class="my-4">
                                        <button type="submit" class="btn btn-warning w-100 btn-lg text-white">
                                            <i class="fas fa-sync-alt me-2"></i> Actualizar Información
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="content-repuestos" role="tabpanel">
                            <div class="row justify-content-center">
                                <div class="col-md-8">
                                    <div class="card border shadow-none bg-light">
                                        <div class="card-body">
                                            <h5 class="fw-bold text-center mb-4"><i class="fas fa-tools me-2"></i>Agregar Nuevo Repuesto</h5>

                                            <form action="{{route('servi.storerepuesto')}}" method="post">
                                                @csrf()
                                                <input type="hidden" name="servicio" value="{{$servi->id}}">

                                                <div class="row g-3 mb-3">
                                                    <div class="col-md-6">
                                                        <label class="form-label fw-bold">Nombre del Repuesto</label>
                                                        <input type="text" class="form-control" required name="nombre" placeholder="Ej: Pantalla, Batería...">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label fw-bold">Fecha de Colocación</label>
                                                        <input type="date" class="form-control" required name="fecha" value="{{ date('Y-m-d') }}">
                                                    </div>
                                                </div>

                                                <div class="row g-3 mb-4">
                                                    <div class="col-md-6">
                                                        <label class="form-label fw-bold">Precio Venta (Cliente)</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text">Q.</span>
                                                            <input type="number" step="any" class="form-control" required name="costo">
                                                        </div>
                                                    </div>

                                                    <div class="col-md-6">
                                                        <label class="form-label fw-bold">Precio Costo (Interno)</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text">Q.</span>
                                                            <input type="number" step="any" class="form-control" required name="p_costo">
                                                        </div>
                                                    </div>
                                                </div>

                                                <button type="submit" class="btn btn-success w-100">
                                                    <i class="fa fa-save me-2"></i> Guardar Repuesto
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

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

@section('scripts')
<script src="{{asset('plugins/slim-select/slimselect.min.js')}}"></script>

<script>
    // Si tu formulario incluido (@include('admin.servicios.forms.from')) tiene selects,
    // puedes inicializarlos aquí si tienen IDs específicos.
    // Por ejemplo:
    /*
    new SlimSelect({
        select: '#idcliente' // Asegúrate de que este ID exista en el form incluido
    });
    */
</script>
@endsection