@extends('layouts.training_centre_layout')

@section('content')

<x-page-header title="{{ $pageTitle }}" :backButton="true" />

<main class="container">
        
    <!-- Page Header -->
    {{-- <div class="text-center mb-5">
        <h2 class="fw-bold text-primary">Attendance Management</h2>
        <p class="lead text-muted">Manage monthly attendance uploads for your team.</p>
    </div> --}}

    <div class="row g-4">
        <!-- Card 1: File Uploaded -->
        @foreach ($months as $month)

            {{-- {{ dd($month) }} --}}

            <div class="col-12 col-md-6 col-lg-4">
                <div class="card shadow-sm h-100">
                    <div class="card-body d-flex flex-column p-4">
                        <h5 class="card-title fw-bold text-dark mb-4">{{ $month['month_name'] }} {{ $month['year'] }}</h5>

                        @php
                            $uploadedTypes = collect($month['attendance_uploaded'])->pluck('type')->map(fn($t) => is_object($t) ? $t->value : $t)->toArray();
                            $count = [];
                        @endphp

                        <div class="upload-section">
                            <!-- Upload Form -->
                            @foreach (\App\Enums\ClassType::cases() as $type)
                                @php
                                    $isDisabled = in_array($type->value, $uploadedTypes);
                                    $uploaded = collect($month['attendance_uploaded'])->firstWhere('type', $type->value);
                                    $count[] = $isDisabled;
                                @endphp
                                <div class="upload-item p-3 mb-2">
                                    <div class="row g-2 align-items-center">
                                        <div class="col-lg-3 col-12">
                                            <h6 class="upload-item-header">{{ ucfirst($type->value) }}</h6>
                                        </div>
                                        <div class="col-lg-9 col-12">
                                            @if ($isDisabled)
                                                 <div class="d-flex justify-content-between align-items-center">
                                                    <span class="status-uploaded"><i class="fas fa-check-circle me-2"></i>Uploaded</span>
                                                    <a href="{{ $uploaded->attendance_sheet_full_path }}" download class="btn btn-sm btn-outline-secondary-custom">
                                                        <i class="fas fa-eye me-1"></i> View File
                                                    </a>
                                                </div>
                                            @else
                                                <form class="attendanceSheetForm" enctype="multipart/form-data">
                                                @csrf
                                                <div class="input-group">
                                                    <input type="hidden" name="batch_id" value="{{ $month['batch_id'] }}">
                                                    <input type="hidden" name="month" value="{{ $month['month'] }}">
                                                    <input type="hidden" name="year" value="{{ $month['year'] }}">
                                                    <input type="hidden" name="class_type" value="{{ $type->value }}">

                                                    <input 
                                                        type="file" 
                                                        name="attendance_sheet" 
                                                        id="attendance_sheet_{{ $type->value }}" 
                                                        class="form-control form-control-sm form-control-file-custom" 
                                                        accept=".xlsx,.csv" 
                                                        required
                                                    >

                                                    <button 
                                                        type="submit" 
                                                        class="btn btn-sm btn-primary-custom attendanceButton" 
                                                        title="Upload"
                                                    >
                                                        <i class="fas fa-upload"></i> Upload
                                                    </button>
                                                </div>
                                            </form>
                                            @endif
                                            
                                        </div>    
                                    </div>    
                                </div>    
                            @endforeach

                        </div> 

                        <!-- Actions List -->
                        <div class="mt-auto">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item action-list-item">
                                    <form method="POST" action="{{ route('training-center.batches.attendance-export') }}">
                                        @csrf
                                        <input type="hidden" name="month" value="{{ $month['month'] }}">
                                        <input type="hidden" name="month_name" value="{{ $month['month_name'] }}">
                                        <input type="hidden" name="year" value="{{ $month['year'] }}">
                                        <input type="hidden" name="start_date" value="{{ $month['start_date'] }}">
                                        <input type="hidden" name="end_date" value="{{ $month['end_date'] }}">
                                        <input type="hidden" name="batch_id" value="{{ $month['batch_id'] }}">


                                        <button type="submit" class="btn btn-link p-0 fw-medium">
                                            <i class="fas fa-fw fa-download"></i> Download Template
                                        </button>
                                    </form>
                                </li>
                                <li class="list-group-item action-list-item-flex">
                                    @if (count(array_filter($count)) == 0)
                                        <span class="badge badge-status badge-status-warning rounded-pill">Status: {{ count(array_filter($count)) }} of 3 files uploaded</span>
                                    @else
                                        <span class="badge badge-status badge-status-success rounded-pill">Status: {{ count(array_filter($count)) }} of 3 files uploaded</span>
                                    @endif
                                    
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    
    </div>
</main>

@endsection

@section('pages-scripts')
<script>
    $(document).ready(function() {
    $(".attendanceButton").on("click", function (e) {
        e.preventDefault();
        $(this).closest(".attendanceSheetForm").submit();
    });

    $(".attendanceSheetForm").each(function() {
        $(this).validate({
            rules: {
                batch_id: { required: true },
                month: { required: true },
                year: { required: true },
                attendance_sheet: { required: true }
            },
            submitHandler: function(form) {
                let formData = new FormData(form);

                $.ajax({
                    url: "{{ route('training-center.batches.attendance-submit') }}",
                    method: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                title: "Success!",
                                text: response.message,
                                icon: "success",
                                confirmButtonText: "OK"
                            }).then(() => {
                                window.location.reload();
                            });
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            let errorMessages = Object.values(errors).flat().join("<br>");
                            Swal.fire({
                                title: "Validation Error",
                                html: errorMessages,
                                icon: "error"
                            });
                        } else {
                            Swal.fire({
                                title: "Error!",
                                text: xhr.responseJSON.message || "Something went wrong. Please try again.",
                                icon: "error"
                            });
                        }
                    }
                });
            }
        });
    });
});
</script>
@endsection