@extends('layouts.masterbeta')

@section('title', 'Click ERP - My Daily Reports')

@section('breadcrumbs')
    <a href="{{ url('/') }}" class="text-secondary text-decoration-none"><i class="bi bi-house me-2"></i></a>
    <i class="bi bi-chevron-right text-secondary me-2" style="font-size: 0.8rem;"></i>
    <span class="fw-bold" style="font-size: 0.95rem;">Daily Reports</span>
@endsection

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-1">My Daily Reports</h4>
            <p class="text-secondary mb-0" style="font-size: 0.9rem;">Submit and track your daily activity and progress.</p>
        </div>
        <button class="btn text-white fw-bold d-flex align-items-center" style="background-color: #5c4df0; border-radius: 8px;" data-bs-toggle="modal" data-bs-target="#submitReportModal">
            <i class="bi bi-plus-lg me-2"></i> Submit Report
        </button>
    </div>

    <div class="content-card shadow-sm bg-white rounded-3 overflow-hidden">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light text-secondary" style="font-size: 0.85rem;">
                    <tr>
                        <th class="ps-4">Report Date</th>
                        <th>Content Preview</th>
                        <th>Submitted At</th>
                        <th class="text-end pe-4">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($reports as $report)
                        <tr>
                            <td class="ps-4 fw-medium text-dark">
                                <i class="bi bi-calendar-check text-primary me-2"></i>
                                {{ \Carbon\Carbon::parse($report->report_date)->format('D, d M Y') }}
                            </td>
                            <td class="text-secondary" style="max-width: 400px; font-size: 0.9rem;">
                                {{ Str::limit(strip_tags($report->content), 80) }}
                            </td>
                            <td class="text-secondary" style="font-size: 0.85rem;">
                                <i class="bi bi-clock me-1"></i> {{ $report->created_at->format('d M Y, H:i') }}
                            </td>
                            <td class="text-end pe-4">
                                <button class="btn btn-sm btn-light text-primary btn-view-report" 
                                        data-date="{{ \Carbon\Carbon::parse($report->report_date)->format('D, d M Y') }}"
                                        data-content="{{ htmlspecialchars($report->content) }}">
                                    <i class="bi bi-eye"></i> View
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="text-center py-5 text-secondary">
                                <i class="bi bi-journal-x fs-1 text-muted mb-2 d-block"></i>
                                No reports submitted yet.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($reports->hasPages())
            <div class="card-footer bg-white border-top p-3 d-flex justify-content-center">
                {{ $reports->links('pagination::bootstrap-5') }}
            </div>
        @endif
    </div>
@endsection

@push('modals')
    <!-- SUBMIT REPORT MODAL -->
    <div class="modal fade" id="submitReportModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-light border-bottom-0">
                    <h5 class="modal-title fw-bold">Submit Daily Report</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                
                <form id="submitReportForm">
                    @csrf
                    <div class="modal-body p-4">
                        <!-- <div id="reportModalAlert"></div> -->

                        <div class="mb-3">
                            <label class="form-label text-secondary fw-semibold small">Report Date *</label>
                            <input type="date" class="form-control" name="report_date" id="report_date" required max="{{ now()->format('Y-m-d') }}" value="{{ now()->format('Y-m-d') }}">
                            <div class="form-text text-muted" style="font-size: 0.75rem;">Standard submission window is 48 hours from the report date.</div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label text-secondary fw-semibold small">Activities & Progress *</label>
                            <textarea class="form-control" name="content" id="report_content" rows="8" required placeholder="Detail your tasks, achievements, and blockers for the day..."></textarea>
                        </div>
                    </div>
                    <div class="modal-footer bg-light border-top-0">
                        <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" id="btnSaveReport" class="btn text-white btn-sm fw-bold px-4" style="background-color: #5c4df0;">
                            Submit Report
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- VIEW REPORT MODAL -->
    <div class="modal fade" id="viewReportModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-light border-bottom-0">
                    <h5 class="modal-title fw-bold">Report Details: <span id="viewReportDate" class="text-primary"></span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="bg-light p-3 rounded border" style="white-space: pre-wrap;" id="viewReportContent"></div>
                </div>
                <div class="modal-footer border-top-0">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            $('#submitReportForm').on('submit', function(e) {
                e.preventDefault();
                
                let $form = $(this);
                let $submitBtn = $('#btnSaveReport');
                let originalText = $submitBtn.html();
                
                $submitBtn.html('<span class="spinner-border spinner-border-sm me-2"></span>Sending...').prop('disabled', true);
                
                // Clear previous validation errors
                $form.find('.is-invalid').removeClass('is-invalid');
                $form.find('.invalid-feedback').remove();

                $.ajax({
                    url: "{{ url('reports') }}",
                    type: 'POST',
                    data: $form.serialize(),
                    success: function(response) {
                        if(response.success) {
                            $('#submitReportModal').modal('hide');
                            Swal.fire({
                                icon: 'success',
                                title: 'Report Submitted!',
                                text: response.message,
                                showConfirmButton: false,
                                timer: 1500
                            }).then(() => location.reload());
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            
                            // If the 48-hour validation fails, trigger a SweetAlert warning
                            if (errors.report_date && errors.report_date[0].includes('48-hour')) {
                                $('#submitReportModal').modal('hide');
                                Swal.fire({
                                    icon: 'warning',
                                    title: 'Submission Locked',
                                    text: errors.report_date[0],
                                    confirmButtonColor: '#5c4df0'
                                }).then(() => $('#submitReportModal').modal('show')); // reopen if they dismiss
                            } else {
                                // For standard field validation, show inline text errors
                                $.each(errors, function(key, value) {
                                    let $input = $form.find('[name="' + key + '"]');
                                    if ($input.length) {
                                        $input.addClass('is-invalid');
                                        $input.parent().append('<div class="invalid-feedback d-block fw-medium">' + value[0] + '</div>');
                                    }
                                });
                            }
                        } else {
                            // Generic server errors
                            Swal.fire({
                                icon: 'error',
                                title: 'Server Error',
                                text: 'An unexpected error occurred. Please try again.',
                                confirmButtonColor: '#5c4df0'
                            });
                        }
                    },
                    complete: function() {
                        $submitBtn.html(originalText).prop('disabled', false);
                    }
                });
            });

            // View Report Modal Population
            $('.btn-view-report').on('click', function() {
                $('#viewReportDate').text($(this).data('date'));
                $('#viewReportContent').text($(this).data('content'));
                new bootstrap.Modal(document.getElementById('viewReportModal')).show();
            });

            // Reset modal on close
            $('#submitReportModal').on('hidden.bs.modal', function () {
                $('#submitReportForm')[0].reset();
                $('#report_date').val("{{ now()->format('Y-m-d') }}");
                $('#submitReportForm').find('.is-invalid').removeClass('is-invalid');
                $('#submitReportForm').find('.invalid-feedback').remove();
            });
        });
    </script>
@endpush