@extends('admin.layout')
@section('content')
    <!-- Content Header (Page header) -->

    @php
    $rtl = App\Language::where('code', App::getLocale())->first()->rtl;
    @endphp

    <div class="content-header">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="page-title"> {{ translate('Modules') }}</h3>
                <div class="d-inline-block align-items-center">
                    <nav>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{ route('dashboard') }}">
                                    <i class="fa fa-home"></i>
                                </a>
                            </li>

                            <li class="breadcrumb-item" aria-current="page">
                                <a href="{{ route('Addon.AddHook') }}">
                                    {{ translate('Apps and Services') }}
                                </a>
                            </li>


                            <li class="breadcrumb-item" aria-current="page">

                                {{ translate('Modules') }}

                            </li>


                        </ol>
                    </nav>
                </div>
            </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 module') }}" aria-label="Search"
                                aria-describedby="button-addon2">
                        </div>
                    </div>
                </div>

            </div>
            <div class="box-body">
                <div class="normal-data">
                    <div class="row">
                        @foreach ($availableModules['modules'] as $module)
                            <div class="col-md-4 col-12 col-xl-4">
                                <div class="box box-link-pop text-center module-page">
                                    <h5> {{ $rtl == true ? $module['title_ar'] : $module['title_en'] }}</h5>
                                    <div class="bg-img"
                                        style="background-image: url('{{ getExternalRouts()['mangerRout'] }}{{ $module['image'] }}');">
                                        <div class="shopen-card-module">
                                            @if (Session::get('tenant_subscribtion_data')[$module['type']]['belongs_to_subscribtion'] == true)
                                                <div style="background-color: #fb763d"
                                                    class="btn btn-rounded btn-dark padding-label-dashbord  template-buttons">
                                                    {{ translate('Purchased') }}</div>
                                            @else
                                                <a href="#" style="background-color: #fb763d"
                                                    class="btn btn-rounded btn-dark padding-label-dashbord  template-buttons"
                                                    onclick="addToCart({{ $module['id'] }},'module')">{{ translate('Add to cart') }}</a>
                                            @endif
                                            <p class="clear" style="margin-top: 20px;">
                                                <a href="{{ route('Addon.singleModules', encrypt($module['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-6 col-6 col-xl-6" style="text-align: initial">
                                            <span> {{ translate('price') }} :
                                                {{ $module['price'] * Session::get('managerCurencies')[$currentTenant->fav_manager_currency]['exchange_rate'] }}
                                                {{ managerRtl() == true ? Session::get('managerCurencies')[$currentTenant->fav_manager_currency]['symbol_ar'] : Session::get('managerCurencies')[$currentTenant->fav_manager_currency]['symbol_en'] }}</span>
                                        </div>
                                        <div class="col-md-6 col-6 col-xl-6" style="text-align: end">
                                            @if ($module['from_subscribtion'] != null)
                                                <span>{{ translate('Free from') }}</span> <a
                                                    href="{{ route('subscribions') }}"><span style="color: #fb763d">
                                                        {{ $rtl == true ? $module['from_subscribtion']['title_ar'] : $module['from_subscribtion']['title_en'] }}
                                                        <img src="{{ getExternalRouts()['mangerRout'] }}/{{ $module['from_subscribtion']['icon'] }} "
                                                            style="max-width: 30px;" />
                                                    </span></a>

                                            @endif
                                        </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.searchForModules') }}`, {
                    _token: '{{ csrf_token() }}',
                    searchKey: searchKey
                }, function(data) {
                    $('.search-data').html(data);
                });

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

        });
    </script>
@endsection