@extends('admin.layout.master')
@section('content')
@section('order', 'active')
@section('title', 'Orders')
<!--start page wrapper -->
<div class="page-wrapper">
    <div class="page-content">
        <!--breadcrumb-->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">Orders</div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page"></li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto">
                <div class="btn-group">
                    {{-- <a href="{{route('admin.freelancer')}}">

                    <button type="button" class="btn btn-primary">Settings</button>
                    <a href="{{route('admin.freelancer')}}"> --}}


                </div>
            </div>
        </div>
        <!--end breadcrumb-->
        <h6 class="mb-0 text-uppercase">All Orders</h6>
        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        <hr/>
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table id="example" class="table table-striped table-bordered" style="width:100%">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Mobile No</th>
                                <th>Pin Code</th>
                                <th>Address</th>
                                <th>Town</th>
                                <th>City</th>
                                <th>State</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                       <tbody>
                        @foreach($orders as $order)
                        <tr>
                            <td>{{$order->name}}</td>
                            <td>{{$order->mobile_no}}</td>
                            <td>{{$order->pin_code}}</td>
                            <td>{{$order->address}}</td>
                            <td>{{$order->town}}</td>
                            <td>{{$order->city}}</td>
                            <td>{{$order->state}}</td>

                            <td>
                                @if ($order->status == 'Shipped')
                                    <span class="badge bg-success">Shipped</span>
                                @elseif($order->status == 'Delivered')
                                    <span class="badge bg-success">Delivered</span>
                                @else
                                    <span class="badge bg-warning">Order Placed</span>
                                @endif
                            </td>



                            <td>
                                <a href="javascript;:" class="bx bx-check tribute"
                                    data-id="{{ $order->id }}" data-status="{{ $order->status }}" data-bs-toggle="modal" data-bs-target="#comment">
                                </a>
                            </td>
                        </tr>
                        @endforeach
                       </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>
<!--end page wrapper -->
<!-- Modal -->
<div class="modal fade" id="comment" tabindex="-1" aria-labelledby="comment" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Change Status</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form action="{{route('admin.order.status')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="id" class="tribute_id" value="{{$order->id}}">

                    <div class="mb-3">
                        <h6 class="card-title">Status</h6>
                        <select name="status" class="form-control status">
                            <option value="Order Placed"  @if (!empty($order) && $order->status == 'Order Placed') selected @endif>Order Placed</option>
                            <option value="Shipped"  @if (!empty($order) && $order->status == 'Shipped') selected @endif>Shipped</option>
                            <option value="Delivered"  @if (!empty($order) && $order->status == 'Delivered') selected @endif>Delivered</option>

                        </select>
                        <span class="text-danger">{{ $errors->first('status') }}</span>
                    </div>
                </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Submit</button>

            </div>
        </form>
        </div>
    </div>
</div>
@endsection
@section('script')
<script>
    $(document).ready(function() {
        $('#example').DataTable({
            pageLength: 10,
            order: [[0, 'desc']]
        });
    });
</script>
<script>
    $(".tribute").on("click", function() {
        var dataId = $(this).attr("data-id");
        var datastatus = $(this).attr("data-status");

        $(".tribute_id").val(dataId);
        $(".status").val(datastatus);

        // alert("The data-id of clicked item is: " + dataId);
    });
</script>
@endsection