@extends('template.layouts.template-base')
@section('title', 'Order Management')

@section('styles')
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
  <style>
    .page-content {
      background-color: #F0F4F8 !important;
      padding: 80px 10px;
    }

    .tab-filters .tab-btn.active {
      background: #0040a0 !important;
      color: #fff !important;
    }

    .status-update-wrap {
      display:     flex;
      align-items: center;
      gap:         6px;
    }

    .btn-change-status {
        background:    transparent;
        border:        none;
        cursor:        pointer;
        color:         #6b7280;
        padding:       2px 4px;
        border-radius: 4px;
        transition:    color 0.2s;
    }

    .btn-change-status:hover {
        color: #2563eb;
    }
  </style>
@endsection

@section('content')
  <section class=" add-service order-page">
    <!-- Header -->
    <div class="page-header">
      <div class="container-fluid">
        <div class="row align-items-center">
          <div class="col">
            <div class="page-title">
              <a href="{{ route('backend.order-management.index') }}">Orders / <span class="breadcrumb-link">All Orders</span></a>
            </div>
          </div>
          <div class="col-auto cate-top-btns">
            <div class="action-buttons d-none" id="bulkActions">
              <button class="btn download-btn">
                <img src="{{ asset('assets/template/images/file-pdf-1.png') }}" alt="Cattle Feed" class="file-pdf-img" />
                Download Invoice
              </button>
              <button class="btn print-btn">
                <img src="{{ asset('assets/template/images/printer-1.png') }}" alt="Cattle Feed" class="printer-img" />
                Print Invoice
              </button>
            </div>
            <a class="btn-add-category" href="{{ route('backend.master.add-vehicle') }}">
              Export <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M12 16V3"></path>
                <polyline points="7 8 12 3 17 8"></polyline>
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid order-table-sec ">
      <div class="content-wrapper">
        <div class="filter-section">
       
            <div class="col-lg-7 col-sm-12">
              <div class="order-tab-container ">
                <div class="custom-tabs" role="tablist">

                  <button class="custom-tab-btn active" type="button" data-status="">
                      All Orders - {{ $order_count }}
                  </button>
                  <button class="custom-tab-btn" type="button" data-status="pending">
                      Order Placed - {{ $order_placed_count }}
                  </button>
                  <button class="custom-tab-btn" type="button" data-status="confirmed">
                      Order Confirmed - {{ $order_confirmed_count }}
                  </button>
                  <button class="custom-tab-btn" type="button" data-status="shipped">
                      Shipped - {{ $shipped_count }}
                  </button>
                  <button class="custom-tab-btn" type="button" data-status="delivered">
                      Delivered - {{ $delivered_count }}
                  </button>
                </div>
              </div>
            </div>
            <div class="col-lg-5 col-sm-12">
              <div class="date-search-item calender-order">
                <div>
                  <div class="calender-box-item position-relative">
                    <i class="bx bx-calendar-event"></i>
                    <input type="text" class="date-picker-input" name="date_from" id="fromDate1" placeholder="From date" />
                  </div>
                </div>
                <div>
                  <div class="calender-box-item position-relative">
                    <i class="bx bx-calendar-event"></i>
                    <input type="text" class="date-picker-input"  name="date_to" id="toDate1" placeholder="To Date" />
                  </div>
                </div>
                <button type="button" id="clearDates" class="btn btn-sm btn-outline-secondary">
                  <i class="custom-tab-btn"></i> Clear Date Filter
                </button>
              </div>
            </div>
        
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table id="ordersTable" class="table mb-0">
              <thead>
                  <tr>
                      <th><input type="checkbox" class="select-all" /></th>
                      <th>Order ID</th>
                      <th>Customer</th>
                      <th>Order Date</th>
                      <th>Quantity</th>
                      <th>Total Amount</th>
                      <th>Payment Status</th>
                      <th>Order Status</th>
                      <th>Action</th>
                  </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    {{-- Status Update Modal --}}
    <div class="modal fade" id="statusModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-4">
                <div class="modal-header">
                    <h5 class="modal-title">Update Order Status</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <input type="hidden" id="statusOrderId">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Select New Status</label>
                        <select class="form-select" id="statusSelect">
                            <option value="order_placed">Order Placed</option>
                            <option value="order_confirmed">Order Confirmed</option>
                            <option value="packed">Packed</option>
                            <option value="shipped">Shipped</option>
                            <option value="out_for_delivery">Out for Delivery</option>
                            <option value="delivered">Delivered</option>
                            {{-- <option value="cancelled">Cancelled</option>
                            <option value="refund_initiated">Refund Initiated</option>
                            <option value="refunded">Refunded</option>
                            <option value="failed">Failed</option> --}}
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn cancel-btn" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn delete-btn" id="confirmStatusBtn">Update Status</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Success Toast --}}
    <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
        <div id="statusToast" class="toast login-success-toast" role="alert" aria-atomic="true">
            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">✓</div>
                </div>
                <div class="toast-right">
                    <h6>Status Updated</h6>
                    <p id="statusToastMsg">Order status updated successfully.</p>
                </div>
            </div>
        </div>
    </div>
  </section>
@endsection
@section('scripts')
  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
  <script>
    // Initialize date pickers for all tabs
    flatpickr("#fromDate1", { dateFormat: "M d, Y" });
    flatpickr("#toDate1", { dateFormat: "M d, Y" });
    flatpickr("#fromDate2", { dateFormat: "M d, Y" });
    flatpickr("#toDate2", { dateFormat: "M d, Y" });
    flatpickr("#fromDate3", { dateFormat: "M d, Y" });
    flatpickr("#toDate3", { dateFormat: "M d, Y" });
    flatpickr("#fromDate4", { dateFormat: "M d, Y" });
    flatpickr("#toDate4", { dateFormat: "M d, Y" });

    // Tab switching
    const tabBtns = document.querySelectorAll(".tab-btn");
    const tabSections = document.querySelectorAll(".tab-content-section");

    tabBtns.forEach((btn) => {
      btn.addEventListener("click", function (e) {


        tabBtns.forEach((b) => b.classList.remove("active"));
        tabSections.forEach((s) => s.classList.remove("active"));


        this.classList.add("active");

        const targetId = this.getAttribute("data-tab");
        document.getElementById(targetId).classList.add("active");
      });
    });


    const selectAllCheckboxes = document.querySelectorAll(".select-all");

    selectAllCheckboxes.forEach((selectAll) => {
      selectAll.addEventListener("change", function () {
        const table = this.closest("table");
        const checkboxes = table.querySelectorAll(".order-checkbox");
        checkboxes.forEach((cb) => {
          cb.checked = this.checked;
        });
        updateTopActions();
      });
    });


    const allCheckboxes = document.querySelectorAll(".order-checkbox");
    allCheckboxes.forEach((cb) => {
      cb.addEventListener("change", updateTopActions);
    });

    function updateTopActions() {
      const topActions = document.getElementById("topActions");
      const checkedBoxes = document.querySelectorAll(
        "#deliveredOrdersPage .order-checkbox:checked",
      );

      if (checkedBoxes.length > 0) {
        topActions.classList.add("show");
      } else {
        topActions.classList.remove("show");
      }
    }
  </script>
  <script>
    document.querySelectorAll(".custom-tab-btn").forEach((button) => {
      button.addEventListener("click", function () {
        document.querySelectorAll(".custom-tab-btn").forEach((btn) => btn.classList.remove(
          "active"));
        this.classList.add("active");
      });
    });
  </script>
  <script>
    const selectAll = document.getElementById('selectAll');
    const checkboxes = document.querySelectorAll('.order-checkbox');
    const bulkActions = document.getElementById('bulkActions');

    // Toggle buttons visibility
    function toggleBulkActions() {
      const anyChecked = [...checkboxes].some(cb => cb.checked);
      bulkActions.classList.toggle('d-none', !anyChecked);
    }

    // Select All checkbox
    selectAll?.addEventListener('change', function () {
      checkboxes.forEach(cb => cb.checked = this.checked);
      toggleBulkActions();
    });

    // Individual checkbox change
    checkboxes.forEach(cb => {
      cb.addEventListener('change', () => {
        selectAll.checked = [...checkboxes].every(c => c.checked);
        toggleBulkActions();
      });
    });
  </script>
  <script>
    $(function() {
      $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
      });
      var table = $('#ordersTable').DataTable({
        processing: true,
        ordering: false,
        searching: true,
        serverSide: true,
        responsive: true,
       
        ajax: {
            url: '{{ route("backend.order-management.index") }}',
            data: function (d) {
                d.order_status = $('.custom-tab-btn.active').data('status') || '';
                d.date_from    = $('#fromDate1').val();
                d.date_to      = $('#toDate1').val();
                
            }
        },
        columns: [
            { data: 'checkbox'},
            { data: 'order_number',   name: 'order_number' },
            { data: 'customer',       name: 'customer' },
            { data: 'order_date',     name: 'order_date' },
            { data: 'quantity',       name: 'quantity' },
            { data: 'total_amount',   name: 'total_amount' },
            { data: 'payment_status', name: 'payment_status' },
            { data: 'order_status',   name: 'order_status' },
            { data: 'action',         name: 'action'},
        ]
    });

    $(document).on('click', '.custom-tab-btn', function () {
        $('.custom-tab-btn').removeClass('active');
        $(this).addClass('active');
        table.ajax.reload(); // ← 'table' not 'ordersTable'
    });

    // Date filter
    $('#fromDate1, #toDate1').on('change', function () {
        table.ajax.reload();
    });

    flatpickr('#fromDate1', {
    dateFormat: 'Y-m-d',
        onChange: function () {
            table.ajax.reload();
        }
    });

    flatpickr('#toDate1', {
        dateFormat: 'Y-m-d',
        onChange: function () {
            table.ajax.reload();
        }
    });

    $('#clearDates').on('click', function () {
      $('#fromDate1').val('');
      $('#toDate1').val('');
      table.ajax.reload();
    });

  });

  // Status badge class map
  const statusBadgeMap = {
      'order_placed':     'status-order-placed',
      'order_confirmed':  'status-order-confirmed',
      'packed':           'status-packed',
      'shipped':          'status-shipped',
      'out_for_delivery': 'status-out-for-delivery',
      'delivered':        'status-delivered',
      'cancelled':        'status-cancelled',
      'refund_initiated': 'status-refund',
      'refunded':         'status-refunded',
      'failed':           'status-failed',
  };

  const statusLabelMap = {
      'order_placed':     'Order Placed',
      'order_confirmed':  'Order Confirmed',
      'packed':           'Packed',
      'shipped':          'Shipped',
      'out_for_delivery': 'Out for Delivery',
      'delivered':        'Delivered',
      'cancelled':        'Cancelled',
      'refund_initiated': 'Refund Initiated',
      'refunded':         'Refunded',
      'failed':           'Failed',
  };

  // Open modal
  function openStatusModal(orderId, currentStatus) {
      document.getElementById('statusOrderId').value = orderId;
      document.getElementById('statusSelect').value  = currentStatus;
      new bootstrap.Modal(document.getElementById('statusModal')).show();
  }

  // Confirm update
  document.getElementById('confirmStatusBtn').addEventListener('click', function () {
      const orderId   = document.getElementById('statusOrderId').value;
      const newStatus = document.getElementById('statusSelect').value;

      $.ajax({
          url:  `/order-management/${orderId}/update-status`,
          type: 'POST',
          data: {
              _token:       '{{ csrf_token() }}',
              order_status: newStatus,
          },
          success: function (res) {
              if (res.status) {
                  // Update badge in table without reload
                  const badge = document.querySelector(`.status-badge-${orderId}`);
                  if (badge) {
                      // Remove all old status classes
                      Object.values(statusBadgeMap).forEach(cls => badge.classList.remove(cls));
                      // Add new class
                      badge.classList.add(statusBadgeMap[newStatus] ?? 'status-order-placed');
                      badge.textContent = statusLabelMap[newStatus] ?? newStatus;
                  }

                  // Close modal
                  bootstrap.Modal.getInstance(document.getElementById('statusModal')).hide();

                  // Show toast
                  document.getElementById('statusToastMsg').textContent = 
                      'Order status updated to ' + statusLabelMap[newStatus];
                  new bootstrap.Toast(document.getElementById('statusToast')).show();
              }
          },
          error: function (xhr) {
              console.error('Status update failed:', xhr.responseText);
              alert('Failed to update status. Please try again.');
          }
      });
  });
</script>
@endsection