@extends('backend.layouts.app')
@section('content')
  <div class="content-wrapper">
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6 pb-2 pb-sm-0">
            <h1>TV Category List</h1>
          </div>
          <div class="col-sm-6 text-sm-right">
            <button
              type="button"
              class="btn btn-primary"
              data-toggle="modal"
              data-target="#modal-add-tv-category"
            >
              Add New TV Category
            </button>
          </div>
        </div>
      </div>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body table-responsive p-3">
                <table id="tvCategoryTable" style="width: 100%;" class="table table-striped">
                  <thead>
                    <tr>
                      <th style="width: 80px">S. No.</th>
                      <th>Name</th>
                      <th>Icon</th>
                      <th>Status</th>
                      <th>Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    <!-- Dynamic data will be loaded here by DataTables -->
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <!-- Add Modal -->
  <div class="modal fade" id="modal-add-tv-category">
    <div class="modal-dialog">
      <div class="modal-content">
        <form action="{{ route('admin.tv-categories.add') }}" method="post" enctype="multipart/form-data">
          @csrf
          <div class="modal-header">
            <h4 class="modal-title">Add TV Category</h4>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <label>Icon</label>
              <input type="file"  class="form-control" name="icon">
            </div>
            <div class="form-group">
              <label>Name</label>
              <input type="text"  class="form-control" name="name" value="{{ old('name') }}" placeholder="Name">
            </div>
          </div>
          <div class="modal-footer justify-content-between">
            <button
              type="button"
              class="btn btn-default"
              data-dismiss="modal"
            >
              Close
            </button>
            <button type="submit" class="btn btn-primary">
              Submit
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Edit Modal -->
  <div class="modal fade" id="modal-edit-tv-category">
    <div class="modal-dialog">
      <div class="modal-content">
        <form action="{{ route('admin.tv-categories.update') }}" method="post" enctype="multipart/form-data">
          @csrf
          <div class="modal-header">
            <h4 class="modal-title">Edit TV Category</h4>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <input type="hidden" class="form-control" name="category_id" value="">
            <div class="form-group">
              <label>Icon</label>
              <input type="file"  class="form-control" name="icon">
            </div>
            <!-- Icon Preview -->
            <div class="form-group text-center">
              <img id="icon-preview" src="" alt="Icon Preview" style="width: 70px; height: 70px;">
            </div>
            <div class="form-group">
              <label>Name</label>
              <input type="text" class="form-control" name="name" value="{{ old('name') }}" placeholder="Name">
            </div>
            <div class="form-group">
              <label>Status</label>
              <select class="form-control" name="status">
                <option value="0">Active</option>
                <option value="1">Inactive</option>
              </select>
            </div>
          </div>
          <div class="modal-footer justify-content-between">
            <button
              type="button"
              class="btn btn-default"
              data-dismiss="modal"
            >
              Close
            </button>
            <button type="submit" class="btn btn-primary">
              Update
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
@endsection

@push('scripts')
<script>
  // Yajra datatable
  $(document).ready(function() {
    var table = $('#tvCategoryTable').DataTable({
      processing: true,
      serverSide: true,
      ajax: {
        url: '{{ route('admin.tv-categories.index') }}',
      },
      columns: [
        {
          data: null, 
          name: 'serial',
          orderable: false,
          searchable: false,
          render: function (data, type, full, meta) {
            return meta.row + 1; 
          }
        },
        { data: 'name', name: 'name' },
        { 
          data: 'icon', 
          name: 'icon',
          render: function(data, type, row, meta) {
            if (data) {
              return '<img src="{{ asset('') }}' + data + '" alt="Icon" style="width: 50px; height: 50px;">';
            }
            return 'N/A';
          }
        },
        { data: 'status', name: 'status' },
        { data: 'actions', name: 'actions', orderable: false, searchable: false },
      ],
      responsive: true 
    });

    // Handle the click event on edit buttons within the table
    $('#tvCategoryTable').on('click', '.edit-tv-category-btn', function() {
      var categoryId = $(this).data('id');

      var modal = document.getElementById('modal-edit-tv-category');
      var categoryIdInput = modal.querySelector('input[name="category_id"]');
      var iconPreview = modal.querySelector('#icon-preview');
      var statusSelect = modal.querySelector('select[name="status"]');
      
      fetch('/admin/tv-categories/' + categoryId)
        .then(response => response.json())
        .then(data => {
          console.log(data);
          categoryIdInput.value = data.id;
          iconPreview.src = "{{ asset('') }}" + data.icon;
          modal.querySelector('input[name="name"]').value = data.name;
          statusSelect.value = data.status;
        })
        .catch(error => console.error('Error fetching category data:', error));
    });


  });
</script>
@endpush