@extends('admin.layout')
@section('content')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="page-title">{{ translate('Services') }}</h3>

            </div>

        </div>
    </div>
    <!-- Main content -->
    <section class="content">
        <div class="box">
            <div class="box-header box-header-custem">
                <div class="app-menu">
                    <div class="search-bx mx-5">
                        <div class="input-group full-width">
                            <input type="search" id="search" class="form-control search-table" name="search" value=""
                                placeholder="{{ translate('Search for service') }}" aria-label="Search"
                                aria-describedby="button-addon2">
                        </div>
                    </div>
                </div>

            </div>
            <div class="box-body">
                <div class="normal-data">
                    <div class="row">
                        @foreach ($availableServices['services'] as $service)
                            <div class="col-md-4 col-12 col-xl-4">
                                <div class="box box-link-pop text-center module-page">
                                    <h5>{{ $service['title_' . returnUseManagerLang()] }}</h5>
                                    <div class="bg-img"
                                        style="background-image: url('{{ getExternalRouts()['mangerRout'] }}{{ $service['image'] }}');">
                                        <div class="shopen-card-module">
                                            <a href="#" style="background-color: #fb763d"
                                                class="btn btn-rounded btn-dark padding-label-dashbord  template-buttons"
                                                onclick="addToCart({{ $service['id'] }},'service')">{{ translate('Buy now') }}</a>
                                            <p class="clear" style="margin-top: 20px;">
                                                <a href="{{ route('Addon.singleService', encrypt($service['id'])) }}"
                                                    class="btn btn-rounded btn-dark padding-label-dashbord  template-buttons">
                                                    {{ translate('More details') }}</a>

                                            </p>
                                        </div>
                                    </div>
                                    <div class="row footer-buttons">
                                        <div class="col-md-4 col-4 col-xl-4" style="text-align: initial">
                                            <span>{{ $service['price'] }} $</span>
                                        </div>
                                        <div class="col-md-8 col-8 col-xl-8" style="text-align: end">
                                            <span>
                                                {{ translate('Implementation period') }} :
                                                {{ $service['duration'] }}
                                                {{ translate($service['duration_type']) }}</span>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="search-data">

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

    </section>
@endsection
@section('script')
    <script>
        $('.search-data').hide();
        $('#search').keyup(function() {
            if ($(this).val().length >= 4) {
                var searchKey = $(this).val()
                $('.normal-data').hide();
                $('.search-data').show();
                $.post(`{{ route('Addon.searchForServices') }}`, {
                    _token: '{{ csrf_token() }}',
                    searchKey: searchKey
                }, function(data) {
                    $('.search-data').html(data);
                });

            } else {
                $('.search-data').hide();
                $('.normal-data').show();
            }

        });
    </script>
@endsection