@extends('layouts.app')

@section('content')
    @php
        $locale = session()->get('locale') ? session()->get('locale') : App\Helpers\ConstantHelper::ENGLISH;
    @endphp
    <section class="pt-4 ">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <a href="{{ route('home', ['appointment' => 'today']) }}">
                        <div class="top-data-design">
                            <img src="{{ asset('assets/images/1.png') }}" alt="" />
                            <h4>{{ $todayAppointmentCount }}</h4>
                            <h5><i class="far fa-calendar-alt"></i> {{ __('label.today_appointment') }}</h5>
                        </div>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="{{ route('home', ['appointment' => 'upcoming']) }}">
                        <div class="top-data-design top-box-sub-main-icon2">
                            <img src="{{ asset('assets/images/2.png') }}" alt="" />
                            <h4>{{ $upcomingAppointmentCount }}</h4>
                            <h5><i class="far fa-calendar-check"></i> {{ __('label.upcoming_appointment') }}</h5>
                        </div>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="{{ route('home', ['appointment' => 'reschedule']) }}">
                        <div class="top-data-design top-box-sub-main-icon3">
                            <img src="{{ asset('assets/images/3.png') }}" alt="" />
                            <h4>{{ $rescheduledAppointmentCount }}</h4>
                            <h5><i class="far fa-calendar-plus"></i> {{ __('label.reschedule_appointment') }}</h5>
                        </div>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="{{ route('home', ['appointment' => 'cancelled']) }}">
                        <div class="top-data-design top-box-sub-main-icon4">
                            <img src="{{ asset('assets/images/4.png') }}" alt="" />
                            <h4>{{ $cancelledAppointmentCount }}</h4>
                            <h5><i class="far fa-calendar-times"></i> {{ __('label.cancelled_appointment') }}</h5>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <section class="py-2 py-sm-4">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="personal-detailstext">
                        <h3 class="mb-0" id="event-text">{{ __('label.my_today_appointments') }}</h3>
                    </div>
                </div>
                <div class="col-md-8" id="render-appointments">
                    @forelse ($orders as $key => $order)
                        <div class="result-found-area upcoming-appointmentscontent mt-4">
                            <div class="listing-badgenew now-open d-sm-block d-none">
                                <span>{{ __('static.pay_amount', ['value' => $order->balance_amount]) }}</span>
                            </div>
                            <div class="makeup-item-content">
                                <div class="row">
                                    <div class="col-md-8 mb-sm-0 mb-3">
                                        <div class="makeup-item-inner d-flex">
                                            <div class="makeup-img-circle-2 mr-3">
                                                <img src="{{ asset('assets/images/makeup-circle-1.jpg') }}" alt="/">
                                            </div>

                                            <div class="makeup-context makeup-context-2">
                                                <h3>{{ $locale == App\Helpers\ConstantHelper::ARABIC ? $order->branch->name_ar : $order->branch->name_en }}
                                                </h3>
                                                <div class="my-2">
                                                    <span class="appointment-date">
                                                        {{ __('label.date') }}:
                                                        {{ date('d-m-Y', strtotime($order->date)) }} |
                                                        {{ App\Helpers\GeneralHelper::timeFormat($order->start_time) }}-{{ App\Helpers\GeneralHelper::timeFormat($order->end_time) }}
                                                    </span>
                                                </div>
                                                <p class="my-1">
                                                    {{ $order->branch->address }}
                                                    <span
                                                        class="text-success">({{ round($order->branch->distance) . ' Km' }})</span>
                                                </p>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-2 col-4">
                                        <span class="btn btn-primary btn-sm">
                                            {{ $locale == App\Helpers\ConstantHelper::ARABIC ? (isset($order->serviceType->service_ar) ? $order->serviceType->service_ar : '') : (isset($order->serviceType->service_en) ? $order->serviceType->service_en : '') }}
                                        </span>
                                    </div>
                                </div>
                                <div class="bdr-div mt-3 mb-3"></div>
                                <div class="row">
                                    <div class="col-md-12 mb-sm-0 mb-3">
                                        @foreach ($order->services as $key => $service)
                                            @php
                                                $discount = 0;
                                                $totalDiscount = 0;
                                                $price = $orginalPrice = isset($service['serviceTypes'][0]['pivot']['price']) ? $service['serviceTypes'][0]['pivot']['price'] : 0;
                                                if (isset($service['offers']) && $price) {
                                                    foreach ($service['offers'] as $offer) {
                                                        $discount_amount = ($price * $offer->discount) / 100;
                                                        $price = $price - $discount_amount;
                                                        $discount = $discount + $discount_amount;
                                                    }
                                                }
                                            @endphp
                                            <button
                                                class="btn btn-outline-secondary btn-sm">{{ $locale == App\Helpers\ConstantHelper::ARABIC ? $service->name_ar : $service->name_en }}
                                                -
                                                {{ $service->time . ' ' . __('static.min') . ' ' . __('static.egp') }}
                                                {{ round($price) }}</button>

                                            @if ($key == 2)
                                                +4
                                            @break
                                        @endif
                                    @endforeach
                                </div>
                            </div>

                            <div class="row mt-3">
                                <div class="col-md-12 col-12">
                                    <ul class="ideastatusbar payment-structure">
                                        <li class="completed">
                                            <h4>{{ __('label.amount_paid') }}</h4>
                                            <p>{{ __('static.egp_amount', ['amount' => $order->total_paid]) }}</p>
                                        </li>
                                        <li class="completed">
                                            <h4>{{ __('label.balance_amount') }}</h4>
                                            <p>{{ __('static.egp_amount', ['amount' => $order->balance_amount]) }}</p>
                                        </li>
                                        <li class="completed">
                                            <h4>{{ __('label.total_amount') }}</h4>
                                            <p>{{ __('static.egp_amount', ['amount' => $order->payable_amount]) }}</p>
                                        </li>
                                        <li>
                                            <div
                                                class="badge-new {{ $order->payment_status == 'paid' ? 'badge-new-success' : 'badge-new-danger' }}">
                                                {{ __('static.'.$order->payment_status) }}
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>


                            <div class="status-contentbox">
                                <div class="row">
                                    <div class="col-md-6 col-6">
                                        <h6>Status</h6>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-12 col-12">
                                        <ul class="ideastatusbar">
                                            @foreach ($order->orderStatusLogs as $key => $orderStatusLog)
                                                <li class="completed">
                                                    <div class="ideadefstat"><span>{{ $key + 1 }}</span></div>
                                                    <h4>{{ __('static.' . $orderStatusLog->status) }}</h4>
                                                    <p>{{ date('d-m-Y', strtotime($orderStatusLog->date)) }}
                                                        {{ App\Helpers\GeneralHelper::timeFormat($orderStatusLog->start_time) }}-{{ App\Helpers\GeneralHelper::timeFormat($orderStatusLog->end_time) }}
                                                    </p>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <p>
                        <center class="text-danger">
                            {{ __('message.no_records_found') }}
                        </center>
                    </p>
                @endforelse
            </div>

            <div class="col-md-4">
                <div class="booking-summary mt-0 mt-sm-4">
                    <h6> <i class="far fa-calendar-check"></i> {{ __('label.your_schedule') }}</h6>

                    <div class="row mt-4">
                        <div class="col-md-12">
                            <div class="leave-indicator myatteandance-leave mb-3">
                                <div>
                                    <div class="presentleave"><span></span> {{ __('label.completed') }}</div>
                                </div>
                                <div>
                                    <div class="paidleave"><span></span> {{ __('label.cancelled') }}</div>
                                </div>
                                <div>
                                    <div class="holyleave"><span></span> {{ __('label.upcoming') }}</div>
                                </div>
                            </div>
                            <div id="calendar"></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</section>
@endsection
@section('script')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            headerToolbar: {
                left: 'title',
                center: '',
                right: 'prev,next'
            },

            editable: true,
            dayMaxEvents: true, // allow "more" link when too many events
            dateClick: function(info) {
                let date = info.dateStr;
                $.ajax({
                    url: app_url + '/api/appointments-list',
                    type: 'GET',
                    cache: true,
                    data: {
                        date: date,
                    },
                    success: function(response) {
                        console.log(response);
                        var order = response.data;
                        $('#render-appointments').html(order);
                        $('#event-text').text("{{ __('static.my_appointments') }}");

                        // var events = [];
                        // $(order).each(function() {
                        //     events.push({
                        //         title: $(this).attr('type') ?
                        //             '<div class="dotcirclatt ' + $(this)
                        //             .attr('type') + '"></div>' :
                        //             '<div class=""></div>',
                        //         start: $(this).attr('date'),
                        //     });
                        // });
                    }
                });
            },
            eventClick: function(info) {
                var date = info.event.startStr;
                $.ajax({
                    url: app_url + '/api/appointments-list',
                    type: 'GET',
                    cache: true,
                    data: {
                        // start_date: info.event.startStr,
                        // end_date: info.event.endStr,
                        date: date,
                    },
                    success: function(response) {
                        var order = response.data;
                        $('#render-appointments').html(order);
                        $('#event-text').text("{{ __('static.my_appointments') }}");

                        // var order = response.data.order;
                        // var events = [];
                        // $(order).each(function() {
                        //     events.push({
                        //         title: $(this).attr('type') ?
                        //             '<div class="dotcirclatt ' + $(this)
                        //             .attr('type') + '"></div>' :
                        //             '<div class=""></div>',
                        //         start: $(this).attr('date'),
                        //     });
                        // });
                    }
                });

            },
            eventContent: function(info) {
                return {
                    html: info.event.title,
                    att: info.event.type
                };
            },
            events: function(info, successCallback, failureCallback) {
                $.ajax({
                    url: app_url + '/api/appointments',
                    type: 'GET',
                    cache: true,
                    data: {
                        start_date: info.startStr,
                        end_date: info.endStr,
                    },
                    success: function(response) {
                        var order = response.data.order;
                        var events = [];
                        $(order).each(function() {
                            events.push({
                                title: $(this).attr('type') ?
                                    '<div class="dotcirclatt ' + $(this)
                                    .attr('type') + '"></div>' :
                                    '<div class=""></div>',
                                start: $(this).attr('date'),
                            });
                        });
                        successCallback(events);
                    }
                });

            }
        });

        calendar.render();
    });
</script>
@endsection