@extends('admin.layouts.app')

@section('title', 'Manual Order')

@section('content')

<section class="content">
      <div class="row">
            <div class="col-12">
                  <div class="box table-responsive">
                        <div class="box-header with-border">
                              <div class="row">
                                    <div class="col-10">
                                          <form method="GET" action="{{ url('manual-order') }}">
                                                <div id="order-table-actions">
                                                      <button class="btn btn-falcon-default btn-sm mr-1" type="submit" name="filter" value="bol">
                                                            Bol
                                                      </button>
                                                      <button class="btn btn-falcon-default btn-sm mr-1" type="submit" name="filter" value="woocommerce">
                                                            Woocommerce
                                                      </button>
                                                      <button class="btn btn-falcon-default btn-sm mr-1" type="submit" name="filter" value="manual">
                                                            Manual
                                                      </button>
                                                      <button class="btn btn-falcon-default btn-sm mr-1" type="submit" name="sort" value="asc">
                                                            Sort Ascending
                                                      </button>
                                                      <button class="btn btn-falcon-default btn-sm mr-1" type="submit" name="sort" value="desc">
                                                            Sort Descending
                                                      </button>
                                                      <button class="btn btn-falcon-default btn-sm mr-1" type="submit" name="filter" value="all">
                                                            Show All Orders
                                                      </button>
                                                      <button class="btn btn-falcon-default btn-sm" type="submit" name="filter" value="shipped">
                                                            Show Shipped Orders
                                                      </button>
                                                </div>
                                          </form>
                                    </div>
                                    @if (auth()->user()->can('add-manual-order'))
                                    <div class="col-2 text-right">
                                          <a href="{{ url('manual-order/create') }}" class="btn btn-primary btn-sm">
                                                <i class="mdi mdi-plus-circle mr-2"></i>@lang('pages_names.add_manual_order')</a>
                                    </div>
                                    @endif
                              </div>
                        </div>

                        <div id="js-manual-order-partial-target">
                              <!-- <include-fragment src="manual-order/fetch">
                                    <span style="text-align: center;font-weight: bold;">@lang('view_pages.loading')</span>
                              </include-fragment> -->

                              <table class="table table-hover">
                                    <thead>
                                          <tr>
                                                <th> @lang('view_pages.s_no')</th>
                                                <th> @lang('view_pages.order_date')</th>
                                                <th> @lang('view_pages.name')</th>
                                                <th> @lang('view_pages.phone')</th>
                                                <th> @lang('view_pages.quantity')</th>
                                                <th> @lang('view_pages.payment_method')</th>
                                                <th> @lang('view_pages.address')</th>
                                                <th> @lang('view_pages.status')</th>
                                                <th> @lang('view_pages.order_type')</th>
                                                <th> @lang('view_pages.assign_to')</th>
                                                <th> @lang('view_pages.action')</th>
                                                <th> @lang('view_pages.detail')</th>
                                          </tr>
                                    </thead>

                                    <tbody>

                                          @forelse($results as $index => $result)
                                          <tr>
                                                <td>{{ $index+1 }} </td>
                                                <td>{{ $result['created_date']??'' }}</td>
                                                <td>{{$result['name']??''}}</td>
                                                <td>{{$result['phone']??''}}</td>
                                                <td>{{$result['quantity']??0}}</td>
                                                <td>{{$result['payment_method']??''}}</td>
                                                <td>{{$result['address']??''}}</td>
                                                <td>{{ucfirst($result['status']??'')}}</td>
                                                <td>{{ucfirst($result['order_type']??'')}}</td>
                                                <td>
                                                      <select class="assign-dropdown form-control" data-id="{{ $result['id'] }}" style="min-width: 200px;">
                                                            <option value="" selected disabled>--Assign Dispatcher--</option>
                                                            @foreach($dispatchers as $item)
                                                            <option value="{{$item->id}}" {{ $result['dispatcher_id'] == $item->id ? 'selected' : '' }}>{{$item->name??''}}</option>
                                                            @endforeach
                                                      </select>
                                                </td>
                                                <td>
                                                      @if($result['order_type']=='Manual')
                                                      <select class="status-dropdown form-control" data-id="{{ $result['id'] }}" style="min-width: 200px;">
                                                            <option value="pending" {{ $result['status'] == 'pending' ? 'selected' : '' }}>Pending</option>
                                                            <option value="approved" {{ $result['status'] == 'approved' ? 'selected' : '' }}>Approved</option>
                                                            <option value="dispatched" {{ $result['status'] == 'dispatched' ? 'selected' : '' }}>Dispatched</option>
                                                            <option value="delivered" {{ $result['status'] == 'delivered' ? 'selected' : '' }}>Delivered</option>
                                                            <option value="cancelled" {{ $result['status'] == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                                                      </select>
                                                      @endif
                                                </td>

                                                <td>{{$result['detail']??''}}</td>

                                          </tr>
                                          @empty
                                          <tr>
                                                <td colspan="9">
                                                      <p id="no_data" class="lead no-data text-center">
                                                            <img src="{{asset('assets/img/dark-data.svg')}}" style="width:150px;margin-top:25px;margin-bottom:25px;" alt="">
                                                      <h4 class="text-center" style="color:#333;font-size:25px;">@lang('view_pages.no_data_found')</h4>
                                                      </p>
                                                </td>
                                          </tr>
                                          @endforelse

                                    </tbody>
                              </table>
                              <ul class="pagination">
                                    <li>
                                          <a href="#">{{$results->links()}}</a>
                                    </li>
                              </ul>

                        </div>

                  </div>
            </div>
      </div>
</section>
<script src="{{ asset('assets/js/fetchdata.min.js') }}"></script>
<script>
      $(function() {
            $('body').on('click', '.pagination a', function(e) {
                  e.preventDefault();
                  var url = $(this).attr('href');
                  $.get(url, $('#search').serialize(), function(data) {
                        $('#js-manual-order-partial-target').html(data);
                  });
            });

            $('#search').on('click', function(e) {
                  e.preventDefault();
                  var search_keyword = $('#search_keyword').val();
                  console.log(search_keyword);
                  fetch('manual-order?search=' + search_keyword)
                        .then(response => response.text())
                        .then(html => {
                              document.querySelector('#js-manual-order-partial-target').innerHTML = html
                        });
            });

            $(document).on('change', '.status-dropdown', function() {
                  let orderId = $(this).data('id');
                  let status = $(this).val();

                  $.ajax({
                        url: "{{ url('manual-order/status') }}",
                        type: "POST",
                        data: {
                              _token: "{{ csrf_token() }}",
                              order_id: orderId,
                              status: status
                        },
                        success: function(response) {
                              if (response.success) {
                                    location.reload();
                              } else {
                                    alert("Failed to update status");
                              }
                        },
                        error: function(xhr) {
                              alert("Error updating status");
                        }
                  });
            });

            $(document).on('change', '.assign-dropdown', function() {
                  let orderId = $(this).data('id');
                  let dispatcher_id = $(this).val();

                  $.ajax({
                        url: "{{ url('manual-order/assign') }}",
                        type: "POST",
                        data: {
                              _token: "{{ csrf_token() }}",
                              order_id: orderId,
                              dispatcher_id: dispatcher_id
                        },
                        success: function(response) {
                              if (response.success) {
                                    location.reload();
                              } else {
                                    alert("Failed to assign order");
                              }
                        },
                        error: function(xhr) {
                              alert("Error assign order");
                        }
                  });
            });
      });
</script>
@endsection