@extends('admin.layouts.main')
@php
  $page_name = 'Home Banners';
@endphp
@section('content')
  <div class="card">
    <div class="card-body">
      <div id="add_edit_box" style="{{ $edit ? '' : 'display: none;' }}">
        <h4 class="mb-4">{{ $edit ? 'Edit' : 'Add' }} {{ $page_name }}</h4>
        <div class="mb-3">
          <form id="home_banner_form" method="POST" action="{{ route('admin.home_banners.store') }}"
            enctype="multipart/form-data">
            @csrf
            <div class="row m-0">
              <div class="col-md-6">
                <div class="mb-3">
                  <label class="form-label" for="home_banner">Home Banner Image</label>
                  <input type="file" name="home_banner" id="home_banner" class="form-control" required>
                </div>
              </div>
              <div class="col-12"></div>
              <div class="col-md-6">
                <button class="btn btn-sm btn-primary" type="submit">{{ $edit ? 'Save' : 'Submit' }}</button>
              </div>
            </div>
          </form>
        </div>
      </div>

      <div class="mb-3">
        <div class="d-flex justify-content-between">
          <h4>{{ $page_name }} List</h4>
          <div>
            @if (!$edit)
              <button id="add_home_banner" class="btn btn-sm btn-primary">Add Banner</button>
            @endif
          </div>
        </div>
        <div class="table-responsive" id="home_banner_table">
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>#</th>
                <th>Banner</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($home_banners as $key => $home_banner)
                <tr>
                  <td>{{ $key + 1 }}</td>
                  <td><img src="{{ route('image', ['home_banners', $home_banner->image_path]) }}" width="50px"
                      alt=""></td>
                  <td>

                    <button type="submit" class="btn btn-sm btn-danger" id="delete_button"
                      value="{{ enc($home_banner->id) }}">Delete</button>
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
          <div class="mt-3">
            {{ $home_banners->appends(request()->query())->links('pagination::bootstrap-5') }}
          </div>
        </div>
      </div>
    </div>
  </div>

  @include('components.alertmodal', [
      'modal_id' => 'deleteBannerModal',
      'form_id' => 'deleteBannerForm',
      'action' => route('admin.home_banners.destroy'),
      'modal_title' => 'Alert!',
      'input_id' => 'deleteBannerId',
      'modal_mess' => 'Are you sure you want to delete this home_banner?',
      'button_type' => 'submit',
      'button_id' => 'confirmDeleteBannerButton',
  ])
@endsection

@section('script')
  <script>
    $(document).on("click", "#delete_button", function() {
      let val = $(this).attr("value");
      $("#deleteBannerId").val(val);
      $("#deleteBannerModal").modal("show");
    });
    $(document).on("click", "#add_home_banner", function() {
      $("#add_edit_box").show();
    });
  </script>
@endsection