@extends('admin.layout.base')
@section('content')
<div class="content-container">
    <div class="form-container">
      <h2 class="page-heading">Add Banner</h2>
      <form id="bannerForm" enctype="multipart/form-data">

        @csrf
        <div class="two-col-form">
          <div>
            <label for="banner_duration">Banner Duration</label>
            <input
              type="number"
              name="banner_duration"
              id="banner_duration"
              placeholder="Duration"
            />
          </div>
          <div>
            <label for="expire_date">Expire Date</label>
            <input
              type="date"
              name="expire_date"
              id="expire_date"
              placeholder="expire_date"
            />
          </div>
        </div>
        <div class="two-col-form">
          <div>
            <label for="Image">Image</label>
            <input type="file" name="banner_image" id="banner_image" />

          </div>
        </div>
        <input type="submit" class="form-submit-button" value="Add Banner">
      </form>
    </div>
  </div>
</div>
@endsection

@push('js')
<script>
$(document).ready(function() {
    $('#bannerForm').on('submit', function(e) {
        e.preventDefault();

        let formData = new FormData(this);
        $.ajax({
            url: "{{ url('/api/banners') }}",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                alert('Banner added successfully');
                location.reload();
            },
            error: function(xhr) {
                alert('Error: ' + xhr.responseJSON.message);
            }
        });
    });
});
</script>
@endpush