@extends('layout.administrator.index')
@section('title', 'Comentarios')

@section('css')
    <link href="{{ asset('assets/minimalpro/vendor_components/select2/dist/css/select2.min.css') }}" rel="stylesheet" />
    <style>
        .select2-container--default .select2-selection--multiple {
            min-height: 34px;
            border: 1px solid #d2d6de;
            border-radius: 0;
        }
        .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
            min-width: 260px !important;
            margin-top: 6px;
        }
    </style>
@endsection

@section('content')
    <div class="content-wrapper">
        <section class="content-header">
            {{-- <h1>Comentarios</h1> --}}
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('administrator.dashboard') }}"><i class="fa fa-dashboard"></i>
                        Inicio</a></li>
                <li class="breadcrumb-item active">Comentarios</li>
            </ol>
        </section>

        <section class="content">
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif
            @if (session('danger'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ session('danger') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif
            <div class="row">
                <div class="col-lg-12">
                    <div class="row mb-4 text-center">
                        <div class="col-md-4">
                            <div class="card shadow-sm border-0">
                                <div class="card-body">
                                    <h6 class="text-muted mb-1">Total Comentarios</h6>
                                    <h3 class="fw-bold mb-0">{{count($comments_all)}}</h3>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card shadow-sm border-0">
                                <div class="card-body">
                                    <h6 class="text-muted mb-1">Activos</h6>
                                    <h3 class="fw-bold mb-0">{{count($comments_active)}}</h3>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card shadow-sm border-0">
                                <div class="card-body">
                                    <h6 class="text-muted mb-1">Resultados</h6>
                                    <h3 class="fw-bold mb-0">{{count($comments)}}</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="idContentFilter" class="box box-solid bg_dark hide">
                        <div class="box-header with-border">
                            <div class="row align-items-center">
                                <div class="col-12">
                                    <h4 class="box-title">Busqueda avanzada</h4>
                                </div>
                            </div>
                        </div>
                        <div class="box-body">
                            <form action="{{ route('administrator.comments.index') }}" method="get" files="true"
                                enctype="multipart/form-data">
                                @csrf
                                <div class="row g-3">

                                    <div class="col-md-3">
                                        <label for="system" class="form-label">Sistema</label>
                                        <select class="form-control" id="system" name="system">
                                            <option value="">Todos</option>
                                            @foreach ($systems as $sistema)
                                                <option value="{{ $sistema->id }}">{{ $sistema->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-md-3">
                                        <label for="component" class="form-label">Componente</label>
                                        <select class="form-control" id="component" name="component">
                                            <option value="">Todos</option>
                                            @foreach ($components as $componente)
                                                <option value="{{ $componente->id }}">{{ $componente->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-md-2">
                                        <label for="superclient" class="form-label">Supercliente</label>
                                        <select class="form-control" id="superclient" name="superclient">
                                            <option value="">Todos</option>
                                            @foreach ($superclients as $supercliente)
                                                <option value="{{ $supercliente->id }}">{{ $supercliente->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-md-2">
                                        <label for="account" class="form-label">Cuenta</label>
                                        <select class="form-control" id="account" name="account">
                                            <option value="">Todos</option>
                                           @foreach ($fleets as $cuenta)
                                                <option value="{{ $cuenta->id }}">{{ $cuenta->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-md-2">
                                        <label for="status" class="form-label">Estado</label>
                                        <select class="form-control" id="status" name="status">
                                            <option value="">Todos</option>
                                            <option value="1">Activo</option>
                                            <option value="2">Inactivo</option>
                                        </select>
                                    </div>

                                    <div class="col-md-12 text-end mt-5">
                                        <div class="row">
                                            <div class="col-md-6 text-left">
                                                <a href="{{ route('administrator.comments.index') }}"
                                                    class="btn btn-danger"><i class="fa fa-refresh"
                                                        aria-hidden="true"></i> Limpiar</a>
                                            </div>
                                            <div class="col-md-6 text-right">
                                                <button type="submit" class="btn btn-info"><i class="fa fa-search"
                                                        aria-hidden="true"></i> Buscar</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="box">
                        <div class="box-header with-border">
                            <div class="row align-items-center">
                                <div class="col-6">
                                    <h4 class="box-title">Comentarios</h4>
                                </div>
                                <div class="col-6">
                                    <div class="box-controls pull-right">
                                        <div class="box-header-actions">
                                            <button type="button" class="btn btn-sm btn-info pointer"
                                                data-toggle="modal" data-target="#idAddAccount"><i
                                                    class="fa fa-plus"></i> Nuevo comentario</button>
                                            <a href="{{ route('administrator.consequences.index') }}"
                                                class="btn btn-sm btn-warning pointer"><i
                                                    class="fa fa-list"></i> Consecuencias</a>
                                            <a href="{{ route('administrator.causes.index') }}"
                                                class="btn btn-sm btn-warning pointer"><i
                                                    class="fa fa-sitemap"></i> Causas</a>
                                            <button type="button" class="btn btn-sm btn-info" id="idBtnFilter"><i
                                                    class="fa fa-filter"></i> Filtro</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="box-body">
                            <table class="table table-sm table-hover table-responsive" id="customTable">
                                <thead>
                                    <tr>
                                        <th class="text-center">Código</th>
                                        <th class="text-center">Texto</th>
                                        <th class="text-center">Sistema</th>
                                        <th class="text-center">Componente</th>
                                        <th class="text-center">Estado</th>
                                        <th class="text-center">Fecha Creación</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                        
                                <tbody class="text-center">
                                    @foreach ($comments as $comentario)
                                        <tr>
                                            <td><strong>{{ $comentario->code ?? '---'}}</strong></td>
                                            <td>{{ $comentario->comment_text ?? '---'}}</td>
                                            <td>
                                                <span
                                                    class="badge bg-secondary text-capitalize">{{ $comentario->system->name ?? '---'}}</span>
                                            </td>
                                            <td>{{ $comentario->component->name ?? '---'}}</td>
                                            <td>
                                                @if ($comentario->status == 1)
                                                    <span class="badge bg-success">Activo</span>
                                                @else
                                                    <span class="badge bg-danger">Inactivo</span>
                                                @endif
                                            </td>
                                            <td>{{ $comentario->created_at ?? '---'}}</td>
                                            <td>
                                                <a href="#" 
                                                    class="btn btn-info btn-xs btnEditComment" 
                                                    data-id="{{ $comentario->id }}">
                                                        <i class="fa fa-pencil" aria-hidden="true"></i>
                                                </a>
                                                <button class="btn btn-danger btn-xs"><i class="fa fa-trash" aria-hidden="true"></i></button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <div class="d-flex justify-content-center mt-3">
                                {{ $comments->links() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <div class="modal fade" id="idAddAccount" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Nuevo Comentario</h5>
                </div>
                <div class="modal-body">
                    <form action="{{route('administrator.comments.store')}}" method="post">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label for="comment_code" class="form-label">Código del comentario</label>
                                <input type="text" id="comment_code" name="comment_code" class="form-control">
                            </div>
                            <div class="col-md-8">
                                <label for="comment_text" class="form-label">Texto del comentario</label>
                                <textarea class="form-control" id="comment_text" name="comment_text" rows="2"></textarea>
                            </div>

                            <div class="col-md-4">
                                <label for="system_new" class="form-label">Sistema asociado</label>
                                <select class="form-control" id="system_new" name="system">
                                    <option value="">Seleccione</option>
                                    @foreach ($systems as $sistema)
                                        <option value="{{ $sistema->id }}">{{ $sistema->name }}</option>
                                    @endforeach
                                    
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label for="component_new" class="form-label">Componente asociado</label>
                                <select class="form-control" id="component_new" name="component">
                                    <option value="">Seleccione</option>
                                    @foreach ($components as $componente)
                                        <option value="{{ $componente->id }}">{{ $componente->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-2">
                                <label for="superclient_new" class="form-label">Supercliente</label>
                                <select class="form-control" id="superclient_new" name="superclient">
                                    <option value="">Opcional</option>
                                    @foreach ($superclients as $supercliente)
                                        <option value="{{ $supercliente->id }}">{{ $supercliente->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-2">
                                <label for="account_new" class="form-label">Cuenta</label>
                                <select class="form-control" id="account_new" name="account">
                                    <option value="">Opcional</option>
                                    {{-- Se llenará dinámicamente con JS --}}
                                </select>
                            </div>

                            <div class="col-md-12 mt-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="status_new" name="status"
                                        checked>
                                    <label class="form-check-label" for="status_new">Activo</label>
                                </div>
                            </div>
                        </div>

                        <div class="mt-4 text-end">
                            <button type="submit" class="btn btn-info">Guardar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="idEditComment" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Editar Comentario</h5>
                </div>
                <div class="modal-body">
                    <form id="formEditComment" method="POST">
                        @csrf
                        @method('PUT')

                        <input type="hidden" id="edit_id">

                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">Código</label>
                                <input type="text" id="edit_code" name="comment_code" class="form-control">
                            </div>

                            <div class="col-md-8">
                                <label class="form-label">Texto</label>
                                <textarea id="edit_text" name="comment_text" class="form-control" rows="2"></textarea>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">Sistema</label>
                                <select id="edit_system" name="system" class="form-control">
                                    <option value="">Seleccione</option>
                                    @foreach ($systems as $sistema)
                                        <option value="{{ $sistema->id }}">{{ $sistema->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">Componente</label>
                                <select id="edit_component" name="component" class="form-control">
                                    <option value="">Seleccione</option>
                                    @foreach ($components as $c)
                                        <option value="{{ $c->id }}">{{ $c->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-2">
                                <label class="form-label">Supercliente</label>
                                <select id="edit_superclient" name="superclient" class="form-control">
                                    <option value="">Opcional</option>
                                    @foreach ($superclients as $sc)
                                        <option value="{{ $sc->id }}">{{ $sc->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-2">
                                <label class="form-label">Cuenta</label>
                                <select id="edit_account" name="account" class="form-control">
                                    <option value="">Opcional</option>
                                </select>
                            </div>

                            <div class="col-md-12 mt-3">
                                <div class="form-check form-switch">
                                    <input type="checkbox" id="edit_status" name="status" class="form-check-input">
                                    <label for="edit_status" class="form-check-label">Activo</label>
                                </div>
                            </div>

                        </div>

                        <div class="mt-4 text-end">
                            <button type="submit" class="btn btn-info">Actualizar</button>
                        </div>

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


@endsection

@section('js')
    <script src="{{ asset('assets/minimalpro/vendor_components/select2/dist/js/select2.js') }}"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>

    <script type="text/javascript">
        $(function () {
            $("#idBtnFilter").click(function() {
                $("#idContentFilter").slideToggle("slow");
            });

            $('#customTable').DataTable();
        });
    </script>

    <script>
        document.getElementById('superclient_new').addEventListener('change', function () {
            const superclientId = this.value;
            const accountSelect = document.getElementById('account_new');

            // Limpiar fleets actuales
            accountSelect.innerHTML = '<option value="">Opcional</option>';

            if (!superclientId) return;

            fetch(`/administrator/fleets/by-superclient/${superclientId}`)
                .then(response => response.json())
                .then(fleets => {
                    fleets.forEach(fleet => {
                        let opt = document.createElement('option');
                        opt.value = fleet.id;
                        opt.textContent = fleet.name;
                        accountSelect.appendChild(opt);
                    });
                });
        });
    </script>

    <script>
        document.querySelectorAll('.btnEditComment').forEach(btn => {
            btn.addEventListener('click', function () {

                const id = this.dataset.id;

                fetch(`/administrator/comments/${id}/json`)
                    .then(res => res.json())
                    .then(data => {

                        // Inputs básicos
                        document.getElementById('edit_id').value = data.id;
                        document.getElementById('edit_code').value = data.code;
                        document.getElementById('edit_text').value = data.comment_text;

                        // Select sistema
                        document.getElementById('edit_system').value = data.system_id;

                        // Select componente
                        document.getElementById('edit_component').value = data.component_id;

                        // Supercliente
                        document.getElementById('edit_superclient').value = data.supercustomer_id;

                        // Status
                        document.getElementById('edit_status').checked = data.status == 1;

                        // Cargar fleets dependientes
                        const accountSelect = document.getElementById('edit_account');
                        accountSelect.innerHTML = '<option value="">Opcional</option>';

                        if (data.supercustomer_id) {
                            fetch(`/administrator/fleets/by-superclient/${data.supercustomer_id}`)
                                .then(res => res.json())
                                .then(fleets => {
                                    fleets.forEach(f => {
                                        let opt = document.createElement('option');
                                        opt.value = f.id;
                                        opt.textContent = f.name;
                                        if (f.id === data.customer_id) {
                                            opt.selected = true;
                                        }
                                        accountSelect.appendChild(opt);
                                    });
                                });
                        }

                        // Setear action del formulario
                        document.getElementById('formEditComment').action =
                            `/administrator/comments/update/${id}`;

                        // Abrir modal
                        $('#idEditComment').modal('show');
                    });
            });
        });
    </script>


@endsection