@extends('layouts.horizontalLayout')

@section('title', 'Upload Event Photos')

@section('vendor-style')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<style>
    .custom-progress {
        background: #f6f7fb;
        border-radius: 16px;
        box-shadow: 0 4px 18px #36395a13;
        padding: 24px 0 12px 0;
        margin-bottom: 32px;
    }
    .custom-progress .progress {
        height: 18px;
        border-radius: 10px;
        background: #e0e6ed;
        margin-bottom: 10px;
    }
    .custom-progress .progress-bar {
        background: linear-gradient(90deg, #36395a 0%, #7551e9 100%);
        font-weight: bold;
        font-size: 1rem;
        border-radius: 10px;
    }
    .custom-progress .progress-label {
        font-weight: 600;
        color: #36395a;
        margin-bottom: 4px;
        letter-spacing: 0.5px;
    }
    .progress-file-count {
        text-align: right;
        font-size: 0.95rem;
        color: #7551e9;
        font-weight: 500;
    }
</style>
@endsection

@section('vendor-script')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endsection

@section('page-script')
<script>
$(document).ready(function() {
    let processingSwal = null;

    $('#photo-upload-form').on('submit', function(e) {
        e.preventDefault();
        var form = $(this)[0];
        var formData = new FormData(form);

        // Get the file count
        var fileCount = $('#photos')[0].files.length;
        $('.custom-progress').show();
        $('.progress-bar').css('width', '0%').attr('aria-valuenow', 0);
        $('.progress-bar').text('0%');
        $('.progress-label').text('Uploading...');
        $('.progress-file-count').text(`0/${fileCount}`);
        let processingShown = false;

        $.ajax({
            url: $(this).attr('action'),
            type: 'POST',
            headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
            data: formData,
            contentType: false,
            processData: false,
            xhr: function() {
                var myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){
                    myXhr.upload.addEventListener('progress', function(e) {
                        if (e.lengthComputable) {
                            var percent = Math.round((e.loaded / e.total) * 100);
                            $('.progress-bar').css('width', percent + '%').attr('aria-valuenow', percent);
                            $('.progress-bar').text(percent + '%');
                            // Estimate file count based on percent (approximate, since it's all one request)
                            var filesDone = Math.floor((percent/100) * fileCount);
                            if (percent === 100) filesDone = fileCount;
                            $('.progress-file-count').text(`${filesDone}/${fileCount}`);
                            if(percent === 100 && !processingShown) {
                                processingShown = true;
                                processingSwal = Swal.fire({
                                    icon: 'info',
                                    title: 'Processing files...',
                                    text: 'Your files have been uploaded and are being processed. Please wait...',
                                    allowOutsideClick: false,
                                    allowEscapeKey: false,
                                    showConfirmButton: false,
                                    didOpen: () => {
                                        Swal.showLoading();
                                    }
                                });
                            }
                        }
                    }, false);
                }
                return myXhr;
            },
            success: function (data) {
                if(processingSwal) Swal.close();
                Swal.fire({
                    icon: 'success',
                    title: `${data.upload_count} file${data.upload_count > 1 ? 's' : ''} have been uploaded successfully.`,
                    html: `<span class="badge bg-success" style="font-size:1rem;">${data.upload_size} saved</span>`,
                    confirmButtonText: 'OK',
                    customClass: {
                        popup: 'p-4'
                    }
                }).then(() => {
                    location.reload();
                });
            },
            error: function (xhr) {
                if(processingSwal) Swal.close();
                let icon = 'error';
                let title = 'Upload Failed!';
                let msg = 'Upload failed. Please try again.';
                if(xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                    msg = Object.values(xhr.responseJSON.errors).map(val => val.join('<br>')).join('<br>');
                } else if(xhr.responseJSON && xhr.responseJSON.message) {
                    msg = xhr.responseJSON.message;
                }
                Swal.fire({
                    icon: icon,
                    title: title,
                    html: msg,
                    confirmButtonText: 'OK',
                    customClass: {
                        popup: 'p-4'
                    }
                });
            }
        });
    });
});
</script>
@endsection

@section('content')
<h4 class="fw-bold py-3 mb-4">
    Upload Photos for Event: {{ $event->event_name }}
</h4>

{{-- Success message --}}
@if(session('upload_success'))
    <div class="alert alert-success">
        {{ session('upload_success') }}
    </div>
@endif

{{-- Face Detection Results --}}
@if(isset($detections) && $detections->count())
    <div class="alert alert-info mt-4">
        <h5 class="mb-2">Face Detection Results:</h5>
        @foreach($detections as $detect)
            <div>
                <b>{{ $detect->filename }}</b> - 
                Faces found: 
                {{ is_array($detect->face_details_json) ? count($detect->face_details_json) : (is_array(json_decode($detect->face_details_json, true)) ? count(json_decode($detect->face_details_json, true)) : 0) }}
                @if(isset($detect->face_details_json['error']) || (is_array($detect->face_details_json) && isset($detect->face_details_json['error'])))
                    <span class="text-danger">(error: {{ is_array($detect->face_details_json) ? $detect->face_details_json['error'] : json_decode($detect->face_details_json, true)['error'] }})</span>
                @endif
            </div>
        @endforeach
    </div>
@endif

<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-body">
        <div class="row">
          <div class="col-lg-10 mx-auto">
            <form id="photo-upload-form" method="POST" action="{{ route('events.upload', $event->id) }}" enctype="multipart/form-data">
              @csrf
              <div class="mb-3">
                <label for="photos" class="form-label">Select Images</label>
                <input class="form-control @error('photos') is-invalid @enderror" type="file" id="photos" name="photos[]" accept="image/*" multiple required>
                @error('photos')
                  <div class="invalid-feedback">{{ $message }}</div>
                @enderror
                <div class="form-text mt-1">
                  <ul class="mb-0 ps-3 small text-muted">
                    <li>Multiple images allowed</li>
                     <li>File size should be less than <b>100MB</b> per image</li>
                    <li>Accepted formats: JPG, PNG</li>
                  </ul>
                </div>
              </div>
              <div class="custom-progress" style="display:none;">
                <div class="progress-label">Uploading...</div>
                <div class="progress">
                  <div class="progress-bar" role="progressbar" style="width:0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                    0%
                  </div>
                </div>
                <div class="progress-file-count mt-1 small" style="text-align:right"></div>
              </div>
              <div class="d-flex justify-content-end mt-4">
                <button type="submit" class="btn btn-primary">
                  Upload Photos
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection