@extends('layouts.app')
@section('content')
<div class="container-fluid">
    <div class="row justify-content-center bg-white p-4 rounded shadow-sm">
        <div class="col-md-12">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif
        </div>
        <div class="col-md-12">
        <div class="mb-3">
            <div class="row g-2 align-items-center">
                <div class="col-12 col-md text-start mb-2 mb-md-0">
                    <h2 class="mb-0">Reporte de Usuarios</h2>
                </div>
                <div class="col-12 col-md-auto d-flex gap-2 justify-content-start justify-content-md-end">
                    <button
                        type="button"
                        class="btn btn-warning text-bold d-flex align-items-center gap-1"
                        data-bs-toggle="modal"
                        data-bs-target="#exportUsersModal"
                    >
                        <i class="bi bi-file"></i>
                        Excel
                    </button>
                    <a href="{{ route('admin_fit.users.create') }}" class="btn btn-success text-bold d-flex align-items-center gap-1">
                        <i class="bi bi-plus-lg"></i>
                        Nuevo
                    </a>
                </div>
            </div>
        </div>
        <div class="table-responsive user-table-wrapper bg-white">
            <table
                id="userTable"
                class="table table-striped table-bordered align-middle w-100"
            >
                <thead>
                    <tr>
                        <th class='text-center'>Nombre</th>
                        <th class='text-center'>Teléfono</th>
                        <th class='text-center'>Membresía</th>
                        <th class='text-center'>% Asistencia</th>
                        <th class='text-center'>Ref</th>
                        <th class='text-center'>Deuda</th>
                        <th class="text-center">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Los datos se cargarán via AJAX -->
                </tbody>
            </table>
        </div>
        </div>
    </div>
</div>

<div class="modal fade" id="exportUsersModal" tabindex="-1" aria-labelledby="exportUsersModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="usersExportForm" method="POST" action="{{ route('admin_fit.users.export') }}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="exportUsersModalLabel">Selecciona columnas para exportar</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="search_value" id="usersExportSearchValue" value="">
                    <input type="hidden" name="status" id="usersExportStatus" value="">

                    <div class="row g-2">
                        @php
                            $exportFields = [
                                'name' => 'Nombre',
                                'email' => 'Correo',
                                'phone' => 'Telefono',
                                'role_name' => 'Rol',
                                'membership_name' => 'Membresia',
                                'payment_plan_name' => 'Plan de pago',
                                'is_active' => 'Estado',
                                'created_at_formatted' => 'Fecha de registro',
                                'entry_time_users_count' => 'Conteo horarios',
                                'assistance_count' => 'Asistencias',
                                'attendance_percentage' => 'Porcentaje asistencia',
                                'aux_debt' => 'Deuda Ref'   
                            ];
                        @endphp

                        @foreach ($exportFields as $fieldKey => $fieldLabel)
                            <div class="col-12 col-md-6">
                                <div class="form-check">
                                    <input
                                        class="form-check-input"
                                        type="checkbox"
                                        value="{{ $fieldKey }}"
                                        id="exportField_{{ $fieldKey }}"
                                        name="fields[]"
                                        checked
                                    >
                                    <label class="form-check-label" for="exportField_{{ $fieldKey }}">
                                        {{ $fieldLabel }}
                                    </label>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success">Descargar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
    .user-table-wrapper {
        overflow-x: auto;
    }

    #userTable th,
    #userTable td {
        white-space: nowrap;
    }
</style>
@endsection