@extends('layouts.guest.master')

@section('content')
    @php
        $locale = session()->get('locale') ? session()->get('locale') : App\Helpers\ConstantHelper::ENGLISH;
    @endphp

    <section class="results mb-4">
        <form class="form" role="post-data" method="POST" action="{{ url('/carts/session-store') }}">
            @csrf
            <input type="hidden" name="branch_id" value="{{ @$branch->id }}">
            <div class="container">
                <div class="row mt-2 mt-sm-4">
                    <div class="col-md-8">
                        <div class="result-found-area">
                            <div class="makeup-item-content px-0">
                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="makeup-item-inner d-flex">
                                            <div class="makeup-img-circle-2 mr-2 mr-sm-3 ">
                                                <img src="{{ isset($branch->companyProfile->company_logo) ? $branch->companyProfile->company_logo : '' }}"
                                                    onerror="this.src='/assets/images/makeup-circle-1.jpg'"
                                                    alt="{{ isset($branch->companyProfile->company_logo) ? $branch->companyProfile->company_logo : '' }}">
                                            </div>

                                            <div class="makeup-context makeup-context-2">
                                                <h3>{{ $locale == App\Helpers\ConstantHelper::ARABIC ? @$branch->name_ar : @$branch->name_en }}
                                                    <i class="far fa-check-circle text-success"></i>
                                                </h3>
                                                <p class="my-1">{{ @$branch->address }}
                                                    <span class="text-success">({{ round($branch->distance) . 'Km' }}
                                                        )</span>
                                                </p>
                                                <div class="rating">
                                                    @php
                                                        $rating = $branch->avgRating()->first() ? $branch->avgRating()->first()->aggregate : 0;
                                                    @endphp

                                                    @for ($i = 1; $i <= 5; $i++)
                                                        @if ($i <= $rating)
                                                            <i class="fas fa-star"></i>
                                                        @else
                                                            <i class="far fa-star"></i>
                                                        @endif
                                                    @endfor
                                                    <span>({{ $rating }})</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div class="bdr-div mt-3 mb-3 mt-sm-4"></div>
                                <div class="row">
                                    <div class="col-md-12 col-12">
                                        @foreach ($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;
                                                    }
                                                }
                                                $totalDiscount = ($discount * 100) / $orginalPrice;

                                            @endphp
                                            <button
                                                class="btn btn-outline-secondary btn-sm mb-2">{{ $locale == App\Helpers\ConstantHelper::ARABIC ? $service->name_ar : $service->name_en }}
                                                - {{ $service->time }} {{ __('static.min') }} -
                                                {{ 'EGP ' . round($price) }}</button>
                                            @if ($key == 2)
                                                +4
                                            @break
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="services-tabs">
                                <nav class="">
                                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                        <button
                                            class="nav-link mr-0 mr-sm-3 {{ (isset($_GET['tab']) && $_GET['tab'] == 'services') || !isset($_GET['tab']) ? 'active' : '' }}"
                                            data-toggle="tab" data-target="#nav-services"
                                            onclick="tabActivate('services')">{{ __('static.services') }}</button>

                                        <button
                                            class="nav-link mr-0 mr-sm-3 {{ isset($_GET['tab']) && $_GET['tab'] == 'gallery' ? 'active' : '' }}"
                                            data-toggle="tab" data-target="#nav-gallery"
                                            onclick="tabActivate('gallery')"> {{ __('static.gallery') }}</button>

                                        <button
                                            class="nav-link mr-0 mr-sm-3 {{ isset($_GET['tab']) && $_GET['tab'] == 'about' ? 'active' : '' }}"
                                            data-toggle="tab" data-target="#nav-about" onclick="tabActivate('about')">
                                            {{ __('static.about') }}</button>

                                        <button
                                            class="nav-link mr-0 mr-sm-3 {{ isset($_GET['tab']) && $_GET['tab'] == 'review' ? 'active' : '' }}"
                                            data-toggle="tab" data-target="#nav-review" onclick="tabActivate('review')">
                                            {{ __('static.reviews') }}</button>

                                    </div>
                                </nav>

                                <div class="tab-content" id="nav-tabContent">
                                    @include('customer.branches.tabs.service-tab')
                                    @include('customer.branches.tabs.gallery-tab')
                                    @include('customer.branches.tabs.about-tab')
                                    @include('customer.branches.tabs.review-tab')
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mt-4">
                    <div class="service-box">
                        <div class="service-sub-text mt-0">
                            <h1><i class="far fa-calendar-check"></i> {{ __('static.book_your_service') }}</h1>
                        </div>
                        <div class="border-btm my-sm-4 my-3"></div>
                        <div class="row">
                            <div class="col-md-8 col-6">
                                <div class="total-servie-cost">
                                    <h1>{{ __('static.total_cost') }}</h1>
                                </div>
                            </div>
                            <div class="col-md-4 col-6">
                                <div class="total-servie-cost text-right">
                                    <h1><span id="total-cost">{{ __('static.egp') }} 0.00</span></h1>
                                </div>
                            </div>

                            <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="service_type" class="with-gap"
                                                type="radio" value="{{ $serviceType->alias }}"
                                                {{ old('service_type_id', @$serviceTypeAlias) == $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>

                            <div class="col-md-12 mt-3">
                                <div class="search-group">
                                    <select class="chosen-select form-control" name="staff_id" id="staff_id"
                                        onchange="fetchAvailableSlots();">
                                        <option value="">{{ __('static.select_staff') }}</option>
                                        @forelse ($staffs as $key => $staff)
                                            <option value="{{ $staff->id }}">{{ $staff->name }}</option>
                                        @empty
                                        @endforelse
                                    </select>
                                    @error('staff_id')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div><br>

                                <div class="search-group form-group">
                                    <input type="date" name="date" id="date" class="form-control"
                                        value="{{ @$cart->date }}" onchange="fetchAvailableSlots();"
                                        min="{{ date('Y-m-d') }}" max="{{ date('Y-m-d', strtotime('+15 days')) }}">
                                </div>
                                @error('date')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                                <div class="search-group">
                                    <select class="chosen-select form-control" name="slot" id="slot">
                                        <option value="">{{ __('static.available_slots') }}</option>
                                    </select>
                                    @error('slot')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror

                                </div>
                            </div>
                            <div class="col-md-12 mt-4">
                                @if (auth()->check())
                                    <button type="submit"
                                        class="btn btn-primary btn-block">{{ __('static.book_now') }}</button>
                                @else
                                    <button type="submit"
                                        class="btn btn-primary btn-block">{{ __('static.book_now') }}</button>
                                @endif
                            </div>
                        </div>
                    </div>

                    <img src="/assets/images/offer-banner.jpg" class="mt-4 rounded" />

                    <div class="service-box mt-4">
                        <div class="service-sub-text mt-0">
                            <h1><i class="far fa-clock"></i> {{ __('static.opening_hour') }}</h1>
                        </div>
                        <div class="border-btm my-3 my-sm-4"></div>

                        <div class="opening-time">
                            <ul class="list-unstyled">

                                @foreach ($branch->workHours as $key => $workHour)
                                    <li>
                                        <a href="##">
                                            <div class="d-flex justify-content-between">
                                                <div class="opening-day">
                                                    {{ __('static.' . $workHour->day) }}
                                                </div>
                                                <div class="opening-hour">
                                                    @if ($workHour->status == App\Helpers\ConstantHelper::OPEN)
                                                        <span>{{ App\Helpers\GeneralHelper::timeFormat($workHour->opening_time) }}
                                                            -
                                                            {{ App\Helpers\GeneralHelper::timeFormat($workHour->closing_time) }}</span>
                                                    @elseif($workHour->status == App\Helpers\ConstantHelper::CLOSED)
                                                        <span>{{ __('static.' . $workHour->status) }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>

                    </div>


                    <div class="service-box mt-4">
                        <div class="service-sub-text mt-0 mb-3">
                            <a href="##">
                                <h3>{{ $locale == App\Helpers\ConstantHelper::ARABIC ? $branch->name_ar : $branch->name_en }}
                                </h3>
                            </a>
                            <a href="##">
                                <p>{{ $branch->address }}</p>
                            </a>
                        </div>
                        <div class="order-dets">
                            <p><a href="##"> <i class="fa fa-phone-alt"></i>
                                    ({{ isset($branch->createdBy->mobileCode->dial_code) ? $branch->createdBy->mobileCode->dial_code : '' }})
                                    {{ isset($branch->createdBy->mobile_number) ? $branch->createdBy->mobile_number : '' }}</a>
                            </p>

                            <p class="mt-2"><a href="##"><i class="far fa-envelope"></i>
                                    <span>{{ isset($branch->createdBy->email) ? $branch->createdBy->email : '' }}</span></a>
                            </p>

                            <div class="border-btm my-3"></div>

                            <div class="cancellation-policy mt-2">
                                <h1><a
                                        href="{{ url('/cancellation-policy') }}">{{ __('static.cancellation_policy') }}</a>
                                </h1>
                            </div>
                        </div>
                    </div>
                    <div class="servic-links mt-3">
                        <div class="d-flex justify-content-center">
                            <a href="https://www.facebook.com/profile.php?id=61552285876220&mibextid=LQQJ4d"
                                target="_blank" class="link-bdr fb-bdr"><i class="fab fa-facebook-f"></i></a>
                            <a href="https://www.tiktok.com/@carestyleofficial?_t=8hjnBzt62TO&_r=1" target="_blank"
                                class="link-bdr twt-bdr"><i class="fab fa-tiktok"></i></a>
                            <a href="https://instagram.com/carestyleofficial?igshid=OGQ5ZDc2ODk2ZA==" target="_blank"
                                class="link-bdr google-bdr"><i class="fab fa-instagram"></i></a>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</section>
@endsection
@section('script')
<script>
    $(window).on('load', function() {
        $('#selectstaff').modal('show');
    });

    $(document).ready(function() {
        let totalCost = 0;
        $('.total-cost-services').on('change', function() {
            const checkboxValue = parseFloat($(this).data('price'));
            if ($(this).is(':checked')) {
                totalCost += checkboxValue;
            } else {
                totalCost -= checkboxValue;
            }
            $('#total-cost').text('EGP ' + totalCost.toFixed(2));
        });

        fetchAvailableSlots();
    });

    function tabActivate(tabs) {
        if (tabs == 'services') {
            window.location.href = "/branches/services/{{ $branch->id }}?tab=services";
        } else if (tabs == 'gallery') {
            window.location.href = "/branches/services/{{ $branch->id }}?tab=gallery";
        } else if (tabs == 'about') {
            window.location.href = "/branches/services/{{ $branch->id }}?tab=about";
        } else if (tabs == 'review') {
            window.location.href = "/branches/services/{{ $branch->id }}?tab=review";
        } else if (tabs == 'staffs') {
            window.location.href = "/branches/services/{{ $branch->id }}?tab=staffs";
        } else {
            window.location.href = "/branches/services/{{ $branch->id }}";
        }

    }

    function fetchAvailableSlots() {
        var params = {};
        params['search'] = $("#date").val();
        params['branch_id'] = "{{ $branch->id }}";
        params['staff_id'] = $('#staff_id').val();
        var app_url = "{{ config('app.url') }}";
        $.ajax({
            beforeSend: function(xhr) {},
            url: app_url + '/branches/slots',
            method: "GET",
            dataType: "json",
            data: params,
            success: function(response) {
                $("#slot").empty("");
                var slots = response.data;
                if (slots.length > 0) {
                    var options = '<option value="">' + "{{ __('static.select_slot') }}" +
                        '</option>';
                    $.each(slots, function(index, value) {
                        let startTime = $("#start_time").val();
                        let endTime = $("#end_time").val();
                        let selected = '';
                        if (startTime && endTime) {
                            let selected_value = startTime + ' - ' + endTime;
                            selected = selected_value === value ? "selected" : "";
                        }

                        options += '<option value="' + value + '" ' + selected + '>' +
                            convertToAMPM(value?.split(" - ")[0]) + " - " + convertToAMPM(value
                                ?.split(" - ")[1]) + '</option>';
                    });
                } else {
                    var options = '<option value="">' + "{{ __('static.no_slot_available') }}" +
                        '</option>';
                }
                $("#slot").append(options);
            },
        });
    }

    function convertToAMPM(time24) {
        // Parse the time string in "hh:mm:ss" format
        const timeParts = time24.split(":");
        const hours = parseInt(timeParts[0]);
        const minutes = parseInt(timeParts[1]);

        // Determine whether it's AM or PM
        const ampm = hours >= 12 ? "PM" : "AM";

        // Convert the hours to 12-hour format
        const hours12 = hours % 12 || 12;

        // Format the time as "hh:mm AM/PM"
        const time12 = `${hours12.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")} ${ampm}`;

        return time12;
    }

    $("#slot").on("change", function() {
        var selectedSlot = $(this).val();
        if (selectedSlot) {
            // Split the selected slot into start and end times
            var parts = selectedSlot.split(' - ');
            var startTime = parts[0];
            var endTime = parts[1];

            // Do something with the startTime and endTime, e.g., display them
            $("#start_time").val(startTime);
            $("#end_time").val(endTime);
        } else {
            // Handle the case where "Select slot" or no option is selected
            $("#start_time").val("");
            $("#end_time").val("");
        }
    });
</script>
<script>
    function selectServiceType(service_type) {
        window.location.href = "{{ url('/branches/services') }}/" + "{{ $branch->id }}" +
            "?type=" + service_type;
    }
</script>
@endsection