@extends("vendor.template", ["pageTitle"=>$pageTitle])
@section('content')
<div class="body-content">
  <div class="row">
    <div class="col-lg-12">
      <div class="card mb-4">
        <div class="card-header">
          <div class="d-flex justify-content-between align-items-center">
            <h6 class="fs-17 font-weight-600 mb-0">Orders List</h6>
          </div>
        </div>
        <div class="card-body">
          @include('alerts')
          <div class="table-responsive">
            <table class="table table-borderless" id="orders-table">
              <thead>
                <tr>
                  <th>Sr.</th>
                  <th>Customer Name</th>
                  <th>Date of Order</th>
                  <th>Status</th>
                  <th>City</th>
                  <th>Total Amount</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<template id="orderStatus">{{ json_encode($orderStatus) }}</template>

@endsection

@section('footer-script')
<script type="text/javascript">
  var table = $('#orders-table').DataTable({
    processing: false,
    serverSide: true,
    searching: false,
    stateSave: false,
    pageLength: 10,
    ajax: {
      'url': '{!! route('vendor.orders') !!}',
      'data': function(d) {
        d.date_from = $("input[name='date_from']").val();
        d.date_to = $("input[name='date_to']").val();
        d.brand_id = $("select[name='brand_id']").val();
        return d;
      }
    },
    columns: [
        {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false, className: 'text-center'},
        {data: 'customer.name', name: 'customer.name'}, // Customer name
        {data: 'order_date', name: 'order_date'}, // Order date
        {data: 'status', name: 'status'}, // Order status
        {data: 'city', name: 'city'}, // City from Order (assuming it's saved in the order directly)
        {data: 'total_amount', name: 'total_amount'}, // Total amount
        {data: 'action', name: 'action', orderable: false, searchable: false} // Action buttons
    ]

  });

  // Change status logic
  $(document).on("click", ".btn-change-orderStatus", function(event) {
    event.preventDefault();
    var statuses = $('#orderStatus').html();
    var statuses_arr = JSON.parse(statuses);
    var current_status = $(this).attr("data-status");
    var id = $(this).attr("data-id");

    $.confirm({
      title: "Change Order Status",
      content: function() {
        var html = "<label>Select Status:</label><br>";
        $.each(statuses_arr, function(index, value) {
          var checked = (value == current_status) ? "checked" : "";
          html += "<label><input type='radio' name='status' value='" + value + "' " + checked + "> " + value.charAt(0).toUpperCase() + value.slice(1) + "</label><br>";
        });
        return html;
      },
      buttons: {
        save: {
          text: "Save",
          btnClass: "btn btn-success confirmed",
          action: function() {
            var selected_status = this.$content.find("input[name='status']:checked").val();
            if (selected_status) {
              let url = "{{ route('vendor.order.status.update') }}";
              saveStatus(selected_status, id, url);
              alert('Order Status has been updated successfully!');
              table.ajax.reload();
            } else {
              alert("Please select status and date.");
              return false;
            }
          }
        },
        cancel: {
          text: "Cancel"
        }
      }
    });
  });

  function saveStatus(status, id, url) {
    $.ajax({
      url: url,
      type: "GET",
      data: {
        status: status,
        id: id
      },
      success: function(data) {
        if (data.status) {
          console.log(data.message);
        }
      }
    });
  }

  $("#search-button").click(function(e) {
    e.preventDefault();
    table.ajax.reload();
  });
</script>
@endsection