@extends('pages.layout')
@section('title', 'view Scrapmen')
@section('content')
    <div class="page-container">
        <div class="main-content">
            <div class="container">
                <div class="card">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-md-7">
                                <div class="d-md-flex align-items-center">
                                    <div class="text-center text-sm-left ">
                                        <div class="avatar avatar-image" style="width: 100px; height:100px">
                                            @if (isset($user->image) && file_exists(public_path('image/' . $user->image)))
                                                <img src="{{ asset('image/' . $user->image) }}">
                                            @else
                                                <img src="{{ asset('assets/images/avatars/avatar.png') }}">
                                            @endif
                                        </div>
                                    </div>
                                    <div class="m-l-10">
                                        <h2 class="m-b-5">{{ Str::ucfirst($scrapmen->user->name ?? null) }}</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-5">
                                <div class="row">
                                    <div class="d-md-block d-none border-left col-1"></div>
                                    <div class="col">
                                        <ul class="list-unstyled m-t-10">
                                            <li class="row">
                                                <p class="col-sm-4 col-4 font-weight-semibold text-dark m-b-5">
                                                    <i class="m-r-10 text-primary anticon anticon-phone"></i>
                                                    <span>Phone: </span>
                                                </p>
                                                <p class="col font-weight-semibold">{{ $scrapmen->user->phone_no ?? null }}
                                                </p>
                                            </li>
                                            <li class="row">
                                                <p class="col-sm-4 col-4 font-weight-semibold text-dark m-b-5">
                                                    <i class="m-r-10 text-primary anticon anticon-mail"></i>
                                                    <span>Email: </span>
                                                </p>
                                                <p class="col font-weight-semibold">{{      $scrapmen->user->email ?? null }}
                                                </p>
                                            </li>

                                        </ul>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <!--datatable-->
                            <div class="m-t-25">
                                <table id="datatable" class="table" data-page-length = "10">
                                    <thead>
                                        <tr>
                                            <th>Sr. no</th>
                                            <th>User</th>
                                            <th>Order Id</th>
                                            <th>Otp</th>
                                            <th>Otp Verified</th>
                                            <th>Status</th>
                                            {{-- <th>Pick Date and Time</th>
                                            <th>Current Status</th> --}}
                                        </tr>
                                    </thead>
                                    {{-- <tbody>
                                        @foreach ($scrapmen->user->scrapmenOrders as $order)
                                            <tr>
                                                <td>{{ $order->pickupOrder->order_id }}</td>
                                                <td>{{ $order->otp }}</td>
                                                <td>{{ $order->pickupOrder->pickup_date }}
                                                    {{ $order->pickupOrder->pickup_time }}
                                                </td>
                                                <td>
                                                    @if ($order->pickupOrder->pickup_completed == '1')
                                                        <span class="badge badge-pill badge-success">Completed</span>
                                                    @elseif($order->pickupOrder->pickup_day_status == '1')
                                                        <span class="badge badge-pill badge-primary">Pickup Day
                                                            Status</span>
                                                    @elseif($order->pickupOrder->confirm_call_status == '1')
                                                        <span class="badge badge-pill badge-secondary">Confirm Call
                                                            Status</span>
                                                    @elseif($order->pickupOrder->is_cancel == '1')
                                                        <span class="badge badge-pill badge-danger">Order
                                                            Cancel</span>
                                                    @else
                                                        <span class="badge badge-pill badge-danger">Pickup Request
                                                            Pending</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody> --}}
                                </table>
                            </div>

                        </div>
                    </div>

                </div>


            </div>
        </div>
    </div>

@endsection

@section('js')
    <script>
        const userViewRoute = "{{ route('admin.user.view', ':id') }}";
    </script>
    <script>
        $(document).ready(function() {
            var userId = '{{ $scrapmen->id }}';
            var table = $('#datatable').DataTable({
                "processing": true,
                "serverSide": true,
                responsive: true,
                pageLength: 25,
                'order': [
                    [0, 'desc']
                ],
                language: {
                    search: "",
                    searchPlaceholder: "Search Here",
                },
                "ajax": {
                    "url": "{{ route('admin.scrapmen.search.order', ['scrapmen' => ':id']) }}".replace(
                        ':id', userId),
                    "type": "POST",
                    "headers": {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    },
                    "data": function(d) {}
                },

                columns: [{
                        data: null,
                        orderable: false
                    },
                    {
                        data: 'pickup_order.user',
                        render: function(data, type, row) {
                            return `
                                <div class="d-flex align-items-center">
                                    <span class="badge badge-success badge-dot m-r-10"></span>
                                    <div class="d-flex align-items-center">
                                <a href="${userViewRoute.replace(':id', data.id)}">
                                        <h6 class="m-l-10 m-b-0">${data.name}</br>
                                            <i>${data.phone_no}</i>
                                        </h6>
                                        </a>
                                    </div>
                                </div>

                            `;
                        },
                        orderable: false
                    },
                    {
                        data: 'pickup_order',
                        render: function(data, type, row) {
                            return `
                                ${data.order_id}
                            `;
                        },
                        orderable: false
                    },
                    {
                        data: "otp"
                    },
                    {
                        data: 'otp_verified',
                        render: function(data, type, row) {
                            if (data == "1") {
                                return `Yes`;
                            } else {
                                return `No`;
                            }
                        },
                    },
                    {
                        data: 'pickup_order',
                        render: function(data, type, row) {
                            if (data.pickup_completed == "1") {
                                return `
                            <span class="badge badge-pill badge-success">Completed</span>
                        `;
                            } else if (data.pickup_day_status == "1") {
                                return `
                            <span class="badge badge-pill badge-primary">Pickup Day Status</span>
                        `;
                            } else if (data.confirm_call_status == "1") {
                                return `
                                <span class="badge badge-pill badge-secondary">Confirm Call Status</span>
                            `;
                            } else if (data.is_cancel == "1") {
                                return `
                            <span class="badge badge-pill badge-danger">Order Cancel</span>
                        `;
                            } else {
                                return `
                                <span class="badge badge-pill badge-danger">Pickup Request Pending</span>
                            `;
                            }
                        },
                        orderable: false
                    }
                ],
                createdRow: function(row, data, dataIndex) {
                    $('td:eq(0)', row).html(dataIndex + 1);
                }
            });
        });
    </script>
@endsection