@extends('layouts.app')
@section('content')
    <div class="contents">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumb-main">
                        <div class="w-100">
                            <h4 class="text-capitalize breadcrumb-title">{{ $pageTitle }}</h4>
                            <span class="text-capitalize breadcrumb-sub-title"><small>{{ $pageDescription }}</small></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="userDatatable global-shadow border p-30 bg-white radius-xl w-100 mb-30">
                        <div class="d-flex justify-content-between align-items-center mb-20 flex-wrap" style="gap: 10px;">
                            {{-- Remove this button if the module has no create form --}}
                            <a href="{{ route('branch.create') }}" class="btn btn-sm px-15 btn-primary">
                                <i class="las la-plus fs-16"></i>Create New
                            </a>

                            <div class="d-flex align-items-center flex-wrap" style="gap: 10px;">
                                <input type="text" id="item-search" class="form-control w-auto" placeholder="Search...">
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table mb-0 table-borderless">
                                <thead>
                                    <tr class="userDatatable-header">
                                        <th><span class="userDatatable-title">Branch</span></th>
                                        <th><span class="userDatatable-title">Address</span></th>
                                        <th><span class="userDatatable-title">City</span></th>
                                        <th><span class="userDatatable-title">State</span></th>
                                        <th><span class="userDatatable-title">Postcode</span></th>
                                        <th><span class="userDatatable-title">Phone</span></th>
                                        <th><span class="userDatatable-title">Operating Hours</span></th>
                                        <th><span class="userDatatable-title">Status</span></th>
                                        <th><span class="userDatatable-title">Action</span></th>
                                    </tr>
                                </thead>
                                <tbody id="item-table-body">
                                    @forelse ($branches as $branch)
                                        <tr class="item-row" data-created-at="{{ $branch->created_at?->format('Y-m-d') }}">
                                            <td>
                                                <div class="userDatatable-content item-searchable">
                                                    {{ $branch->name }}
                                                    @if ($branch->code)
                                                        <div class="text-muted" style="font-size: 12px;">{{ $branch->code }}</div>
                                                    @endif
                                                </div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content item-searchable">{{ $branch->address ?? '-' }}</div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content item-searchable">{{ $branch->city ?? '-' }}</div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content item-searchable">{{ $branch->state ?? '-' }}</div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">{{ $branch->postcode ?? '-' }}</div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">{{ $branch->phone ?? '-' }}</div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">{{ $branch->operating_hours ?? '-' }}</div>
                                            </td>
                                            <td>
                                                @if ($branch->is_active)
                                                    <span class="badge badge-success">Active</span>
                                                @else
                                                    <span class="badge badge-danger">Inactive</span>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="userDatatable-content d-flex align-items-center" style="gap: 14px;">
                                                    @if ($branch->is_active)
                                                        <button type="button" class="item-action-link text-warning js-toggle-status-item-btn"
                                                            data-url="{{ route('branch.toggleStatus', $branch->id) }}"
                                                            data-message="Deactivate this branch?">
                                                            <i class="la la-ban"></i> Deactivate
                                                        </button>
                                                    @else
                                                        <button type="button" class="item-action-link text-success js-toggle-status-item-btn"
                                                            data-url="{{ route('branch.toggleStatus', $branch->id) }}"
                                                            data-message="Activate this branch?">
                                                            <i class="la la-check-circle"></i> Activate
                                                        </button>
                                                    @endif
                                                    <button type="button" class="item-action-link text-danger js-delete-item-btn"
                                                        data-url="{{ route('branch.destroy', $branch->id) }}">
                                                        <i class="la la-trash"></i> Delete
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="9" class="text-center">No records found.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                            <p id="item-no-results" class="text-center mt-20 mb-0" style="display:none;">No matching records found.</p>
                        </div>
                        <div class="item-pagination-bar d-flex align-items-center justify-content-between flex-wrap mt-20 pt-20">
                            <p class="item-pagination-info mb-0" id="item-info"></p>
                            <nav aria-label="branch pagination">
                                <ul class="item-pagination mb-0" id="item-pagination"></ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('styles')
<style>
   .item-action-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: none;
      border: none;
      padding: 0;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: opacity 0.15s ease-in-out;
   }

   .item-action-link i {
      font-size: 15px;
   }

   .item-action-link:hover:not(:disabled) {
      text-decoration: underline;
   }

   .item-action-link:disabled {
      opacity: 0.5;
      cursor: not-allowed;
   }

   .item-pagination-bar {
      border-top: 1px solid #eef1f5;
   }

   .item-pagination-info {
      font-size: 13px;
      color: #7e8299;
   }

   .item-pagination {
      display: flex;
      align-items: center;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: 6px;
   }

   .item-pagination__item {
      display: inline-flex;
   }

   .item-pagination__link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 34px;
      height: 34px;
      padding: 0 8px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      color: #5a5f7d;
      background-color: #f4f5f7;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.15s ease-in-out;
      user-select: none;
   }

   .item-pagination__link:hover:not(.disabled):not(.active) {
      background-color: #e4e7ed;
      color: #2c2e3d;
   }

   .item-pagination__link.active {
      background-color: #19bdb4;
      color: #fff;
      box-shadow: 0 4px 10px rgba(25, 189, 180, 0.35);
   }

   .item-pagination__link.disabled {
      opacity: 0.4;
      cursor: not-allowed;
      pointer-events: none;
   }

   .item-pagination__ellipsis {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 34px;
      height: 34px;
      color: #b4b7c9;
      font-weight: 600;
   }
</style>
@endsection

@section('scripts')
<script>
   $(function () {
      var PAGE_SIZE = 10;
      var currentPage = 1;

      var $rows = $('#item-table-body tr.item-row');
      var $search = $('#item-search');
      var $dateFrom = $('#item-date-from');
      var $dateTo = $('#item-date-to');
      var $noResults = $('#item-no-results');
      var $pagination = $('#item-pagination');
      var $info = $('#item-info');

      function getMatchingRows() {
         var value = $search.val().toLowerCase().trim();
         var dateFrom = $dateFrom.val();
         var dateTo = $dateTo.val();

         return $rows.filter(function () {
            var matchesSearch = $(this).find('.item-searchable').text().toLowerCase().indexOf(value) > -1;
            var createdAt = $(this).data('created-at');
            var matchesDateFrom = !dateFrom || (createdAt && createdAt >= dateFrom);
            var matchesDateTo = !dateTo || (createdAt && createdAt <= dateTo);

            return matchesSearch && matchesDateFrom && matchesDateTo;
         });
      }

      // Builds a windowed page list, e.g. [1, '...', 4, 5, 6, '...', 11]
      function buildPageList(current, total) {
         var pages = [];
         var windowSize = 1;

         for (var page = 1; page <= total; page++) {
            var isEdge = page === 1 || page === total;
            var isNearCurrent = Math.abs(page - current) <= windowSize;

            if (isEdge || isNearCurrent) {
               pages.push(page);
            } else if (pages[pages.length - 1] !== '...') {
               pages.push('...');
            }
         }

         return pages;
      }

      function pageItem(label, page, isActive, isDisabled) {
         var classes = 'item-pagination__link' + (isActive ? ' active' : '') + (isDisabled ? ' disabled' : '');
         return $('<li class="item-pagination__item"></li>').append(
            $('<a href="" class="' + classes + '">' + label + '</a>')
               .on('click', function (e) {
                  e.preventDefault();
                  if (!isDisabled && page !== currentPage) {
                     currentPage = page;
                     render();
                  }
               })
         );
      }

      function renderPagination(totalPages) {
         $pagination.empty();

         if (totalPages <= 1) {
            return;
         }

         $pagination.append(pageItem('&lsaquo;', currentPage - 1, false, currentPage === 1));

         buildPageList(currentPage, totalPages).forEach(function (page) {
            if (page === '...') {
               $pagination.append('<li class="item-pagination__item"><span class="item-pagination__ellipsis">&hellip;</span></li>');
            } else {
               $pagination.append(pageItem(page, page, page === currentPage, false));
            }
         });

         $pagination.append(pageItem('&rsaquo;', currentPage + 1, false, currentPage === totalPages));
      }

      function render() {
         var $matching = getMatchingRows();
         var total = $matching.length;
         var totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
         currentPage = Math.min(currentPage, totalPages);

         var start = total === 0 ? 0 : (currentPage - 1) * PAGE_SIZE + 1;
         var end = Math.min(currentPage * PAGE_SIZE, total);

         $rows.hide();
         $matching.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE).show();

         $noResults.toggle(total === 0);
         $info.text(total === 0 ? '' : 'Showing ' + start + ' to ' + end + ' of ' + total + ' entries');
         renderPagination(totalPages);
      }

      $search.on('keyup', function () {
         currentPage = 1;
         render();
      });

      $dateFrom.add($dateTo).on('change', function () {
         currentPage = 1;
         render();
      });

      render();

      function submitPostForm(url) {
         var $form = $('<form>', { method: 'POST', action: url });
         $form.append($('<input>', {
            type: 'hidden',
            name: '_token',
            value: $('meta[name="csrf-token"]').attr('content'),
         }));
         $('body').append($form);
         $form.submit();
      }

      $('#item-table-body').on('click', '.js-delete-item-btn', function (e) {
         e.preventDefault();

         var url = $(this).data('url');

         Swal.fire({
            icon: 'warning',
            title: 'Delete this record?',
            text: 'This action cannot be undone.',
            showCancelButton: true,
            confirmButtonText: 'Yes, delete',
            cancelButtonText: 'Cancel',
            confirmButtonColor: '#ff4d4f',
         }).then(function (result) {
            if (result.isConfirmed) {
               submitPostForm(url);
            }
         });
      });

      $('#item-table-body').on('click', '.js-toggle-status-item-btn', function (e) {
         e.preventDefault();

         var url = $(this).data('url');
         var message = $(this).data('message') || 'Are you sure?';

         Swal.fire({
            icon: 'warning',
            title: message,
            showCancelButton: true,
            confirmButtonText: 'Yes, confirm',
            cancelButtonText: 'Cancel',
            confirmButtonColor: '#3b82f6',
         }).then(function (result) {
            if (result.isConfirmed) {
               submitPostForm(url);
            }
         });
      });
   });
</script>
@endsection