@extends('layouts.admin')

@section('content')
    <link rel="stylesheet" href="{{ asset('css/tiny-slider.css') }}">
    <link rel="stylesheet" href="{{ asset('css/jquery-ui.css') }}">

    <style>
        .tns-controls [aria-controls] {
        font-size: 15px;
        margin: 0 5px;
        padding: 0 1em;
        height: 2.5em;
        color: #fff;
        background: var(--bs-primary);
        border-radius: 3px;
        border: 0;
    }

    .tns-nav > .tns-nav-active {
        background: #999;
    }

    .tns-nav > [aria-controls] {
        width: 9px;
        height: 9px;
        padding: 0;
        margin: 0 5px;
        border-radius: 50%;
        background: #ddd;
        border: 0;
    }
    </style>

    <div class="page-links">
        <a href="{{ route('users.index') }}">Users</a>
        <span> > </span>
        <a href="javascript:void(0)">{{ $user->id }}</a>
        <span> > </span>
        <a href="javascript:void(0)">{{ $title }}</a>
    </div>

    <div class="row">
        <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
            @include('users.settings.leftbar')
        </div>
        <div class="col-xxl-9 col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12">
            <div class="card-main">
                <h2 class="iheading-man">
                    <div class="row">
                      <div class="col-6">{{ $title }} </div>
                    </div>
                </h2>
                <div class="row">
                    <div class="col-md-12 col-xl-8">
                        @if ($cal == NULL)
                            <div>
                                <p class="text-danger">No active package!</p>
                            </div>
                        @else
                            <div class="slider1 owl-carousel owl-theme">
                                @foreach ($cal as $it => $item)
                                    <div class="item">
                                        {{ date("F", mktime(0, 0, 0, $it, 1)) }}

                                        <div class="table-responsive">
                                            <table class="table delivery-schedule-cal">
                                                <tr class="fw-medium f-16">
                                                    <td>Sun</td>
                                                    <td>Mon</td>
                                                    <td>Tue</td>
                                                    <td>Wed</td>
                                                    <td>Thu</td>
                                                    <td>Fri</td>
                                                    <td>Sat</td>
                                                </tr>

                                                @php
                                                    $cols = 0;
                                                @endphp

                                                <tr>

                                                @while ($item['skip']--)
                                                    <td></td>
                                                    @php
                                                        $cols++;
                                                    @endphp
                                                @endwhile

                                                @foreach ($item['days'] as $k => $v)
                                                    <td class="py-0">
                                                        <div class="d-flex justify-content-between">
                                                            <div>
                                                                @if ($v['package'] == 1)
                                                                    <div class="text-start f-14 fw-medium">
                                                                        {{ $k }}
                                                                    </div>
                                                                    <div class="pt-4 delivery-schedule-tiffin-icon">
                                                                        <img class="cursor-p" src="{{ asset('assets/icons/tiffin.png') }}" alt="tiffin" class="img-fluid" onclick="tiffinDetails({{ $v['day'] }}, '{{ $v['date'] }}')">
                                                                        <span>{{ $v['tiffins_count'] }}</span>
                                                                    </div>
                                                                @else
                                                                    <span class="f-14 text-muted">
                                                                        {{ $k }}
                                                                    </span>
                                                                    <div class="pt-4 delivery-schedule-tiffin-icon">
                                                                        <img src="{{ asset('assets/icons/tiffin-transparent.png') }}" alt="tiffin" class="img-fluid">
                                                                    </div>
                                                                @endif
                                                            </div>
                                                            <div>
                                                                <div>
                                                                    @if ($v['package'] == 1)
                                                                        @if ($v['delivered'] == true)
                                                                            <i class="ti ti-check text-green-900 f-18"></i>
                                                                        @else
                                                                            <i class="ti ti-check opacity-25"></i>
                                                                        @endif
                                                                    @endif
                                                                </div>
                                                                <div class="pt-4">
                                                                    @if ($v['paused'] == true)
                                                                        <img src="{{ asset('assets/icons/paused.png') }}" alt="tiffin" class="img-fluid paused-icon">
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>

                                                    @if (++$cols == 7)
                                                        </tr>
                                                        @php
                                                            $cols = 0;
                                                        @endphp
                                                    @endif

                                                @endforeach
                                            </table>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>

                <div id="detailsModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="detailsModalTitle" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title text-dark fw-medium" id="detailsModalTitle">Delivery Schedule Details ( <span id="schedule-dt"></span> )</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body pt-0 pb-2">
                                <div id="details-package-title" class="f-18 fw-medium text-center mb-4"></div>
                                <div>
                                    <ul id="details-items" class="list-group"></ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@push('scripts')
    <script src="{{ asset('js/tiny-slider.js') }}"></script>
    <script src="{{ asset('js/ac-slider.js') }}"></script>

    <script>
        let pausedImg = '<img src={{ asset("assets/icons/paused.png") }} alt="tiffin" class="img-fluid">';

        function tiffinDetails(day, dt) {
            let userId = '{{ $user->id }}';
            let url = "{{ route('delivery-schedule-details', ['day' => 'arg1', 'dt' => 'arg2', 'userId' => 'arg3']) }}";

            url = url.replace('arg1', day);
            url = url.replace('arg2', dt);
            url = url.replace('arg3', userId);

            $.ajax({
                type: 'POST',
                url: url,
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                success: function(data) {
                    $('#details-items').empty();
                    $('#schedule-dt').text(dt);

                    for (const [key, value] of Object.entries(data)) {
                        let package_items = value.package_items;

                        let str = '<ul class="list-group mb-3 px-1">';
                        let str2 = '<ul class="list-group px-1">';

                        str2 += '<li class="list-group-item text-center fw-medium border-0 px-0 pt-0 pb-3 fw-medium">';
                        str2 += '<div class="f-16 d-flex justify-content-between">';
                            str2 += '<div>';
                                str2 += value.title;

                                if (value.delivered == true) {
                                    str2 += '&nbsp;&nbsp;&nbsp;&nbsp;<i class="ti ti-check f-16 fw-medium text-success"></i>';
                                    str2 += '<span class="f-12">' + value.delivered_at + '</span>';
                                }

                                if (value.paused == true) {
                                    str2 += '&nbsp;&nbsp;&nbsp;&nbsp;' + pausedImg;
                                }

                            str2 += '</div>';
                            str2 += '<div class="f-14 badge bg-primary pt-2">';
                                str2 += value.type;
                            str2 += '</div>';
                        str2 += '</div>';

                        str2 += '</li>';

                        package_items.forEach(function(x) {
                            str2 += '<li class="list-group-item border-0 p-1 fw-medium">' + x.quantity + '&nbsp;&nbsp;&nbsp;&nbsp;' + x.item.title + '</li>';
                        });

                        if (value.addons != '') {
                            str2 += '<hr />';
                            str2 += '<span class="text-center">ADDONS</span>';

                            value.addons.forEach(function(x) {
                                str2 += '<li class="list-group-item border-0 p-1 fw-medium">' + x.addon_qty + '&nbsp;&nbsp;&nbsp;&nbsp;' + x.title + '</li>';
                            });

                            str2 += '</ul>';
                        }

                        str += '<li class="list-group-item">' + str2 + '</li>';
                        str += '</ul>';

                        $('#details-items').append(str);
                    }

                    $('#detailsModal').modal('show');
                }
            });
        }

        $(document).ready(function() {
            var $button = $('button[data-controls="prev"]');

    // Append the button to the div with id "x"
    $button.appendTo('#prev-div');
        })
    </script>
@endpush