@extends('adminlte::page')

@section('title', 'Servicios')

@section('css')
    <style>
        #drop-area {
            position: relative;
            cursor: pointer;
        }

        #drop-area.highlight {
            background-color: #f0f8ff;
        }

        .gallery img {
            width: 100px;
            height: 100px;
            margin: 10px;
            object-fit: cover;
            border-radius: 5px;
        }
    </style>
@endsection

@section('content_header')
    <h1>Dashboard</h1>
@endsection

@section('content')
    <div class="row">
        <div class="col-3 mb-4">
            <h5 class="text-bold">Agregue nuevas empresas</h5>
            @if ($categories->count() == 0)
                <p class="text-danger">Se necesitan categorias para relacionar empresas</p>
            @else
                <p>Aqui puede entrar lo de categoría</p>
                <a href="{{ Route('makeService') }}" class="btn btn-success w-100 mb-3" {{-- id="newService" --}}>Agregar nueva
                    empresa</a>
            @endif
            <div class="row">
                <div class="col">
                    <a href="" class="btn btn-info w-100" id="newCategory">Agregar categoria</a>
                </div>
            </div>
        </div>

        <div class="col-9">
            <div class="card">
                <div class="card-header">
                    <div class="row align-items-center">
                        <!-- Columna izquierda -->
                        <div class="col-md-6">
                            <h3 class="card-title">Selecciona una opción para mostrar</h3>
                            <select id="optionsShow" class="form-control mt-2 w-50">
                                <option value="services" @selected(!isset($returnCategories) && $services->count() > 0 && $categories->count() > 0)>Servicios</option>
                                <option value="categories" @selected(isset($returnCategories) || $categories->count() == 0 || $services->count() == 0)>Categorias</option>
                            </select>
                        </div>

                        <!-- Columna derecha -->
                        <div class="col-md-6 mt-4 mt-1" id="searchServices">
                            <form action="{{ Route('searchServices') }}" method="GET" class="w-100">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-10">
                                            <input class="form-control" type="text" placeholder="Buscar servicio.."
                                                name="q" value="{{ request('q') }}">
                                        </div>
                                        <div class="col-2 d-flex justify-content-end">
                                            <button class="btn custom-hover-button" type="submit">
                                                <i class="bi bi-search"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="col-md-6 mt-4 mt-1" id="searchCategories" style="display: none;">
                            <form action="{{ Route('searchServiceCategories') }}" method="GET" class="w-100">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-10">
                                            <input class="form-control" type="text" placeholder="Buscar categoría.."
                                                name="q" value="{{ request('q') }}">
                                        </div>
                                        <div class="col-2 d-flex justify-content-end">
                                            <button class="btn custom-hover-button" type="submit">
                                                <i class="bi bi-search"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div id="servicesTable" class="">
                        <table class="table table-bordered table-hover w-100">
                            <thead>
                                <tr>
                                    <th>Nombre de la empresa</th>
                                    <th>Estado</th>
                                    <th>Autor</th>
                                    <th>Tipo de suscripción</th>
                                    <th> </th>
                                    <th>*</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{-- Actions --}}
                                @forelse($services as $service)
                                    <tr data-widget="expandable-table" aria-expanded="false" class="row-loading">
                                        <td>{{ $service->service_name }}</td>
                                        <td>
                                            @isset($service->status->status)
                                                @if ($service->status->id == 1)
                                                    <span class="badge bg-success">{{ $service->status->status }}</span>
                                                @elseif($service->status->id == 3 || $service->status->id == 4)
                                                    <span class="badge bg-danger">{{ $service->status->status }}</span>
                                                @elseif($service->status->id == 2)
                                                    <span class="badge bg-warning">{{ $service->status->status }}</span>
                                                @else
                                                    <span class="badge bg-secondary">{{ $service->status->status }}</span>
                                                @endif
                                            @endisset
                                        </td>
                                        <td>{{ $service->author }}</td>
                                        <td>
                                            <p class="text-break text-capitalize">
                                                <span
                                                    class="d-block">{{ $service->suscription_type ?? 'Creada por administrador' }}</span>
                                                @isset($service->user)
                                                    @php
                                                        $daysRemaining = $service->checkExpSubscription(0);
                                                        $expDate = $service->checkExpSubscription(1);
                                                        if ($daysRemaining === 0) {
                                                            $daysRemainingText = 'La suscripción termina hoy.';
                                                            $alertClass = 'text-warning';
                                                        } elseif ($daysRemaining > 0 && $daysRemaining <= 5) {
                                                            $daysRemainingText = "Quedan $daysRemaining días.";
                                                            $alertClass = 'text-warning';
                                                        } elseif ($daysRemaining > 5) {
                                                            $daysRemainingText = "Quedan $daysRemaining días.";
                                                            $alertClass = 'text-success';
                                                        } else {
                                                            $daysRemainingText = 'La suscripción ya expiró.';
                                                            $alertClass = 'text-danger';
                                                        }
                                                    @endphp
                                                    @if ($service->suscription_type == 'mes de prueba')
                                                        <span class="d-block">
                                                            Expira hasta el 2026
                                                        </span>
                                                    @else
                                                        <span class="{{ $alertClass }} d-block">
                                                            {{ $daysRemainingText }}
                                                        </span>
                                                        @if ($expDate)
                                                            <span class="d-block">
                                                                Expira el: {{ $expDate }}
                                                            </span>
                                                        @endif
                                                    @endif
                                                @endisset
                                            </p>
                                        </td>
                                        <td>
                                            @if ($service->draft)
                                                <span class="badge bg-secondary">Borrador</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="dropdown" data-bs-display="static">
                                                <button class="btn btn-outline-secondary btn-sm dropdown-toggle"
                                                    type="button" data-bs-toggle="dropdown">
                                                    <i class="bi bi-gear"></i>
                                                </button>

                                                <ul class="dropdown-menu dropdown-menu-end">
                                                    <li>
                                                        <p class="dropdown-item">Actualizado por ultima vez:
                                                            {{ $service->updated_at }}</p>
                                                    </li>
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    <li>
                                                        <a href="" class="dropdown-item showServiceDetails"
                                                            data-service-id="{{ $service->id }}">
                                                            <i class="bi bi-eye me-1"></i>
                                                            Ver mas detalles del servicio
                                                        </a>
                                                    </li>
                                                    <li>
                                                        @if ($service->draft && $service->iam_status_id != 4)
                                                            <a href="" class="dropdown-item publishService m-1"
                                                                data-service-id="{{ $service->id }}"
                                                                data-service-name="{{ $service->service_name }}">
                                                                <i class="bi bi-check2-circle"></i>
                                                                Publicar empresa
                                                            </a>
                                                            <form id="publishService_{{ $service->id }}"
                                                                action="{{ route('publishService') }}" method="POST">
                                                                @csrf
                                                                <input type="hidden" name="idService"
                                                                    value="{{ $service->id }}">
                                                            </form>
                                                            @isset($service->user)
                                                                <a href="" class="dropdown-item sendNotification m-1"
                                                                    data-service-id="{{ $service->id }}"
                                                                    data-service-name="{{ $service->service_name }}">
                                                                    <i class="bi bi-chat"></i>
                                                                    Enviar mensaje
                                                                </a>
                                                            @endisset
                                                        @else
                                                            @if ($service->draft && $service->iam_status_id == 4)
                                                                <a href="" class="dropdown-item draftService m-1"
                                                                    data-service-id="{{ $service->id }}"
                                                                    data-service-name="{{ $service->service_name }}"
                                                                    data-service-draft="{{ $service->draft }}">
                                                                    <i class="bi bi-check2-circle"></i>
                                                                    Publicar empresa
                                                                </a>
                                                            @else
                                                                <a href="" class="dropdown-item draftService m-1"
                                                                    data-service-id="{{ $service->id }}"
                                                                    data-service-name="{{ $service->service_name }}"
                                                                    data-service-draft="{{ $service->draft }}">
                                                                    <i class="bi bi-pencil"></i>
                                                                    Colocar en borrador
                                                                </a>
                                                            @endif
                                                            <form id="draftService_{{ $service->id }}"
                                                                action="{{ route('draftService') }}" method="POST">
                                                                @csrf
                                                                <input type="hidden" name="idService"
                                                                    value="{{ $service->id }}">
                                                                <input type="hidden" name="sendMail" id="sendDraftMail">
                                                            </form>
                                                        @endif
                                                    </li>
                                                    <li>
                                                        @if ($service->iam_status_id != 5)
                                                            <a href=""
                                                                class="dropdown-item generateLinkService m-1"
                                                                data-service-id="{{ $service->id }}"
                                                                data-service-name="{{ $service->service_name }}">
                                                                <i class="bi bi-cash"></i>
                                                                Solicitar pago del servicio
                                                            </a>
                                                            <form id="generateLinkService_{{ $service->id }}"
                                                                action="{{ route('generateLinkService') }}"
                                                                method="POST">
                                                                @csrf
                                                                <input type="hidden" name="idService"
                                                                    value="{{ $service->id }}">
                                                                <input type="hidden" name="typeSubscription"
                                                                    id="typeSubscription">
                                                            </form>
                                                        @endif
                                                    </li>
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    @if ($service->draft == false)
                                                        <li>
                                                            <a href="" class="dropdown-item generateLog m-1"
                                                                data-service-id="{{ $service->id }}"
                                                                data-service-name="{{ $service->service_name }}">
                                                                <i class="bi bi-archive"></i>
                                                                Generar registro
                                                            </a>
                                                            <form action="{{ Route('makingTrackLog') }}" method="post"
                                                                id="makingTrackLogForm_{{ $service->id }}">
                                                                @csrf
                                                                <input type="hidden" name="serviceId"
                                                                    value="{{ $service->id }}">
                                                                <input type="hidden" name="sendMail" id="sendUserMail">
                                                            </form>
                                                        </li>
                                                        @if ($service->trackingHistory->count() > 0)
                                                            <li>
                                                                <a href="{{ Route('showLogs', $service->id) }}"
                                                                    class="dropdown-item m-1">
                                                                    <i class="bi bi-archive-fill"></i>
                                                                    Ver registros
                                                                </a>
                                                            </li>
                                                        @endif
                                                        @if ($service->mails->count() > 0)
                                                            <li>
                                                                <a href="{{ Route('showServiceMails', $service->id) }}"
                                                                    class="dropdown-item m-1">
                                                                    <i class="bi bi-envelope"></i>
                                                                    Ver correos
                                                                </a>
                                                            </li>
                                                        @endif
                                                        <form action="{{ Route('downloadServiceImages') }}"
                                                            method="post" id="downloadImagesForm_{{ $service->id }}">
                                                            @csrf
                                                            <input type="hidden" name="serviceId"
                                                                value="{{ $service->id }}">
                                                            <button type="submit" class="dropdown-item">
                                                                <i class="bi bi-images"></i>
                                                                Descargar imagenes
                                                            </button>
                                                        </form>
                                                    @endif
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    <li>
                                                        <a href="{{ Route('editService', $service->id) }}"
                                                            class="dropdown-item m-1">
                                                            <i class="bi bi-pencil-square me-1"></i>
                                                            Modificar servicio
                                                        </a>
                                                    </li>
                                                    <li>
                                                        @if ($service->iam_status_id != 3 && $service->suscription_id)
                                                            <a href=""
                                                                class="dropdown-item cancelService text-danger m-1"
                                                                data-service-id="{{ $service->id }}"
                                                                data-service-name="{{ $service->service_name }}">
                                                                <i class="bi bi-trash me-1"></i>
                                                                Cancelar servicio
                                                            </a>
                                                            <form id="cancelService_{{ $service->id }}"
                                                                action="{{ route('cancelService') }}" method="POST">
                                                                @csrf
                                                                <input type="hidden" name="idService"
                                                                    value="{{ $service->id }}">
                                                                <input type="hidden" name="sendCancelMail"
                                                                    id="sendCancelMail">
                                                            </form>
                                                        @else
                                                            <a href=""
                                                                class="dropdown-item dropService text-danger m-1"
                                                                data-service-id="{{ $service->id }}">
                                                                <i class="bi bi-trash me-1"></i>
                                                                Borrar servicio
                                                            </a>
                                                            <form id="dropService_{{ $service->id }}"
                                                                action="{{ route('dropService') }}" method="POST">
                                                                @csrf
                                                                @method('DELETE')
                                                                <input type="hidden" name="idDropService"
                                                                    value="{{ $service->id }}">
                                                            </form>
                                                        @endif
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td class="bg-secondary" colspan="3" align="center">Sin servicios disponibles,
                                            cree uno nuevo
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <div id="categoriesTable" class="">
                        <table class="table table-bordered table-hover w-100">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Nombre de la categoria</th>
                                    <th>Servicios asociados</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{-- Actions --}}
                                @forelse($categories as $category)
                                    <tr data-widget="expandable-table" aria-expanded="false" class="row-loading">
                                        <td>{{ $category->id }}</td>
                                        <td>{{ $category->display_name }}</td>
                                        <td>{{ $category->services->count() }}</td>
                                    </tr>
                                    <tr class="expandable-body row-loading">
                                        <td colspan="3" disabled>
                                            <div class="d-flex mx-auto justify-content-around">
                                                <div class="row">
                                                    <div class="col border">
                                                        <p class="mt-1">Actualizado por ultima vez:
                                                            {{ $category->updated_at }}</p>
                                                    </div>
                                                    <div class="col-mg border">
                                                        <a href="" class="btn btn-warning modCategory m-1"
                                                            data-category-id="{{ $category->id }}"
                                                            data-category-name="{{ $category->display_name }}"
                                                            data-category-action="{{ Route('modServiceCategory') }}">
                                                            Modificar nombre</a>

                                                        <a href="" class="btn btn-danger dropCategory m-1"
                                                            data-category-id="{{ $category->id }}">
                                                            Borrar categoria</a>

                                                        <form id="dropCategory_{{ $category->id }}"
                                                            action="{{ route('dropServiceCategory') }}" method="POST">
                                                            @csrf
                                                            @method('DELETE')
                                                            <input type="hidden" name="idDropCategory"
                                                                value="{{ $category->id }}">
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td class="bg-secondary" colspan="3" align="center">Sin categorias disponibles
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Send notifications --}}
    <div class="modal fade" id="notificationsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        role="dialog" aria-labelledby="notLinkedModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-info" id="titleNotificationsModal">Enviar notificación</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form autocomplete="off" id="notificationsForm" action="{{ Route('sendServiceNotification') }}"
                        method="post">
                        @csrf
                        <input type="hidden" name="serviceId" value="" id="serviceId">
                        <div class="mb-3 row">
                            <div class="col-3 mt-3 text-center">
                                <input type="checkbox" name="needInfo" id="needInfo" class="form-check-input">
                                <label for="needInfo" class="form-check-label">Falta info</label>
                            </div>
                            <div class="col-9">
                                <label for="reasonInfo" class="form-label">Seleccione motivo:</label>
                                <select name="reasonInfo" id="reasonInfo" class="form-control" disabled>
                                    <option value="">Seleccione una*</option>
                                    <option value="needInfo">Falta Información</option>
                                    <option value="needImages">Faltan imagenes</option>
                                    <option value="contentError">Errores en el contenido</option>
                                </select>
                                <div id="selectReasonFeedback" class="invalid-feedback">
                                    Selecciona una de estas opciones
                                </div>
                            </div>
                        </div>
                        <div class="mb-3 row justify-content-center">
                            <div class="col-auto">
                                <div class="form-check">
                                    <input type="checkbox" name="sendMessage" id="sendMessage" class="form-check-input">
                                    <label for="sendMessage" class="form-check-label">¿Enviar comentarios?</label>
                                </div>
                            </div>
                            <div class="col-auto">
                                <div class="form-check">
                                    <input type="checkbox" name="canEdit" id="canEdit" class="form-check-input">
                                    <label for="canEdit" class="form-check-label">¿Puede editar el usuario?</label>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3" style="display: none;" id="messageContainer">
                            <label for="message" class="form-label">Mensaje:</label>
                            <textarea name="message" id="message" class="form-control" rows="5"
                                placeholder="Escribe un mensaje para el usuario" disabled></textarea>
                            <div id="minMessageFeedback" class="invalid-feedback">
                                Escribe como si fuera un correo, esto es para que el usuario sepa que le falta
                                información
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-info" id="submitNotificationsForm">Enviar
                                Comentarios</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Show makeLinkService --}}
    <div class="modal fade" id="makeLinkServiceModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        role="dialog" aria-labelledby="notLinkedModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-info" id="showServiceModalTitle">Generar link de pago del servicio</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('generateLinkService') }}" method="POST" id="linkServiceForm">
                        @csrf
                        <input type="hidden" name="idService" value="{{ $service->id }}">
                        <div class="form-input">
                            <label for="userSelect">Selecciona el usuario a vincular (opcional):</label>
                            <select name="userSelect" id="userSelect" class="form-control">
                                <option value="" disabled selected>Selecciona un usuario</option>
                                @foreach ($users as $user)
                                    <option value="{{ $user->email }}">
                                        {{ $user->display_name }} ({{ $user->email }})
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-bold">Si se desea, puede vincular algun cliente a este servicio</small>
                        </div>
                        <div class="mt-3">
                            <label for="type">Tipo de suscripción: </label>
                            <div class="form-check mb-1">
                                <input class="form-check-input" type="radio" name="typeSubscription" id="mesRadio"
                                    value="mensual" required>
                                <label class="form-check-label" for="mesRadio">Mes ($300 MXN)</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="typeSubscription" id="anualRadio"
                                    value="anual" required>
                                <label class="form-check-label" for="anualRadio">Anual ($3060 MXN)</label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary" id="sendLinkServiceForm">Generar link de pago</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Show service --}}
    <div class="modal fade" id="showServiceModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        role="dialog" aria-labelledby="notLinkedModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-info" id="showServiceModalTitle">Detalles del servicio</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="showServicePartial">
                    {{-- Here a partial --}}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar detalles</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Add/Mod category --}}
    <div class="modal fade" id="categoriesModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        role="dialog" aria-labelledby="notLinkedModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-success" id="titleCategoryModal">Agregar Categoria</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form autocomplete="off" id="categoriesForm" action="{{ Route('addServiceCategory') }}"
                        method="post">
                        @csrf
                        <div class="mb-3 form-group">
                            <label for="category_name" class="form-label">Nombre de la categoría:</label>
                            <input type="text" class="form-control" name="category_name" id="category_name"
                                placeholder="Ingresa el nombre" required>
                        </div>
                    </form>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success" id="submitCategoryForm">Crear categoria</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @vite('resources/js/services/services.js')
    @vite('resources/js/services/makeLinkService.js')
    @vite('resources/js/services/trackingLogs.js')

    <script>
        $(window).on("load", function() {
            var optionSelected = $("#optionsShow").val();
            if (optionSelected == "services") {
                $("#servicesTable").show();
                $("#searchServices").show();
                $("#categoriesTable").hide();
                $("#searchCategories").hide();
            }
            if (optionSelected == "categories") {
                $("#categoriesTable").show();
                $("#searchCategories").show();
                $("#servicesTable").hide();
                $("#searchServices").hide();
            }
        });
    </script>
@endsection