@extends('layouts.app')

@section('styles')
{{-- Style Here --}}
    <!--  BEGIN CUSTOM STYLE FILE  -->
    <link rel="stylesheet" href="{{asset('plugins/src/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css')}}">
    <link rel="stylesheet" href="{{asset('plugins/src/glightbox/glightbox.min.css')}}">
    <link rel="stylesheet" href="{{asset('plugins/src/splide/splide.min.css')}}">

    @vite(['resources/scss/light/assets/components/tabs.scss'])
    @vite(['resources/scss/light/assets/components/accordions.scss'])
    @vite(['resources/scss/light/assets/apps/ecommerce-details.scss'])
    @vite(['resources/scss/dark/assets/components/tabs.scss'])
    @vite(['resources/scss/dark/assets/components/accordions.scss'])
    @vite(['resources/scss/dark/assets/apps/ecommerce-details.scss'])
    <!--  END CUSTOM STYLE FILE  -->
@endsection

@section('content')
<div class="row layout-top-spacing">
    <div class="col-xl-2 col-lg-3 col-md-3 col-sm-3 mb-2 ms-auto">
        <a href="{{ route('monitor.list') }}" class="btn btn-primary mb-2 me-4">+ Regresar</a>
    </div>
    <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 mb-4">
        <h2 style="color: black;">Edición y vista de la incidencia.</h2>
        <div class="widget-content widget-content-area br-8">

            <div class="row justify-content-center">
                <div class="col-xxl-5 col-xl-6 col-lg-7 col-md-7 col-sm-9 col-12 pe-3">
                    <!-- Swiper -->
                    <div id="main-slider" class="splide">
                        <div class="splide__track">
                                <ul class="splide__list">
                                    <li class="splide__slide">
                                        <a href="{{ asset('storage/incidencias/evidencia1.jpg') }}" class="glightbox">
                                            <img alt="evidencia1" src="{{ asset('storage/incidencias/evidencia1.jpg') }}">
                                        </a>
                                    </li>
                                    <li class="splide__slide">
                                        <a href="{{ asset('storage/incidencias/evidencia2.jpg') }}" class="glightbox">
                                            <img alt="evidencia2" src="{{ asset('storage/incidencias/evidencia2.jpg') }}">
                                        </a>
                                    </li>
                                    <li class="splide__slide">
                                        <a href="{{ asset('storage/incidencias/evidencia3.jpg') }}" class="glightbox">
                                            <img alt="evidencia3" src="{{ asset('storage/incidencias/evidencia3.jpg') }}">
                                        </a>
                                    </li>
                                    <li class="splide__slide">
                                        <a href="{{ asset('storage/incidencias/evidencia4.jpg') }}" class="glightbox">
                                            <img alt="evidencia4" src="{{ asset('storage/incidencias/evidencia4.jpg') }}">
                                        </a>
                                    </li>
                                    <li class="splide__slide">
                                        <a href="{{ asset('storage/incidencias/evidencia5.jpg') }}" class="glightbox">
                                            <img alt="evidencia5" src="{{ asset('storage/incidencias/evidencia5.jpg') }}">
                                        </a>
                                    </li>
                                </ul>
                        </div>
                        </div>

                        <div id="thumbnail-slider" class="splide">
                        <div class="splide__track">
                                <ul class="splide__list">
                                    <li class="splide__slide"><img alt="ecommerce" src="{{ asset('storage/incidencias/evidencia1.jpg') }}"></li>
                                    <li class="splide__slide"><img alt="ecommerce" src="{{ asset('storage/incidencias/evidencia2.jpg') }}"></li>
                                    <li class="splide__slide"><img alt="ecommerce" src="{{ asset('storage/incidencias/evidencia3.jpg') }}"></li>
                                    <li class="splide__slide"><img alt="ecommerce" src="{{ asset('storage/incidencias/evidencia4.jpg') }}"></li>
                                    <li class="splide__slide"><img alt="ecommerce" src="{{ asset('storage/incidencias/evidencia5.jpg') }}"></li>
                                </ul>
                        </div>
                        </div>

                </div>

                <div class="col-xxl-4 col-xl-5 col-lg-12 col-md-12 col-12 mt-xl-0 mt-5 align-self-center">

                    <div class="product-details-content">

                        <!--<span class="badge badge-light-danger mb-3">40% Sale off</span>-->

                        <h3 class="product-title mb-0">

                        @foreach($nameData  as $item)
                            {{ $item->name }}
                        @endforeach</h3>

                       <div class="review mb-4">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                            <span class="rating-score">Usuario que registro: <span class="rating-count"> @foreach($nameUss  as $uss)
                                {{ $uss->name }}
                            @endforeach</span></span>
                        </div>

                        <div class="row">

                            <div class="col-md-12 col-sm-9 col-9">

                                <div class="pricing">

                                    <span class="discounted-price" style="color: {{$incidencia->color}};">Color de Incidencias</span>
                                    <!--<span class="regular-price">$30</span>-->

                                </div>

                            </div>
                            <!--
                            <div class="col-md-3 col-sm-3 col-3 text-end">
                                <div class="product-share">
                                    <button class="btn btn-light-success btn-icon btn-rounded">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share-2"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>
                                    </button>
                                </div>
                            </div>-->

                        </div>

                        <hr class="mb-4">

                        <div class="row color-swatch mb-4">
                            <div class="col-xl-3 col-lg-6 col-sm-6 align-self-center">Color</div>
                            <div class="col-xl-9 col-lg-6 col-sm-6">
                                <div class="color-options text-xl-end">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2">
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault3">
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault4" checked>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault5">
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault6">
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault7">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row size-selector mb-4">
                            <div class="col-xl-6 col-lg-6 col-sm-6 align-self-center">Estatus: <b>{{$incidencia->estatus}}</b></div>
                        </div>

                        <div class="row size-selector mb-4">
                            <div class="col-xl-6 col-lg-6 col-sm-6 align-self-center">Fecha de Registro: {{$incidencia->fecha_hora_entrada?->format('d/m/Y') ?? "Sin registro"}}</div>
                        </div>

                        <div class="row size-selector mb-4">
                            <div class="col-xl-6 col-lg-6 col-sm-6 align-self-center">
                                Fecha de Cierre: {{ $incidencia->fecha_hora_final?->format('d/m/Y') ?? "Sin finalizar" }}
                            </div>
                        </div>



                        <hr class="mb-5 mt-4">

                        <div class="action-button text-center">

                            <div class="row">

                                <div class="col-xxl-7 col-xl-7 col-sm-6 mb-sm-0 mb-3">
                                    <button class="btn btn-primary w-100 btn-lg">
                                    Editar</button>
                                </div>

                                <div class="col-xxl-5 col-xl-5 col-sm-6">
                                    <button class="btn btn-success w-100 btn-lg">Finalizar</button>
                                </div>

                            </div>

                        </div>

                        <div class="secure-info mt-4">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shield"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
                            <p>Revisa muy bien los comentarios antes de editarlos.</p>
                        </div>

                    </div>

                </div>
            </div>

        </div>

    </div>

    <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 mb-4">

        <div class="widget-content widget-content-area br-8">

            <div class="production-descriptions simple-pills">

                <div class="pro-des-content">

                    <div id="iconsAccordion" class="accordion-icons accordion">
                        <div class="card">
                            <div class="card-header" id="headingTwo3">
                                <section class="mb-0 mt-0">
                                    <div role="menu" class="collapsed" data-bs-toggle="collapse" data-bs-target="#iconAccordionTwo" aria-expanded="false" aria-controls="iconAccordionTwo">
                                        <div class="accordion-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg></div>
                                        Observaciones de Inicio <div class="icons"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></div>
                                    </div>
                                </section>
                            </div>
                            <div id="iconAccordionTwo" class="collapse" aria-labelledby="headingTwo3" data-bs-parent="#iconsAccordion">
                                <div class="card-body">

                                    <div class="row">

                                        <div class="col-md-12 mx-auto">

                                            <div class="media mb-4">
                                                <div class="avatar me-sm-4 mb-sm-0 me-0 mb-3">
                                                    <img alt="avatar" src="{{ asset('storage/images/user-profile.jpeg') }}" class="rounded-circle">
                                                </div>
                                                <div class="media-body">
                                                    <h4 class="media-heading mb-1">Admin 1</h4>
                                                    <div class="meta-tags">a min ago</div>
                                                    <p class="media-text mt-2">
                                                        <div class="form-group">
                                                            <input type="text"
                                                                class="form-control mb-3 @error('observaciones_inicio') is-invalid @enderror"
                                                                id="observaciones_inicio" name="observaciones_inicio"
                                                                placeholder="Nombre completo"
                                                                value="{{ old('observaciones_inicio', $incidencia->observaciones_inicio ?? "Sin observaciones" ) }}">

                                                            @error('observaciones_inicio')
                                                                <div class="invalid-feedback">
                                                                    {{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </p>
                                                </div>
                                            </div>

                                        </div>

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

                    <div id="iconsAccordionOb" class="accordion-icons accordion">
                        <div class="card">
                            <div class="card-header" id="headingTwo3Ob">
                                <section class="mb-0 mt-0">
                                    <div role="menu" class="collapsed" data-bs-toggle="collapse" data-bs-target="#iconAccordionTwoOb" aria-expanded="false" aria-controls="iconAccordionTwoOb">
                                        <div class="accordion-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg></div>
                                        Observaciones de Cierre <div class="icons"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></div>
                                    </div>
                                </section>
                            </div>
                            <div id="iconAccordionTwoOb" class="collapse" aria-labelledby="headingTwo3Ob" data-bs-parent="#iconsAccordionOb">
                                <div class="card-body">

                                    <div class="row">

                                        <div class="col-md-12 mx-auto">

                                            <div class="media mb-4">
                                                <div class="avatar me-sm-4 mb-sm-0 me-0 mb-3">
                                                    <img alt="avatar" src="{{ asset('storage/images/user-profile.jpeg') }}" class="rounded-circle">
                                                </div>
                                                <div class="media-body">
                                                    <h4 class="media-heading mb-1">Admin 1</h4>

                                                    <div class="meta-tags">a min ago</div>
                                                    <p class="media-text mt-2">
                                                        <div class="form-group">
                                                            <input type="text"
                                                                class="form-control mb-3 @error('observaciones_inicio') is-invalid @enderror"
                                                                id="observaciones_cierre" name="observaciones_cierre"
                                                                placeholder="Nombre completo"
                                                                value="{{ old('observaciones_cierre', $incidencia->observaciones_cierre ?? "Sin observaciones" ) }}">

                                                            @error('observaciones_cierre')
                                                                <div class="invalid-feedback">
                                                                    {{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </p>
                                                </div>
                                            </div>

                                        </div>

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


                </div>
            </div>

        </div>

    </div>

</div>
@endsection

@section('scripts')
{{-- Scripts Here --}}
    <script src="{{asset('plugins/src/global/vendors.min.js')}}"></script>
    <script src="{{asset('plugins/src/bootstrap-touchspin/jquery.bootstrap-touchspin.min.js')}}"></script>
    <script src="{{asset('plugins/src/glightbox/glightbox.min.js')}}"></script>
    <script src="{{asset('plugins/src/splide/splide.min.js')}}"></script>
    @vite(['resources/js/apps/ecommerce-details.js'])
@endsection