@extends('admin::layouts.app')
<style>
    .image-container {
        position: relative;
        display: inline-block;
        margin: 10px;
    }

    /* Style for the delete button */
    .delete-image {
        position: absolute;
        background-color: rgba(255, 0, 0, 0.7);
        color: white;
        font-size: 14px;
        border-radius: 50%;
        cursor: pointer;
        opacity: 0;
        margin: 5px;
        transition: opacity 0.2s;
    }

    /* Show the delete button on hover */
    #image-container:hover .delete-image {
        opacity: 1;
    }
</style>
@section('content')
    <section class="content mb-5">
        <div class="container-fluid">
            <div class="row titlepad publsih-sticky">
                <div class="col-md-12">
                    <div class="mt-3 mb-3">
                        <div class="dashbed-border-bottom"></div>
                    </div>
                    <div class="row">
                        <div class="col-sm-8">
                            <h4>{{ $service->name_en }}</h4>
                            <p class="page-sub-head">{{__('label.view_service')}}</p>
                        </div>
                        <div class="col-md-4 text-sm-right mt-2">
                            @if ($service->approved_at == null)
                                <a class="btn-md px-3 py-2 btn-primary" onclick="updateStatus('approved')"><i
                                        class="fa fa-check-square-o"></i> {{ __('admin.approved') }}</a>
                                <a class="btn-md px-3 py-2 btn-danger" onclick="updateStatus('rejected')"><i
                                        class="fa fa-close"></i>
                                    {{ __('admin.reject') }}</a>
                            @endif
                            <a href="javascript:history.back()" class="btn-md px-3 py-2 btn-secondary"><i
                                    class="fa fa-chevron-circle-left"></i> {{ __('static.cancel') }}</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4">
                    <div class="card package-section cc-section mt-3">
                        <div class="row">
                            <div class="col-4">
                                <div class="cc-image">
                                    <img
                                        src="{{ isset($service->createdBy->companyProfile->company_logo) ? $service->createdBy->companyProfile->company_logo : asset('admin-assets/img/makeup-circle-1.jpg') }}">
                                </div>
                            </div>
                            <div class="col-8 pl-0">
                                <h5>{{ isset($service->createdBy->name) ? $service->createdBy->name : '' }}</h5>
                                <h6 class="mb-1">
                                    {{ isset($service->createdBy->business_location) ? $service->createdBy->business_location : '' }}
                                </h6>
                            </div>
                            <div class="col-md-12">
                                <div class="border-top mb-3"></div>
                            </div>
                            <div class="col-6 pack-details">
                                <p>{{ __('admin.date_of_registration') }}</p>
                                <h5>{{ isset($service->created_at) ? Modules\Admin\Helpers\GeneralHelper::dateFormat($service->created_at) : '-' }}
                                </h5>
                            </div>
                            <div class="col-6 pack-details">
                                <p>{{ __('admin.type') }}</p>
                                <h5> {{ implode(', ', $serviceTypes) }}</h5>
                            </div>

                            <div class="col-md-12">
                                <h5 class="text-black mt-2">{{ __('admin.booking_summary') }}</h5>

                                <div class="mt-2 mb-2">
                                    <div class="dashbed-border-bottom"></div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="curveBox border shadow">
                                            <div class="row row-flex">
                                                <div class="col-3">
                                                    <div class="bluecolor iconSetting">
                                                        <img src="{{ asset('admin-assets/img/light-contacts.svg') }}">
                                                    </div>
                                                </div>
                                                <div class="col-9 pl-2">
                                                    <a class="dashTitle font-weight-light my-2 ml-3 text-black"
                                                        href="#sansaction"
                                                        data-toggle="modal">{{ $totalOrdersCount }}/<span>{{ __('admin.total') }}</span></a>
                                                    <div class="dot-blue mb-3"><i class="fa fa-circle"></i>
                                                        {{ __('admin.booking_value') }}
                                                        <strong>{{ __('admin.sar') }}
                                                            {{ number_format($totalOrdersAmount, 2) }}</strong>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="curveBox border shadow">
                                            <div class="row row-flex">
                                                <div class="col-3">
                                                    <div class="greencolor iconSetting">
                                                        <img src="{{ asset('admin-assets/img/light-contacts.svg') }}">
                                                    </div>
                                                </div>
                                                <div class="col-9 pl-2">
                                                    <h2 class="dashTitle font-weight-light my-2 ml-3">
                                                        {{ $completedOrdersCount }}/<span>{{ __('admin.completed') }}</span>
                                                    </h2>
                                                    <div class="dot-green mb-3"><i class="fa fa-circle"></i>
                                                        {{ __('admin.booking_value') }}
                                                        <strong>{{ __('admin.sar') }}
                                                            {{ number_format($completedOrdersAmount, 2) }}</strong>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="curveBox border shadow">
                                            <div class="row row-flex">
                                                <div class="col-3">
                                                    <div class="orangecolor iconSetting">
                                                        <img src="{{ asset('admin-assets/img/light-contacts.svg') }}">
                                                    </div>
                                                </div>
                                                <div class="col-9 pl-2">
                                                    <h2 class="dashTitle font-weight-light my-2 ml-3">
                                                        {{ $inprocessOrdersCount }}/<span>{{ __('admin.in_process') }}</span>
                                                    </h2>
                                                    <div class="dot-orange mb-3"><i class="fa fa-circle"></i>
                                                        {{ __('admin.booking_value') }}
                                                        <strong>{{ __('admin.sar') }}
                                                            {{ number_format($inprocessOrdersAmount, 2) }}</strong>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="curveBox border shadow">
                                            <div class="row row-flex">
                                                <div class="col-3">
                                                    <div class="bluecolor iconSetting">
                                                        <img src="{{ asset('admin-assets/img/light-contacts.svg') }}">
                                                    </div>
                                                </div>
                                                <div class="col-9 pl-2">
                                                    <h2 class="dashTitle font-weight-light my-2 ml-3">
                                                        {{ $upcomingOrdersCount }}/<span>{{ __('admin.upcoming') }}</span>
                                                    </h2>
                                                    <div class="dot-blue mb-3"><i class="fa fa-circle"></i>
                                                        {{ __('admin.booking_value') }}
                                                        <strong>{{ __('admin.sar') }}
                                                            {{ number_format($upcomingOrdersAmount, 2) }}</strong>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="curveBox border shadow">
                                            <div class="row row-flex">
                                                <div class="col-3">
                                                    <div class="pinkcolor iconSetting">
                                                        <img src="{{ asset('admin-assets/img/light-contacts.svg') }}">
                                                    </div>
                                                </div>
                                                <div class="col-9 pl-2">
                                                    <a class="dashTitle font-weight-light my-2 ml-3 text-black"
                                                        href="#demandsanc"
                                                        data-toggle="modal">{{ $cancelledOrdersCount }}/<span>{{ __('admin.cancelled') }}</span></a>
                                                    <div class="dot-pink mb-3"><i class="fa fa-circle"></i>
                                                        {{ __('admin.booking_value') }}
                                                        <strong>{{ __('admin.sar') }}
                                                            {{ number_format($cancelledOrdersAmount, 2) }}</strong>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div id="accordion" class="accordion accordion-app mt-3">
                        <div class="card mb-1">
                            <div class="card-header" data-toggle="collapse" href="#noslide" aria-expanded="false">
                                <a href="#" class="card-title text-black">{{ __('master.service_details') }} </a>
                            </div>
                            <div id="noslide" class="card-body collapse show" data-parent="#accordion" style="">
                                <div class="row mb-2">
                                    <div class="col-md-2">
                                        <label class="logCheck mb-3">
                                            {{ __('admin.active') }}
                                            <input type="radio" name="status" value="active"
                                                {{ $service->status == App\Helpers\ConstantHelper::ACTIVE ? 'checked' : '' }}
                                                onclick="updateStatus('active')">
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="col-md-2">
                                        <label class="logCheck mb-0">
                                            {{ __('admin.inactive') }}
                                            <input type="radio" name="status" value="inactive"
                                                {{ $service->status == App\Helpers\ConstantHelper::IN_ACTIVE ? 'checked' : '' }}
                                                onclick="updateStatus('inactive')">
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                </div>

                                <div class="package-section p-0">
                                    <div class="row">
                                        <div class="col-12">
                                            <h5>{{ $service->name_en }}</h5>
                                            <h6> {{ __('admin.created_on') }}:
                                                {{ date_format($service->created_at, 'd-m-Y') }}</h6>
                                            @php
                                                $discount = isset($service->serviceView->discount) ? $service->serviceView->discount : 0;
                                                $homePrice = isset($service->serviceView->home_price) ? $service->serviceView->home_price : 0;
                                                $centerPrice = isset($service->serviceView->center_price) ? $service->serviceView->center_price : 0;
                                            @endphp
                                            @if ($homePrice > 0)
                                                <p> {{__('label.home_service')}} : {{ __('admin.sar') }}
                                                    {{ round($homePrice - ($homePrice * $discount) / 100) }}
                                                    @if ($discount > 0)
                                                        <strike>{{ __('admin.sar') }}
                                                            {{ $homePrice }}</strike>
                                                        <span class="badge badge-secondary">{{ $discount }}%
                                                            {{ __('admin.off') }}</span>
                                                    @endif
                                                </p>
                                            @endif
                                            @if ($centerPrice > 0)
                                                <p>{{__('label.center_price')}} : {{ __('admin.sar') }}
                                                    {{ round($centerPrice - ($centerPrice * $discount) / 100) }}
                                                    @if ($discount > 0)
                                                        <strike>{{ __('admin.sar') }}
                                                            {{ $centerPrice }}</strike>
                                                        <span class="badge badge-secondary">{{ $discount }}%
                                                            {{ __('admin.off') }}</span>
                                                    @endif
                                                </p>
                                            @endif
                                            {{-- @if (isset($service->serviceTypes))
                                                @foreach ($service->serviceTypes as $serviceType)
                                                    <p> {{ $serviceType->service_en }} : {{ __('admin.sar') }}
                                                        {{ $serviceType->pivot->price }} <strike>{{ __('admin.sar') }}
                                                            300</strike> <span class="badge badge-secondary">10%
                                                            {{ __('admin.off') }}</span></p>
                                                @endforeach
                                            @endif --}}

                                            <div class="grid-status">
                                                @if ($service->status = App\Helpers\ConstantHelper::ACTIVE)
                                                    <span class="badge bad-status badge-success">
                                                        {{ ucfirst($service->status) }}
                                                    </span>
                                                @else
                                                    <span class="badge bad-status badge-danger">
                                                        {{ ucfirst($service->status) }}
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-3 loa-detail-labelw">
                                    <div class="row">
                                        <div class="col-md-6 col-lg-4">
                                            <div class="form-group">
                                                <label class="mb-0">{{ __('master.category') }}</label>
                                                <p class="mt-0">
                                                    {{ isset($service->category->title_en) ? ucfirst($service->category->title_en) : '' }}
                                                </p>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-lg-4">
                                            <div class="form-group">
                                                <label class="mb-0">{{ __('master.service_type') }}</label>
                                                <p class="mt-0">
                                                    {{ implode(', ', $serviceTypes) }}
                                                </p>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-lg-4">
                                            <div class="form-group">
                                                <label class="mb-0">{{ __('admin.ideal_time') }}</label>
                                                <p class="mt-0">{{ $service->time }}</p>
                                            </div>
                                        </div>

                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="mb-0">{{ __('master.short_description') }}</label>
                                                <p class="mt-0">{{ ucfirst($service->description_en) }}</p>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="mb-0">{{ __('master.about_service') }}</label>
                                                <p class="mt-0">{{ ucfirst($service->about_en) }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card mb-1">
                            <div class="card-header collapsed" data-toggle="collapse" href="#Banners"
                                aria-expanded="false">
                                <a href="#" class="card-title text-black">{{ __('admin.showcase') }}</a>
                            </div>
                            <div id="Banners" class="card-body collapse" data-parent="#accordion" style="">
                                <div class="loa-detail-labelw">
                                    <div class="row">
                                        <div class="col-md-12 mb-3">
                                            <div class="table-responsive">
                                                <table class="table table-striped table-bordered admintable border-0"
                                                    cellspacing="0" cellpadding="0">
                                                    <tbody>
                                                        <tr>
                                                            <th>#</th>
                                                            <th>{{ __('admin.image') }}</th>
                                                        </tr>
                                                        @forelse($images as $key => $gallery)
                                                            <tr>
                                                                <td>{{ $key + 1 }}</td>
                                                                <td>
                                                                    <div id="image-container">
                                                                        <button class="delete-image text-right"
                                                                            data-media-id="{{ $gallery->id }}">x</button>
                                                                        <img class="rounded mr-2"
                                                                            src="{{ $gallery->getURL() }}" height="100px"
                                                                            width="100px" />
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        @empty
                                                        @endforelse
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- <div class="modal fade" id="commission-rate" tabindex="-1" role="dialog" aria-labelledby="loginpopupTitle"
        aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered" role="document">
            <div class="modal-content bg-light modalPad">
                <form class="form" role="post-data" method="POST"
                    action="/api/admin/services/add-commission/{{ $service->id }}"
                    redirect="/admin/services/show/{{ $service->id }}">
                    <div class="modal-header position-relative border-0">
                        <div class="">
                            <button type="button" class="close-btn" data-dismiss="modal" aria-label="Close">
                                <img src="{{ asset('admin-assets/img/close.svg') }}" />
                            </button>
                            <div class="">
                                <h5>Enter Commission Rate</h5>
                                <p class="mb-0"></p>
                            </div>
                        </div>
                    </div>
                    <div class="modal-body pt-0">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Enter commission rate for order placed</label>
                                    <input type="text" name="commission_rate" value="{{ $service->commission_rate }}" placeholder = "Enter The % Value"
                                        class="form-control" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn-md px-3 py-2 btn-primary" role="button"
                            data-request="ajax-submit" data-target="[role=post-data]"><i
                                class="fa fa-check-square-o"></i>
                            Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div> --}}
@endsection
@section('script')
    <script>
        function updateStatus(status) {
            $.ajax({
                url: "{{ url('api/admin/services/update-status') }}",
                type: 'POST',
                cache: true,
                data: {
                    'status': status,
                    'id': '{{ $service->id }}',
                },
                datatype: 'html',
                success: function(response) {
                    Swal.fire(
                        "Success!",
                        response.message,
                        "succes"
                    );

                    setTimeout(function() {
                        location.reload();
                    }, 2200);
                }
            });
        }

        $(document).ready(function() {
            $('.delete-image').click(function() {
                var mediaId = $(this).data('media-id');
                var token = "{{ csrf_token() }}";
                if (confirm('Are you sure you want to delete this image?')) {
                    $.ajax({
                        url: app_url + '/admin/services/delete/' + mediaId,
                        type: 'DELETE',
                        data: {
                            "_token": token,
                        },
                        success: function(response) {
                            Swal.fire(
                                "Success!",
                                "Image Deleted",
                                "success"
                            );
                            location.reload(true);
                        },
                        error: function(xhr, status, error) {
                            console.error(error);
                            alert('An error occurred while deleting the image.');
                        }
                    });
                }
            });
        });

        // function setCommissionModal() {
        //     $('#commission-rate').modal('show');

        // }
    </script>
@endsection