@section('title', $service->title . ' | ' . __('services/viewService.Services'))
@section('header-style', 'inner_nav')

@push('style')
<link rel="stylesheet" href="{{ mix('css/web/services/viewService.css') }}">
@endpush

@push('script')
<script src="{{mix('js/web/services/viewService.js')}}"></script>
@endpush

<x-layout>
    <div class="main_packag">
        <div class="container">
            <div class="col-md-12 mt-1 mb-5 text-center">
                <a class="back-btn mb-3 d-block" href="{{route('web_products_listing_services', ['division' => $division->slug, 'category' => $category->slug])}}"><i class="fa fa-chevron-left"></i>
                    @Lang('services/viewService.Go Back')</a>
                <h1 class="mani_head_1">{{$service->title}}</h1>
            </div>
            @if($service->dropdowns->count() && $serviceOptions)
            <div class="package_list mb-4">
                <span class="hove-shape1"></span><span class="hove-shape2"></span><a href="#"></a>
                <img src="{{Storage::disk('musawer')->url($service->image)}}" class="img-fluid">
                <h4 class="sub_head_1 mt-5">@if($division->slug == 'photography') @Lang('services/viewService.Select how many photos') @else @Lang('services/viewService.Select duration') @endif</h4>
            </div>
            <div class="package_list mb-4">
                <select class="form-select option-select" aria-label="Default select example">
                    <option selected>@Lang('services/viewService.Select')</option>
                    @foreach($service->dropdowns as $dropdown)
                    @if(isset($serviceOptions[$dropdown->id]) && $serviceOptions[$dropdown->id])
                    <option value="{{$dropdown->id}}" @if($loop->first) selected @endif>{{$dropdown->title}}</option>
                    @endif
                    @endforeach
                </select>
            </div>
            <div class="row justify-content-md-center">
                <div class="col-md-10">
                    @foreach($serviceOptions as $key => $options)
                    <div id="option-section-{{$key}}" class="option-section">
                        <h4 class="sub_head_2 mt-5">@Lang('services/viewService.Select packages')</h4>
                        <div class="options-owl-carousel owl-carousel">
                            @foreach ($serviceOptions[$key] as $option)
                            @if($option->price > 0 || $option->discription)
                            <div class="item">
                                <div class="package_card">
                                    <h4>@Lang('services/viewService.PRICE')</h4>
                                    <h2>{{$option->price}} <span>@Lang('custom.KWD')</span></h2>
                                    <div class="option-desc">{!! $option->description !!}</div>
                                    <div class="option-images owl-carousel">
                                        @if($option->images->count())
                                        @foreach($option->images as $image)
                                        @if($image->file && Storage::disk('musawer')->exists($image->file))
                                        <div class="item">
                                            <img class="option-img option-img-1" src="{{Storage::disk('musawer')->url($image->file)}}" class="img-fluid">
                                        </div>
                                        @endif
                                        @endforeach
                                        @endif
                                    </div>
                                    <button type="button" class="addNoteBtn" data-url="{{route('web_cart_add_note', ['option_id' => $option->id])}}">@Lang('services/viewService.Add to Cart')</button>
                                </div>
                            </div>
                            @endif
                            @endforeach
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif
        </div>

        <div class="container pt-5 pb-5">
            <div class="row">
                <div class="col-md-8 m-auto">
                    <div class="info-box p-5 bg-light b-1 text-center ">
                        <x-inner-quote-request>
                        </x-inner-quote-request>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-layout>