@extends('layouts.admin')

@section('styles')
<link rel="stylesheet" href="{{asset('plugins/slim-select/slimselect.min.css')}}">

<style>
    /* Corrección visual para SlimSelect en Bootstrap 5 */
    .ss-main {
        background-color: #fff !important;
        color: #495057 !important;
        border: 1px solid #ced4da !important;
        padding: 0.375rem 0.75rem !important;
        height: auto !important;
        border-radius: 0.375rem !important;
    }

    .ss-main .ss-single-selected .placeholder {
        background-color: transparent !important;
        opacity: 1 !important;
        cursor: pointer !important;
        display: block !important;
    }
</style>
@endsection

@section('content')
<div class="container-fluid py-4">
    <div class="row justify-content-center">
        <div class="col-12 col-lg-10">
            <div class="card shadow-sm border-0">

                <div class="card-header bg-white py-3 border-bottom">
                    <h5 class="m-0 fw-bold text-primary">
                        <i class="fas fa-tools me-2"></i>REGISTRO DE SERVICIOS
                    </h5>
                </div>

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

                    <form action="{{route('servi.store')}}" method="post">
                        @csrf()

                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <label for="idcliente" class="form-label fw-bold">Cliente <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <select class="form-select" name="cliente" id="idcliente" required>
                                        <option data-placeholder="true"></option>
                                        @foreach($clientes as $cliente)
                                        <option value="{{ $cliente->id}}">
                                            #{{$cliente->id}} - {{$cliente->nombre}} (NIT: {{$cliente->nit}})
                                        </option>
                                        @endforeach
                                    </select>
                                    <a href="{{route('cliente.create')}}" class="btn btn-outline-primary" data-bs-toggle="tooltip" title="Registrar Nuevo Cliente">
                                        <i class="fas fa-user-plus"></i>
                                    </a>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <label for="idusuario" class="form-label fw-bold">Técnico / Encargado <span class="text-danger">*</span></label>
                                <select class="form-select" name="usuario" id="idusuario" required>
                                    <option data-placeholder="true"></option>
                                    @foreach($users as $user)
                                    <option value="{{ $user->id}}">
                                        #{{$user->id}} - {{$user->name}} ({{$user->email}})
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-bold text-muted">Fecha de Recepción</label>
                                <input type="datetime-local" class="form-control" name="fecha_rev"
                                    value="{{ isset($servi->fecha_rev) ? $servi->fecha_rev : date('Y-m-d\TH:i') }}" required>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-bold text-muted">Fecha Estimada de Entrega</label>
                                <input type="datetime-local" class="form-control" name="fecha_ent"
                                    value="@isset($servi->fecha_ent){{ $servi->fecha_ent }}@endisset" required>
                            </div>
                        </div>

                        <hr class="my-4">

                        <div class="mb-4">
                            @include('admin.servicios.forms.from')
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-success btn-lg text-uppercase fw-bold shadow-sm">
                                <i class="fas fa-save me-2"></i> Guardar Servicio
                            </button>
                        </div>

                    </form>

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

@section('scripts')
<script src="{{asset('plugins/slim-select/slimselect.min.js')}}"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Inicializar SlimSelect para Cliente
        new SlimSelect({
            select: '#idcliente',
            placeholder: 'Buscar Cliente...',
            searchText: 'No encontrado',
            searchPlaceholder: 'Escriba nombre o NIT',
            allowDeselect: true
        });

        // Inicializar SlimSelect para Usuario/Técnico
        new SlimSelect({
            select: '#idusuario',
            placeholder: 'Seleccionar Técnico...',
            searchText: 'No encontrado',
            allowDeselect: true
        });

        // Tooltips de Bootstrap
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        });
    });
</script>
@endsection