@extends('layouts.app', ['page' => __('Vistas de desarrollos'), 'pageSlug' => 'house-developments', 'section' => 'house-developments'])

@section('content')
    @component('components.searchBar', ['fields' => $fields , 'action' => route('house-development-report-progress.showByDevelopment', $houseDevelopment), 'search' => $search]) @endcomponent

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-8">
                            <span class="bw-card-title">{{ __('Reporte de Progreso del desarrollo') }}</span>
                            <span class="bw-card-title-bold">
                                <i class="fa-solid fa-circle-right fa-lg" style="color: #aa9d64;"></i>
                                {{ $houseDevelopment->name }}
                            </span>
                        </div>
                        <div class="col-4 text-right">
                            <a href="{{ route('house-development-progress.create',['houseDevelopmet' => $houseDevelopment]) }}" class="btn btn-sm btn-gradient">
                                {{ __('Crear nuevo reporte') }}
                            </a>
                            <a href="{{ route('house-developments.index') }}" class="btn btn-sm btn-primary btn-gradient">
                                {{ __('Regresar a listado') }}
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="">
                        <table class="table tablesorter text-center">
                            <thead class="th-gradient">
                                <th class="th-text-color" scope="col"> {{ __('Nombre') }}</th>
                                <th class="th-text-color" scope="col"> {{ __('Descripcion') }}</th>
                                <th class="th-text-color" scope="col"> {{ __('Fecha de Reporte') }}</th> <!-- Nueva columna -->
                                <th class="th-text-color" scope="col"> {{ __('# Imagenes') }}</th>
                                <th class="th-text-color" scope="col"></th>
                            </thead>
                            <tbody>
                                @foreach ($progressReports as $progressReport)
                                    <tr class="table-row-hover td-gradient" data-report-id="{{ $progressReport->id }}">
                                        <td>
                                            <input type="text" name="name" class="form-control" value="{{ $progressReport->name }}">
                                        </td>
                                        <td>
                                            <input type="text" name="description" class="form-control" value="{{ $progressReport->description }}">
                                        </td>
                                        <td>
                                            <input type="text" name="reported_date" class="form-control flatpickr-date" value="{{ $progressReport->reported_date }}" placeholder="Selecciona una fecha">
                                        </td>
                                        <td>
                                            {{ $progressReport->images_count }}
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-success btn-gradient btn-update">
                                                {{ __('Actualizar') }}
                                            </button>
                                            <a class="btn btn-sm btn-success btn-gradient" href="{{ route('house-development-progress-media.index', $progressReport) }}">{{ __('Galería de fotos') }}</a>
                                            <button type="button" class="btn btn-sm btn-success btn-gradient">
                                                {{ __('Notificar') }}
                                            </button>
                                            <button type="button" class="btn btn-sm btn-danger bw-btn-danger-gradient">
                                                {{ __('Borrar') }}
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer py-4">
                    <nav class="d-flex justify-content-end" aria-label="...">
                        {{ $progressReports->appends($_GET)->links() }}
                    </nav>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <!-- Flatpickr CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@endpush

@push('js')
    <!-- Flatpickr JS -->
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        $(document).ready(function() {
            // Inicializar Flatpickr en los campos de fecha
            flatpickr('.flatpickr-date', {
                dateFormat: 'Y-m-d', // Formato de fecha
                allowInput: true, // Permitir edición manual
                clickOpens: true, // Abrir calendario al hacer clic en cualquier parte del input
            });

            // Handle update button click
            $('.btn-update').click(function() {
                var row = $(this).closest('tr');
                var reportId = row.data('report-id');
                var name = row.find('input[name="name"]').val();
                var description = row.find('input[name="description"]').val();
                var reportedDate = row.find('input[name="reported_date"]').val();

                Swal.fire({
                    title: '¿Estás seguro?',
                    text: "¡Vas a actualizar este reporte!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Sí, actualizarlo!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ route('house-development-progress.update', ':id') }}".replace(':id', reportId),
                            method: 'PUT',
                            data: {
                                _token: '{{ csrf_token() }}',
                                name: name,
                                description: description,
                                reported_date: reportedDate // Incluir la fecha en la actualización
                            },
                            success: function(response) {
                                Swal.fire(
                                    '¡Actualizado!',
                                    'El reporte ha sido actualizado.',
                                    'success'
                                );
                                location.reload(); // Recargar la página después de la actualización
                            },
                            error: function(xhr) {
                                Swal.fire(
                                    '¡Error!',
                                    'Hubo un problema al actualizar el reporte.',
                                    'error'
                                );
                            }
                        });
                    }
                });
            });

            // Handle delete button click
            $('.btn-danger:contains("Borrar")').click(function() {
                var row = $(this).closest('tr');
                var reportId = row.data('report-id');

                Swal.fire({
                    title: '¿Estás seguro?',
                    text: "¡No podrás revertir esto!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Sí, bórralo!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ route('house-development-progress.destroy', ':id') }}".replace(':id', reportId),
                            method: 'DELETE',
                            data: {
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(response) {
                                Swal.fire(
                                    '¡Borrado!',
                                    'El reporte ha sido eliminado.',
                                    'success'
                                );
                                row.remove(); // Eliminar la fila de la tabla
                            },
                            error: function(xhr) {
                                Swal.fire(
                                    '¡Error!',
                                    'Hubo un problema al eliminar el reporte.',
                                    'error'
                                );
                            }
                        });
                    }
                });
            });
        });
    </script>
@endpush