@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>Alegria Manila Banners</h1>
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="{{ url('admin/mnl-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/mnl-banners') }}" enctype="multipart/form-data">
              @csrf

              <div class="card-body">
                {{-- <div class="row mb-3">
                  <label for="image" class="col-12 col-form-label">{{ __('Banner Image') }}</label>

                  <div class="col-md-9 offset-md-3">
                    <div class="position-relative border rounded bg-light mb-3" style="min-height: 300px; max-height: 300px; max-width: 500px;">
                      <img src="#" id="image-preview" alt="Selected image" class="position-absolute top-0 w-100 h-100 object-fit-contain p-2" style="display: none">
                      <video src="#" id="video-preview" alt="Selected image" class="position-absolute top-0 w-100 h-100 object-fit-contain p-2" style="display: none" controls></video>
                    </div>
                  </div>
                  <div class="col-md-12">
                    <label for="">Banner Image </label>
                    <input type="file" class="form-control" required name="image" value="{{ old('image') }}" />
                    @error('image')
                        <span class="text-danger">
                            {{ $message }}
                        </span>
                    @enderror
                  </div>
                </div> --}}
                <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 class="card-footer">
                <div class="row">
                  <div class="col-md-9 offset-md-3">
                  </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