@extends('layouts.app')

@section('content')
    @php
        $locale = session()->get('locale') ? session()->get('locale') : App\Helpers\ConstantHelper::ENGLISH;
    @endphp
    <section class="pay-booking py-4 py-sm-5">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="top-head">
                        <h2>{{ __('label.book_your_appointment') }}</h2>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="py-2 py-sm-4">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="services-tabs">

                        <div class="tab-content" id="nav-tabContent">
                            @include('customer.book-appoinment.nav-bar')
                            @include('customer.book-appoinment.service-nav-bar')

                            <form class="form" role="post-data" method="POST"
                                action="/api/book-appointments/store-service" redirect="/book-appointments/slot"
                                data-message="false">
                                @csrf
                                <input type="hidden" name="branch_id" value="{{ $branch->id }}">
                                <input type="hidden" name="user_id" value="{{ auth()->user()->id }}">
                                <div class="">
                                    <div class="col-md-12">
                                        <div class="d-flex align-items-center mt-3">
                                            @forelse ($serviceTypes as $key => $serviceType)
                                                <div class="radio">
                                                    <input id="radio-{{ $key }}" name="type" class="with-gap"
                                                        type="radio" value="{{ $serviceType->alias }}"
                                                        {{ old('type', @$alias) == $serviceType->alias ? 'checked' : '' }}
                                                        onchange="selectServiceType('{{ $serviceType->alias }}')">
                                                    <label
                                                        for="radio-{{ $key }}">{{ $locale == App\Helpers\ConstantHelper::ARABIC ? $serviceType->service_ar : $serviceType->service_en }}</label>
                                                </div>
                                            @empty
                                            @endforelse
                                        </div>
                                    </div>
                                    <ul class="m-0 list-unstyled mt-3">
                                        @forelse ($services as $key => $service)
                                            <li>
                                                <div class="row">
                                                    @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;
                                                            }
                                                        }
                                                        $totalDiscount = ($discount * 100) / $orginalPrice;
                                                    @endphp
                                                    <div class="col-md-8">
                                                        <div class="service-group d-flex">
                                                            <div class="check-box m-0">
                                                                <input id="services_{{ $key }}" name="service_id[]"
                                                                    type="checkbox" class="filled-in"
                                                                    value="{{ $service->id }}"
                                                                    {{ in_array($service->id, @$cartServicesIds) ? 'checked' : '' }}>
                                                                <label for="services_{{ $key }}">
                                                                    <div class="service-context">
                                                                        <h5> {{ $locale == App\Helpers\ConstantHelper::ARABIC ? $service->name_ar : $service->name_en }}
                                                                        </h5>
                                                                        <p class="my-2">
                                                                            <span>{{ __('static.egp') . ' ' . round($price) }}
                                                                               {{__('master.and_up_for')}}
                                                                                {{ $service->time . __('master.minutes') }}</span>
                                                                        </p>
                                                                        <p>{{ $locale == App\Helpers\ConstantHelper::ARABIC ? $service->description_ar : $service->description_en }}
                                                                        </p>
                                                                    </div>
                                                                </label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="service-cost text-right">
                                                            <p>{{ __('static.egp') . ' ' . round($price) }} <strike>
                                                                    @if ($totalDiscount != 0)
                                                                        {{ __('static.egp') . ' ' . round($orginalPrice) }}
                                                                    @endif
                                                                </strike></p>
                                                            @if ($totalDiscount != 0)
                                                                <span class="badge badge-danger">
                                                                    {{ round($totalDiscount) }}% off
                                                                </span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            @empty
                                            <li>
                                                <p>
                                                    <center class="text-danger">
                                                        {{ __('message.no_records_found') }}
                                                    </center>
                                                </p>
                                            </li>

                                            </li>
                                        @endforelse
                                    </ul>
                                </div>

                                <div class="d-flex mt-4 justify-content-between">
                                    <a href="{{ url('/book-appointments/staffs/' . $branch->id) }}"
                                        class="btn btn-outline-secondary">
                                        <i class="fas fa-chevron-left mr-1"></i> {{ __('static.back') }}
                                    </a>
                                    <button type="button" class="btn btn-primary" role="button" data-request="ajax-submit"
                                        data-target="[role=post-data]"><i
                                            class="fas fa-chevron-right mr-1"></i>{{ __('label.next') }}</button>
                                </div>
                                <form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
@endsection
@section('script')
    <script>
        function selectServiceType(service_type) {
            console.log(service_type);
            window.location.href = "{{ url('/book-appointments/services') }}/" + "{{ $branch->id }}" +
                "?type=" + service_type;
        }
    </script>
@endsection