@extends('backend.layouts.app')

@section('content')
  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1>Buena Vida Gallery</h1>
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="{{ url('admin/buena') }}">Gallery</a></li>
            <li class="breadcrumb-item active">Add Gallery</li>
          </ol>
        </div>
      </div>
    </div>
  </section>

  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <div class="card">

            <div class="card-header">
              <div class="card-title">ADD GALLERY</div>
            </div>

            <div class="card-body">
              <form action="{{ url('admin/buena') }}" method="POST" enctype="multipart/form-data">@csrf
                <div class="row">

                  <div class="col-12 mb-3">
                    <label for="">Image </label>
                    <input type="file" class="form-control mb-2" required name="images" value="{{ old('images') }}" />

                    <span class="fst-italic">Dimension should be width: 473 x height: 324</span>
                    @error('images')
                        <span class="text-danger">
                            {{ $message }}
                        </span>
                    @enderror
                  </div>

                    <div class="col-12 text-right">
                        <button type="submit" class="btn btn-success bg-dark">Upload Image</button>
                    </div>
                </div>
            </form>
            </div>

          </div>
        </div>
      </div>
    </div>
  </section>
@endsection

@section('js')
  <script>
    // Get image input, image preview, and video preview elements
    const fileInput = document.querySelector('#file');
    const imagePreview = document.querySelector('#image-preview');
    const videoPreview = document.querySelector('#video-preview');

    // Listen for change event on image input
    fileInput.addEventListener('change', function() {
      // Get selected file
      const file = this.files[0];

      // Check if the file is an image
      if (file.type.startsWith('image/')) {
        // Create URL for selected image
        const imageUrl = URL.createObjectURL(file);

        // Update image preview element with selected image URL
        imagePreview.src = imageUrl;
        imagePreview.style.display = 'block';

        // Hide video preview element
        videoPreview.style.display = 'none';
      } else if (file.type.startsWith('video/')) {
        // Create URL for selected video
        const videoUrl = URL.createObjectURL(file);

        // Update video preview element with selected video URL
        videoPreview.src = videoUrl;
        videoPreview.style.display = 'block';

        // Hide image preview element
        imagePreview.style.display = 'none';
      } else {
        // The selected file is neither an image nor a video
        // You can display an error message or take some other action here
        console.error('Invalid file type');
      }
    });
  </script>
@endsection