@extends('layouts.admin')
@section('content')
@can('parcel_create')
    <div style="margin-bottom: 10px;" class="row">
        <div class="col-lg-6">
            <a class="btn btn-success" href="{{ route('admin.parcels.create') }}">
                {{ trans('global.add') }} {{ trans('cruds.parcel.title_singular') }}
            </a>
            <button class="btn btn-warning" data-toggle="modal" data-target="#csvImportModal">
                {{ trans('global.app_csvImport') }}
            </button>
            @include('csvImport.modal', ['model' => 'Parcel', 'route' => 'admin.parcels.parseCsvImport'])
        </div>

        <div class="col-lg-6 text-right">
            <div class="d-inline-block">
                <select class="custom-select form-control-border" id="bulk-status-update">
                    <option value="">Bulk Actions</option>
                    @foreach(App\Models\Parcel::STATUS_SELECT as $key => $status)
                    <option value="{{ $key }}">{{ $status }}</option>
                    @endforeach
                </select>
            </div>
            <div class="d-inline-block">
                <button id="apply-bulk-status-update" class="btn btn-primary">Apply</button>
            </div>
        </div>
    </div>
@endcan


<div class="card">
    <div class="card-header">
        {{ trans('cruds.parcel.title_singular') }} {{ trans('global.list') }}
    </div>

    <ul class="nav nav-tabs" id="statusTabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="all-tab" data-toggle="tab" href="#all" role="tab" aria-controls="all" aria-selected="true" data-status="all">All</a>
        </li>
        <!-- Add a tab for each status here... -->
        @foreach(App\Models\Parcel::STATUS_SELECT as $key => $status)
        <li class="nav-item">
            <a class="nav-link" id="status-{{ $key }}-tab" data-toggle="tab" href="#status-{{ $key }}" role="tab" aria-controls="status-{{ $key }}" data-status="{{ $key }}">{{ $status }}</a>
        </li>
        @endforeach
    </ul>


    <div class="card-body">
        <table class=" table table-bordered table-striped table-hover ajaxTable datatable datatable-Parcel">
            <thead>
                <tr>
                    <th width="10">

                    </th>

                    <th>
                        {{ trans('cruds.parcel.fields.date') }}
                    </th>
                    <th>
                        {{ trans('cruds.parcel.fields.tracking_no') }}
                    </th>
                    <th>
                        {{ trans('cruds.parcel.fields.marking_code') }}
                    </th>
                    <th>
                        Batch
                        <!-- {{ trans('cruds.parcel.fields.batch_no') }} -->
                    </th>
                    <th>立方<br>m<sup>3</sup>
                        <!-- {{ trans('cruds.parcel.fields.volume') }} -->
                    </th>
                    <th>
                        公斤<br>kg
                        <!-- {{ trans('cruds.parcel.fields.weight') }} -->
                    </th>
                    <th>
                        长<br>cm
                        <!-- {{ trans('cruds.parcel.fields.length') }} -->
                    </th>
                    <th>
                        宽<br>cm
                        <!-- {{ trans('cruds.parcel.fields.width') }} -->
                    </th>
                    <th>
                        高<br>cm
                        <!-- {{ trans('cruds.parcel.fields.height') }} -->
                    </th>
                    <th>
                        箱数<br>CTN
                        <!-- {{ trans('cruds.parcel.fields.package_number') }} -->
                    </th>
                    <th>打包
                        <!-- {{ trans('cruds.parcel.fields.packing') }} -->
                    </th>
                    <th>
                        {{ trans('cruds.parcel.fields.status') }}
                    </th>
                    <th>
                        {{ trans('cruds.parcel.fields.updated_by') }}
                    </th>
                    <th>
                        &nbsp;
                    </th>
                </tr>
            </thead>
        </table>
    </div>
</div>



@endsection
@section('scripts')
@parent
<script>

    $(function () {
  let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons)
@can('parcel_delete')
  let deleteButtonTrans = '{{ trans('global.datatables.delete') }}';
  let deleteButton = {
    text: deleteButtonTrans,
    url: "{{ route('admin.parcels.massDestroy') }}",
    className: 'btn-danger',
    action: function (e, dt, node, config) {
      var ids = $.map(dt.rows({ selected: true }).data(), function (entry) {
          return entry.id
      });

      if (ids.length === 0) {
        alert('{{ trans('global.datatables.zero_selected') }}')

        return
      }

      if (confirm('{{ trans('global.areYouSure') }}')) {
        $.ajax({
          headers: {'x-csrf-token': _token},
          method: 'POST',
          url: config.url,
          data: { ids: ids, _method: 'DELETE' }})
          .done(function () { location.reload() })
      }
    }
  }
  dtButtons.push(deleteButton)
@endcan

  let dtOverrideGlobals = {
    buttons: dtButtons,
    processing: true,
    serverSide: true,
    retrieve: true,
    aaSorting: [],
    ajax: {
        url: "{{ route('admin.parcels.index') }}",
        data: function(d) {
            d.status = $('#statusTabs .nav-link.active').data('status') || 'all';
            return d; // Now the function returns the original data with your status added.
        }
    },
    columns: [
        { data: 'placeholder', name: 'placeholder', orderable: false },
        { data: 'date', name: 'date', orderable: false },
        { data: 'tracking_no', name: 'tracking_no', orderable: false },
        { data: 'marking_code_marking_code', name: 'marking_code.marking_code', orderable: false },
        { data: 'batch_no', name: 'batch_no', orderable: false , className:'text-right'},
        { data: 'volume', name: 'volume', orderable: false, className:'text-right' },
        { data: 'weight', name: 'weight', orderable: false, className:'text-right'},
        { data: 'length', name: 'length', orderable: false , className:'text-right'},
        { data: 'width', name: 'width', orderable: false , className:'text-right'},
        { data: 'height', name: 'height', orderable: false , className:'text-right'},
        { data: 'package_number', name: 'package_number', orderable: false , className:'text-right'},
        { data: 'packing', name: 'packing', orderable: false , className:'text-right'},
        { data: 'status', name: 'status', orderable: false },
        { data: 'updated_by_name', name: 'updated_by.name', orderable: false },
        { data: 'actions', name: '{{ trans('global.actions') }}', orderable: false }

    ],
    orderCellsTop: true,
    pageLength: 50,
    drawCallback: function(settings) {
        const responseData = settings.json; // Get the Ajax response data
        if (responseData && responseData.status_counts) {
            for (const [status, count] of Object.entries(responseData.status_counts)) {
                const tabElement = $(`#status-${status}-tab`);
                const originalText = tabElement.text().replace(/\s*\(\d+\)\s*$/, ''); // Extracting original text without the count
                tabElement.text(`${originalText} (${count})`);
            }
        }
    }
  };

  let table = $('.datatable-Parcel').DataTable(dtOverrideGlobals);
  table.ajax.reload();
  $('a[data-toggle="tab"]').on('shown.bs.tab click', function(e){
      $($.fn.dataTable.tables(true)).DataTable()
          .columns.adjust();
  });

  // Update the table when a tab is clicked
$('#statusTabs .nav-link').on('shown.bs.tab', function() {
    table.ajax.reload(null, false); // false means don't reset paging
});

$('#apply-bulk-status-update').on('click', function() {
    const button = $(this);
    const selectedStatus = $('#bulk-status-update').val();
    const selectedRows = table.rows({ selected: true }).data();
    const ids = $.map(selectedRows, function(row) {
        return row.id;
    });

    if (ids.length === 0 || !selectedStatus) {
        alert('Please select rows and a status before applying.');
        return;
    }

    // Disable the button and show loading text/spinner
    button.prop('disabled', true).text('Updating...');

    $.ajax({
        headers: { 'x-csrf-token': _token },
        method: 'POST',
        url: "{{ route('admin.parcels.bulkUpdateStatus') }}",
        data: { ids: ids, status: selectedStatus },
        success: function(response) {
            // Show success message
            alert(response.message || 'Status updated successfully.');
        },
        error: function(xhr, status, error) {
            // Show error message
            alert('An error occurred: ' + xhr.statusText);
        },
        complete: function() {
            // Re-enable the button and reset text when done
            button.prop('disabled', false).text('Apply');
            table.ajax.reload();
        }
    });
});

  
});



</script>
@endsection