@extends('layouts.admin')

@section('content')
    <section class="pc-container">
        <div class="pc-content">
            <div class="page-header">
                <div class="page-block">
                    <div class="row align-items-center">
                        <div class="col-md-12">
                            <ul class="breadcrumb">
                                <li class="breadcrumb-item">
                                    Tiffin Management
                                </li>
                                <li class="breadcrumb-item">
                                    Delivery List
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-12">
                            <div class="page-header-title">
                                <h3 class="mb-0">Delivery List</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row pt-0">
                <div class="col-md-12 col-lg-5">
                    <div class="card">
                        <div class="card-body pt-4">
                            <div class="input-group pb-3">
                                <label class="input-group-text form-label" for="routeSelect">Select Route</label>
                                <select name="route" class="form-select delivery-route-select cursor-p" id="routeSelect">
                                    <option value="" selected disabled>--- Not selected ---</option>
                                    @if (is_countable($routes))
                                        @foreach ($routes as $rt)
                                            <option value="{{ $rt->id }}">{{ $rt->title }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>

                            @if (is_countable($addresses))
                                <ul class="list-group">
                                    @if (count($addresses) > 0)
                                        @foreach ($addresses as $address)
                                            <li class="list-group-item border-0 p-0">
                                                <div>
                                                    <div>
                                                        <strong>
                                                            {{ $loop->iteration }}. {{ isset($address->user) ? $address->user->firstName : '' }}
                                                        </strong>
                                                        <div class="f-12">
                                                            {{ $address->address->address }}
                                                            <br>
                                                            {{ $address->address->city }}, {{ $address->address->zipcode }}
                                                        </div>
                                                        <div class="mt-2 mb-2">
                                                            <ul class="list-group">
                                                                @php
                                                                    $packages = $address->packages;
                                                                @endphp
                                                                @foreach ($packages as $p)
                                                                    <li class="list-group-item border border-top border-start-1 border-primary border-end-0 border-top-0 border-bottom-0 py-2">
                                                                        <div class="d-flex justify-content-between align-items-center border-bottom">
                                                                            <div>
                                                                                <span class="badge bg-primary f-16">
                                                                                    {{ getPackageTypeName($p->packageType )}}
                                                                                </span>
                                                                                {{ $p->title }}
                                                                            </div>
                                                                            <div class="mt-2">
                                                                                @if ($address->flag == true)
                                                                                    <input
                                                                                        type="checkbox"
                                                                                        data-toggle="switchbutton"
                                                                                        checked
                                                                                        data-onlabel="Delivered"
                                                                                        data-offlabel="Pending"
                                                                                        data-onstyle="success"
                                                                                        data-offstyle="danger"
                                                                                        onchange="toggleDelivery({{ $address->address->userId }} , {{ $p->id }})"
                                                                                        class="checkbox-sm"
                                                                                    >
                                                                                @else
                                                                                    <input
                                                                                        type="checkbox"
                                                                                        data-toggle="switchbutton"
                                                                                        unchecked
                                                                                        data-onlabel="Delivered"
                                                                                        data-offlabel="Pending"
                                                                                        data-onstyle="success"
                                                                                        data-offstyle="danger"
                                                                                        onchange="toggleDelivery({{ $address->address->userId }} , {{ $p->id }})"
                                                                                        class="checkbox-sm"
                                                                                    >
                                                                                @endif
                                                                            </div>
                                                                        </div>
                                                                    </li>
                                                                @endforeach
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        @endforeach
                                    @else
                                        No address available!
                                    @endif

                                </ul>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        function toggleDelivery(userId, packageId) {
            var url = "{{ route('mark-delivered', ['user' => 'arg1', 'packageId' => 'arg2']) }}";
            url = url.replace('arg1', userId);
            url = url.replace('arg2', packageId);

            $.ajax({
                type: 'POST',
                url: url,
                success: function(data) {
                    // do nothing
                }
            });
        }

        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            });

            $('#routeSelect').val('{{ $routeId }}');

            $('#routeSelect').on('change', function() {
                var url = "{{ route('delivery-list', ['route' => 'arg1']) }}";
                location.href = url.replace('arg1', this.value);
            });
        });
    </script>
@endsection