@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>Hola Chula Banners</h1>
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="{{ url('admin/hola-banners') }}">Banners</a></li>
            <li class="breadcrumb-item active">Add Banner</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 BANNER</div>
            </div>

            <form method="POST" action="{{ url('admin/hola-banners') }}" enctype="multipart/form-data">
              @csrf

              <div class="card-body">
                <div class="col-md-12 mb-3">
                  <label for="">Banner Image </label>
                  <input type="file" class="form-control mb-2" required name="image" value="{{ old('image') }}" />
                  <span class="fst-italic">Dimension should be width: 1296 x height: 377</span>
                  @error('image')
                      <span class="text-danger">
                          {{ $message }}
                      </span>
                  @enderror
                </div>

                <div class="d-flex justify-content-end">
                  <button type="submit" class="btn btn-dark bg-661dc6 border-0">
                    {{ __('Add') }}
                  </button>
                </div>
              </div>
              </div>

            </form>
          </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