@extends('layouts.guest')

@section('title', 'Upload Photos - Axis Max Life')

@section('content')
<div class="mb-4">
  <h2 class="text-2xl font-bold">Upload Photos</h2>
  <div class="mt-2 p-3 bg-gray-50 rounded-lg">
    <p class="text-gray-600">Branch Code: <strong class="text-indigo-600">{{ $branch->branch_code }}</strong></p>
    <p class="text-gray-600">Remaining slots: <strong class="text-{{ $branch->remaining_slots > 0 ? 'green' : 'red' }}-600">{{ $branch->remaining_slots }}/5</strong></p>
  </div>
</div>

@if(session('error'))
<div class="mb-4 font-medium text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg p-3">
  {{ session('error') }}
</div>
@endif

@if($errors->any())
<div class="mb-4">
  <div class="font-medium text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg p-3">
    <strong>Whoops! Something went wrong.</strong>
    <ul class="mt-2 list-disc list-inside">
      @foreach($errors->all() as $error)
      <li>{{ $error }}</li>
      @endforeach
    </ul>
  </div>
</div>
@endif

<form method="POST" action="{{ route('upload.images', $branch->branch_code) }}" enctype="multipart/form-data" id="uploadForm">
  @csrf

  <div class="mb-6">
    <label class="block font-medium text-sm text-gray-700 mb-2">
      Select Images (Max {{ $branch->remaining_slots }} images)
    </label>

    <!-- Hidden file input -->
    <input type="file"
      id="images"
      name="images[]"
      multiple
      class="hidden"
      accept="image/jpeg,image/png,image/jpg,image/gif"
      required>

    <!-- Clickable drop area -->
    <div id="dropArea"
      class="mt-2 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-indigo-500 transition-colors cursor-pointer bg-gray-50">
      <div class="space-y-1 text-center">
        <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
          <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H8a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
        <div class="flex text-sm text-gray-600 justify-center">
          <span class="font-medium text-indigo-600 hover:text-indigo-500">Click to upload</span>
          <span class="pl-1">or drag and drop</span>
        </div>
        <p class="text-xs text-gray-500">
          PNG, JPG, JPEG, GIF up to 5MB each (max {{ $branch->remaining_slots }} files)
        </p>
      </div>
    </div>

    <!-- Selected files preview -->
    <div id="file-preview" class="mt-4 grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4"></div>
    <div id="file-count" class="mt-2 text-sm text-gray-600"></div>
  </div>

  <div class="flex items-center justify-between mt-6">
    <a href="{{ route('upload.index') }}"
      class="inline-flex items-center px-6 py-3 bg-gray-200 border border-transparent rounded-md font-semibold text-sm text-gray-700 uppercase tracking-widest hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition ease-in-out duration-150">
      Back
    </a>
    <button type="submit" id="submitBtn"
      class="inline-flex items-center justify-center px-6 py-3 bg-indigo-600 border border-transparent rounded-md font-semibold text-sm text-white uppercase tracking-widest hover:bg-indigo-700 focus:bg-indigo-700 active:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
      Upload Images
    </button>
  </div>
</form>

@push('scripts')
<script>
  // Get elements
  const fileInput = document.getElementById('images');
  const dropArea = document.getElementById('dropArea');
  const preview = document.getElementById('file-preview');
  const fileCount = document.getElementById('file-count');
  const maxFiles = {
    {
      $branch - > remaining_slots
    }
  };
  const maxSize = 5 * 1024 * 1024; // 5MB

  // Make drop area clickable
  dropArea.addEventListener('click', () => {
    fileInput.click();
  });

  // Handle file selection
  fileInput.addEventListener('change', handleFiles);

  // Handle drag and drop
  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, preventDefaults, false);
  });

  function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
  }

  ['dragenter', 'dragover'].forEach(eventName => {
    dropArea.addEventListener(eventName, highlight, false);
  });

  ['dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, unhighlight, false);
  });

  function highlight() {
    dropArea.classList.add('border-indigo-500', 'bg-indigo-50');
  }

  function unhighlight() {
    dropArea.classList.remove('border-indigo-500', 'bg-indigo-50');
  }

  dropArea.addEventListener('drop', handleDrop, false);

  function handleDrop(e) {
    const dt = e.dataTransfer;
    const files = dt.files;
    fileInput.files = files;
    handleFiles({
      target: {
        files: files
      }
    });
  }

  function handleFiles(e) {
    const files = e.target.files;

    // Clear previous previews
    preview.innerHTML = '';
    fileCount.innerHTML = '';

    // Validate number of files
    if (files.length > maxFiles) {
      alert('You can only select up to ' + maxFiles + ' images');
      fileInput.value = '';
      return;
    }

    let validFiles = true;

    // Validate each file
    for (let i = 0; i < files.length; i++) {
      const file = files[i];

      // Check file type
      if (!file.type.match('image.*')) {
        alert('File ' + file.name + ' is not an image');
        fileInput.value = '';
        validFiles = false;
        break;
      }

      // Check file size
      if (file.size > maxSize) {
        alert('File ' + file.name + ' exceeds 5MB limit');
        fileInput.value = '';
        validFiles = false;
        break;
      }
    }

    if (validFiles) {
      displayPreviews(files);
    }
  }

  function displayPreviews(files) {
    preview.innerHTML = '';

    Array.from(files).forEach((file, index) => {
      const reader = new FileReader();
      const previewCol = document.createElement('div');
      previewCol.className = 'relative';

      reader.onload = (e) => {
        previewCol.innerHTML = `
                    <div class="aspect-w-1 aspect-h-1 rounded-lg overflow-hidden border border-gray-200 relative group">
                        <img src="${e.target.result}" alt="${file.name}" class="object-cover w-full h-full">
                        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-200"></div>
                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-2">
                            <p class="text-white text-xs truncate">${file.name.length > 20 ? file.name.substring(0, 17) + '...' : file.name}</p>
                        </div>
                        <button type="button" 
                                class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition-opacity"
                                onclick="removeFile(${index})">
                            ×
                        </button>
                    </div>
                `;
      };

      reader.readAsDataURL(file);
      preview.appendChild(previewCol);
    });

    // Show file count
    fileCount.innerHTML = `
            <span class="font-medium text-indigo-600">${files.length}</span> 
            file(s) selected (max ${maxFiles})
        `;
  }

  // Function to remove files (you'll need to implement this with a more complex solution)
  window.removeFile = function(index) {
    // This is a simplified version - for production, you'd need a more robust solution
    alert('File removal requires rebuilding the file list. Please clear all and reselect.');
    fileInput.value = '';
    preview.innerHTML = '';
    fileCount.innerHTML = '';
  };
</script>
@endpush
@endsection