@extends('backend.layouts.app')

@section('content')
<style>
/* ---------- Desktop View ---------- */
.aiz-table tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

.aiz-table tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

.table-responsive-stacked {
  width: 100% !important;
  border-collapse: collapse !important;
}

.table-responsive-stacked th,
.table-responsive-stacked td {
  border: 0px solid #ddd !important;
  padding: 8px !important;
  text-align: center !important;
}

/* ---------- Mobile View ---------- */
@media (max-width: 768px) {

  /* Hide table header */
  .table-responsive-stacked thead {
    display: none !important;
  }

  /* Make table rows stack vertically */
  .table-responsive-stacked tbody,
  .table-responsive-stacked tbody tr {
    display: block !important;
    width: 100% !important;
  }

  /* Card-like rows */
  .table-responsive-stacked tbody tr {
    margin-bottom: 1rem !important;
    border: 1px solid #ddd !important;
    padding: 10px !important;
    border-radius: 6px !important;
    overflow: hidden;
  }

  /* Alternate colors on mobile */
  .table-responsive-stacked .aiz-table tbody tr:nth-child(even) td {
    background-color: #f2f2f2 !important; /* light grey */
  }

  .table-responsive-stacked .aiz-table tbody tr:nth-child(odd) td {
    background-color: #ffffff !important; /* white */
  }

  /* Each cell as block */
  .table-responsive-stacked tbody td {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    position: relative !important;
    padding-left: 45% !important;
    border: none !important;
    border-bottom: 1px solid #eee !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* Add label before each cell content */
  .table-responsive-stacked tbody td::before {
    content: attr(data-label) !important;
    position: absolute !important;
    left: 10px !important;
    top: 10px !important;
    font-weight: bold !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  /* Remove bottom border on last cell */
  .table-responsive-stacked tbody tr td:last-child {
    border-bottom: none !important;
  }

   .table-responsive-stacked tbody tr.row-even {
    background-color: #f2f2f2 !important; /* light grey */
  }

  .table-responsive-stacked tbody tr.row-odd {
    background-color: #ffffff !important; /* white */
  }

  /* Make sure each td background is transparent so parent color shows */
  .table-responsive-stacked tbody tr td {
    background-color: transparent !important;
  }
}
    </style>

<div class="aiz-titlebar text-left mt-2 mb-3">
    <div class="row align-items-center">
        <div class="col-md-6">
            <h1 class="h3">{{translate('Pincode Partners')}}</h1>
        </div>
        @if(empty($business_partner_id))
            @can('add_pincode_partners')
                <div class="col-md-6 text-md-right">
                    <a href="{{route('affiliate.pincode.create')}}" class="btn btn-circle btn-info">
                        <span>Add New Partner</span>
                    </a>
                </div>
            @endcan
        @endif
    </div>
</div>

<div class="card">
    <form class="" id="sort_business_patners" action="" method="GET">
        <div class="card-header row gutters-5">
            <div class="col">
                <h5 class="mb-md-0 h6">{{ translate('Pincode Partners') }}</h5>
            </div>
            @can('delete_pincode_partners')
                <div class="dropdown mb-2 mb-md-0">
                    <button class="btn border dropdown-toggle" type="button" data-toggle="dropdown">
                        {{translate('Bulk Action')}}
                    </button>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#" onclick="bulk_delete()">{{translate('Delete selection')}}</a>
                    </div>
                </div>
            @endcan

            <div class="col-md-3">
                <div class="form-group mb-0">
                  <input type="text" class="form-control" id="search" name="search"@isset($sort_search) value="{{ $sort_search }}" @endisset placeholder="{{ translate('Type name or phone & Enter') }}">
                </div>
            </div>
        </div>

        <div class="card-body">
            <table class="table aiz-table table-responsive-stacked mb-0">
                <thead>
                <tr>
                    <th class="text-center">
                        <div class="form-group">
                            <div class="aiz-checkbox-inline">
                                <label class="aiz-checkbox">
                                    <input type="checkbox" class="check-all">
                                    <span class="aiz-square-check"></span>
                                </label>
                            </div>
                        </div>
                    </th>
                    <th class="text-center">{{ translate('client_ID') }}</th>
                    <th class="text-center">{{ translate('Name') }}</th>
                    <th class="text-center">{{ translate('Phone') }}</th>
                    <th class="text-center">{{ translate('Payment Method') }}</th>
                    <th class="text-center">{{ translate('Package') }}</th>
                    <th class="text-center">{{ translate('Pincode') }}</th>
                    <th class="text-center">{{ translate('Expiry Date') }}</th>
                    @if(empty($business_partner_id))
                        <th width="10%" class="text-center">{{ translate('Options') }}</th>
                    @endif
                </tr>
                </thead>
                <tbody>
                @foreach($pincodePartners as $key => $partner)
                    <tr>
                        <td data-label="Select" class="text-center">
                            <div class="form-group">
                                <div class="aiz-checkbox-inline">
                                    <label class="aiz-checkbox">
                                        <input type="checkbox" class="check-one" name="id[]" value="{{ $partner->id }}">
                                        <span class="aiz-square-check"></span>
                                    </label>
                                </div>
                            </div>
                        </td>
                        <td data-label="{{ translate('client_ID') }}" class="text-center">{{ $partner->client_ID ?? '' }}</td>
                        <td data-label="{{ translate('Name') }}" class="text-center">
                            {{ optional($partner->user)->name }}
                            <p class="mt-2 text-green"><b>{{ $partner->partner_type }}</b></p>
                        </td>
                        <td data-label="{{ translate('Phone') }}" class="text-center">{{ optional($partner->user)->phone }}</td>
                        <td data-label="{{ translate('Payment Method') }}" class="text-center">{{ optional($partner->customerPackagePayment)->payment_method ?? '' }}</td>
                        <td data-label="{{ translate('Package') }}" class="text-center">
                            {{ optional($partner->customerPackage)->name }}
                            <p class="mt-2 text-green"><b>{{ optional($partner->customerPackage)->sharing }}%</b></p>
                        </td>
                        <td data-label="{{ translate('Pincode') }}" class="text-center">{{ $partner->pincode ?? '' }}</td>
                        <td data-label="{{ translate('Expiry Date') }}" class="text-center">
                            @if(!empty($partner->expiry_date))
                                {{ date('d-m-Y', strtotime($partner->expiry_date)) }}
                            @endif
                        </td>
                        @if(empty($business_partner_id))
                            <td data-label="{{ translate('Options') }}" class="text-center">
                                <div class="d-flex justify-content-between">
                                    <div class="dropdown">
                                        <button type="button" class="btn btn-sm btn-circle btn-soft-primary btn-icon dropdown-toggle no-arrow" data-toggle="dropdown" href="javascript:void(0);" role="button" aria-haspopup="false" aria-expanded="false">
                                            <i class="las la-ellipsis-v"></i>
                                        </button>
                                        <div class="dropdown-menu dropdown-menu-right dropdown-menu-xs">
                                            @can('edit_pincode_partners')
                                                <a href="{{ route('affiliate.pincodepartner.edit', $partner->id) }}" class="dropdown-item">
                                                    {{ translate('Edit') }}
                                                </a>
                                            @endcan
                                            @can('delete_pincode_partners')
                                                <a href="#" class="dropdown-item confirm-delete" data-href="{{ route('affiliate.delete', $partner->id) }}">
                                                    {{ translate('Delete') }}
                                                </a>
                                            @endcan
                                        </div>
                                    </div>
                                    @can('view_pincode_partner_details')
                                        <a href="{{ route('affiliate.partner-details', $partner->user->id) }}" class="btn btn-soft-primary btn-icon btn-circle btn-sm" title="View">
                                            <i class="las la-eye"></i>
                                        </a>
                                    @endcan
                                </div>
                            </td>
                        @endif
                    </tr>
                @endforeach
                </tbody>
            </table>
            <div class="aiz-pagination">
              {{ $pincodePartners->appends(request()->input())->links() }}
            </div>
        </div>
    </form>
</div>

@endsection
@section('modal')
    @include('modals.delete_modal')
@endsection
@section('script')
    <script type="text/javascript">
        $(document).on("change", ".check-all", function() {
            if(this.checked) {
                // Iterate each checkbox
                $('.check-one:checkbox').each(function() {
                    this.checked = true;
                });
            } else {
                $('.check-one:checkbox').each(function() {
                    this.checked = false;
                });
            }
        });
        function bulk_delete() {
            var data = new FormData($('#sort_business_patners')[0]);
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{route('bulk-businessPartner-delete')}}",
                type: 'POST',
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                success: function (response) {
                    if(response == 1) {
                        location.reload();
                    }
                }
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
        function applyAlternateRows() {
                const rows = document.querySelectorAll('.table-responsive-stacked .aiz-table tbody tr');
                rows.forEach((tr, idx) => {
                tr.classList.remove('row-even', 'row-odd');
                tr.classList.add(((idx + 1) % 2 === 0) ? 'row-even' : 'row-odd');
                });
                }

                // initial
                applyAlternateRows();

                // re-apply on window resize (optional)
                window.addEventListener('resize', function() {
                applyAlternateRows();
                });

                // If rows are added dynamically, call applyAlternateRows() after update.
                });    
    </script>
@endsection