@extends('backend.layout.masterlayout')
@section('content')
    @include('backend.partial.sidebar')
    @include('backend.partial.topbar')
    <!--page-wrapper-->
    <div class="page-wrapper">
        <!--page-content-wrapper-->
        <div class="page-content-wrapper">
            <div class="page-content">
                <div class="user-profile-page">
                    <div class="card radius-15">
                        @if ($current_loggedin_user->role != 0)
                            @include('backend.themes.permission-index')
                        @else
                            <div class="card-body">
                                <ul class="nav nav-pills">

                                    <li class="nav-item">
                                        <a class="nav-link active" data-bs-toggle="tab" href="#kanpaithemes">
                                            <span class="p-tab-name"><i class="bx bx-store"></i>
                                                Theme Store</span>
                                            <i class="bx bx-store font-24 d-sm-none"></i>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="createdthemes-tab" data-bs-toggle="tab"
                                            href="#installedthemes">
                                            <span class="p-tab-name"><i class="bx bx-cloud-download"></i>
                                                Installed Themes</span>
                                            <i class="bx bxs-cloud-download font-24 d-sm-none"></i>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="createdthemes-tab" data-bs-toggle="tab"
                                            href="#createdthemes">
                                            <span class="p-tab-name"><i class="bx bx-brush"></i>
                                                Custom Themes</span>
                                            <i class="bx bxs-brush font-24 d-sm-none"></i>
                                        </a>
                                    </li>
                                </ul>
                                <div class="tab-content mt-3">
                                    <div class="tab-pane fade show active" id="kanpaithemes">
                                        <div class="card shadow-none border mb-0 radius-15">
                                            <div class="card-body">
                                                <div class="row pt-3 text-center">
                                                    @isset($jsonData)
                                                    @if (count($jsonData) > 0)
                                                        @php
                                                            $get_noninstallcount = 0;
                                                        @endphp
                                                        @foreach ($jsonData as $key => $availabletheme)
                                                            @php
                                                                $theme_info = \App\Models\Theme::where(
                                                                    'installed_id',
                                                                    $availabletheme['id'],
                                                                )
                                                                    ->where('slug', $availabletheme['slug'])
                                                                    ->where('via', 'kanpai-api')
                                                                    ->count();
                                                            @endphp

                                                            @if ($theme_info == 0)
                                                                @php
                                                                    $get_noninstallcount++;
                                                                @endphp
                                                                <div class="col-md-4">
                                                                    <div class="card">
                                                                        <div class="card-body"
                                                                            style="border: solid 1px #e4e4e4;border-radius: 10px;">
                                                                            <img src="https://kanpaithemes.com/public/uploads/themes/thumbnail/{{ $availabletheme['thumbnail'] }}"
                                                                                alt="{{ $availabletheme['title'] }}"
                                                                                style="width:100%;" />
                                                                            <h5 class="card-title pt-3"
                                                                                style="text-transform:capitalize;">
                                                                                {{ $availabletheme['title'] }}
                                                                            </h5>
                                                                            <hr />
                                                                            <a class="btn btn-outline-primary btn-sm m-1 px-4"
                                                                                id="installKanpaiTheme"
                                                                                data-bs-toggle="modal"
                                                                                data-bs-target="#popup-installtheme"
                                                                                data-url="{{ route('popup-install-theme', $availabletheme['id']) }}"
                                                                                data-bs-placement="top" title=""
                                                                                data-bs-original-title="Install {{ $availabletheme['title'] }} Theme"><i
                                                                                    class="bx bx-cloud-download"></i>
                                                                                Install</a>
                                                                            <a href="#"
                                                                                class="btn btn-outline-dark btn-sm m-1 px-4"><i
                                                                                    class="bx bx-info-circle"></i>
                                                                                Preview</a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endif
                                                        @endforeach
                                                        @if($get_noninstallcount<1)      
                                                        <i class="bx bx-sad" style="font-size:5rem;color: #a2a3a5;"></i>
                                                        <h3 style="color: #a2a3a5;">Nothing found</h3>
                                                        @endif                                                          
                                                    @else
                                                        <i class="bx bx-sad" style="font-size:5rem;color: #a2a3a5;"></i>
                                                        <h3 style="color: #a2a3a5;">Nothing found</h3>
                                                    @endif
                                                    @else
                                                        <i class="bx bx-sad" style="font-size:5rem;color: #a2a3a5;"></i>
                                                        <h3 style="color: #a2a3a5;">Nothing found</h3>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="installedthemes">
                                        <div class="card shadow-none border mb-0 radius-15">
                                            <div class="card-body">
                                                <div class="row pt-3 text-center">
                                                    @if (count($installed_themes) > 0)
                                                        @foreach ($installed_themes as $key => $availabletheme)
                                                            <div class="col-md-4">
                                                                <div class="card">
                                                                    <div class="card-body"
                                                                        style="border: solid 1px #e4e4e4;border-radius: 10px;">
                                                                        <h5 class="card-title"
                                                                            style="text-transform:capitalize;">
                                                                                                                                                        {{ $availabletheme->title }}

                                                                            <div class="form-check form-switch"
                                                                                style="float: right;">
                                                                                <input class="form-check-input"
                                                                                    type="checkbox"
                                                                                    onChange="update_primarytheme_status(this)"
                                                                                    value="{{ $availabletheme->id }}"
                                                                                    data-bs-toggle="tooltip"
                                                                                    data-bs-placement="top"
                                                                                    title="Set As Primary"
                                                                                    >
                                                                            </div>
                                                                        </h5>
                                                                        <img class="pt-3"
                                                                            src="{{ $availabletheme->banner }}"
                                                                            alt="{{ $availabletheme->title }}"
                                                                            style="width:100%;" />
                                                                        <hr />
                                                                        {{-- <p class="card-text">{{ $availabletheme->theme_desc }}.
                                                                    </p> --}}
                                                                        @php
                                                                            $path = public_path(
                                                                                'frontend/' .
                                                                                    $availabletheme->slug .
                                                                                    '/',
                                                                            );
                                                                            $assets_type = \App\Models\Asset::where(
                                                                                'theme_id',
                                                                                $availabletheme->id,
                                                                            )->get();
                                                                        @endphp
                                                                        @if (!file_exists($path))
                                                                            <a href="{{ route('create-theme-step-2', $availabletheme->slug) }}"
                                                                                class="btn btn-outline-primary btn-sm m-1 px-5 radius-30">Upload
                                                                                Your
                                                                                Assets</a>
                                                                        @else
                                                                            @if (count($assets_type) > 0)
                                                                                <a href="{{ route('widgets', $availabletheme->id) }}"
                                                                                    class="btn btn-outline-primary btn-sm m-1 px-5 radius-30">Manage
                                                                                    Widgets</a>
                                                                                <a href="{{ route('create-theme-step-3', $availabletheme->slug) }}"
                                                                                    class="btn btn-outline-secondary btn-sm m-1 px-5 radius-30">Manage
                                                                                    Assets</a>
                                                                            @else
                                                                                <a href="{{ route('create-theme-step-3', $availabletheme->slug) }}"
                                                                                    class="btn btn-outline-primary btn-sm m-1 px-5 radius-30">Load
                                                                                    Your
                                                                                    Asset</a>
                                                                            @endif
                                                                        @endif
                                                                        <a href="{{ route('forcedelete-theme', $availabletheme->id) }}"
                                                                            class="btn btn-outline-danger btn-sm m-1 px-5 radius-30"
                                                                            onclick="return confirm('Are you sure you want to uninstall?');">
                                                                            <i class="bx bx-trash"></i> Uninstall</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    @else
                                                        <i class="bx bx-sad" style="font-size:5rem;color: #a2a3a5;"></i>
                                                        <h3 style="color: #a2a3a5;">Nothing found</h3>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="createdthemes">
                                        <div class="card shadow-none border mb-0 radius-15">
                                            <div class="card-body">
                                                <div class="row text-center pt-2">
                                                    <div class="col-xl-4 mx-auto">
                                                        <div class="card radius-15">
                                                            <a href="{{ route('create-theme') }}"
                                                                class="btn btn-primary radius-10"><i
                                                                    class='bx bx-layer-plus'></i> Configure Your HTML
                                                                Theme</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row pt-3 text-center">
                                                    @if (count($available_themes) > 0)
                                                        @foreach ($available_themes as $key => $availabletheme)
                                                            <div class="col-md-4">
                                                                <div class="card">
                                                                    <div class="card-body">
                                                                        <h5 class="card-title"
                                                                            style="text-transform:capitalize; font-size:1.15rem;">
                                                                                                                                                        {{ $availabletheme->title }}

                                                                            <div class="form-check form-switch"
                                                                                style="float: right;">
                                                                                <input class="form-check-input"
                                                                                    type="checkbox"
                                                                                    onChange="update_primarytheme_status(this)"
                                                                                    value="{{ $availabletheme->id }}"
                                                                                    data-bs-toggle="tooltip"
                                                                                    data-bs-placement="top"
                                                                                    title="Set As Primary"
                                                                                    >
                                                                            </div>
                                                                        </h5>

                                                                        <hr />
                                                                        <p class="card-text">
                                                                            {{ $availabletheme->theme_desc }}.
                                                                        </p>
                                                                        @php
                                                                            $path = public_path(
                                                                                'frontend/' .
                                                                                    $availabletheme->slug .
                                                                                    '/',
                                                                            );
                                                                            $assets_type = \App\Models\Asset::where(
                                                                                'theme_id',
                                                                                $availabletheme->id,
                                                                            )->get();
                                                                        @endphp
                                                                        @if (!file_exists($path))
                                                                            <a href="{{ route('create-theme-step-2', $availabletheme->slug) }}"
                                                                                class="btn btn-outline-primary btn-sm m-1 px-5 radius-30">Upload
                                                                                Your
                                                                                Assets</a>
                                                                        @else
                                                                            @if (count($assets_type) > 0)
                                                                                <a href="{{ route('widgets', $availabletheme->id) }}"
                                                                                    class="btn btn-outline-primary btn-sm m-1 px-5 radius-30">Manage
                                                                                    Widgets</a>
                                                                                <a href="{{ route('create-theme-step-3', $availabletheme->slug) }}"
                                                                                    class="btn btn-outline-secondary btn-sm m-1 px-5 radius-30">Manage
                                                                                    Assets</a>
                                                                            @else
                                                                                <a href="{{ route('create-theme-step-3', $availabletheme->slug) }}"
                                                                                    class="btn btn-outline-primary btn-sm m-1 px-5 radius-30">Load
                                                                                    Your
                                                                                    Asset</a>
                                                                            @endif
                                                                        @endif
                                                                        <br />
                                                                        <div class="pt-2">
                                                                            <a class="btn btn-outline-dark m-1 btn-sm"
                                                                                data-bs-toggle="modal"
                                                                                data-bs-target="#renameTemplate{{ $availabletheme->id }}"
                                                                                data-bs-placement="top" title=""
                                                                                data-bs-original-title="Rename"><i
                                                                                    class="bx bx-edit-alt"></i></a>
                                                                            <a href="{{ route('forcedelete-theme', $availabletheme->id) }}"
                                                                                class="btn btn-outline-danger m-1 btn-sm"
                                                                                data-bs-toggle="tooltip"
                                                                                data-bs-placement="top" title=""
                                                                                data-bs-original-title="Force Delete"
                                                                                onclick="return confirm('Are you sure you want to delete?');"><i
                                                                                    class="bx bx-trash"></i></a>
                                                                        </div>
                                                                        @include('backend.dynamic-modals.rename-themes')
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    @else
                                                        <i class="bx bx-sad" style="font-size:5rem;color: #a2a3a5;"></i>
                                                        <h3 style="color: #a2a3a5;">You haven't created any themes yet</h3>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <!--end page-content-wrapper-->
        @include('backend.dynamic-modals.installKtheme')
    </div>
    <!--end page-wrapper-->
    <!--start overlay-->
    <div class="overlay toggle-btn-mobile"></div>
    <!--end overlay-->
    <!--Start Back To Top Button-->
    <a href="javaScript:;" class="back-to-top"><i class='bx bxs-up-arrow-alt'></i></a> @include('backend.partial.dashboard_footer')
@endsection

@section('script')
    <script>
        function update_primarytheme_status(elv1) {
            if (elv1.checked) {
                var status = 1;
            } else {
                var status = 0;
            }
            $.post('{{ route('set-primary-theme') }}', {
                _token: '{{ csrf_token() }}',
                id: elv1.value,
                status: status
            }, function(data) {
                if (data == 1) {
                    update_success_noti();
                    setTimeout(function() {
                        window.location.reload();
                    }, 1000);
                } else {
                    update_error_noti();
                }
            });
        }
    </script>
    <script>
        $(document).ready(function() {
            $(document).on('click', '#installKanpaiTheme', function(e) {

                e.preventDefault();

                var url = $(this).data('url');

                $('#dynamic-theme-content').html(''); // leave it blank before ajax call
                $('#modal-theme-loader').show(); // load ajax loader

                $.ajax({
                        url: url,
                        type: 'GET',
                        dataType: 'html'
                    })
                    .done(function(data) {
                        console.log(data);
                        $('#dynamic-theme-content').html('');
                        $('#dynamic-theme-content').html(data); // load response
                        $('#modal-theme-loader').hide(); // hide ajax loader
                    })
                    .fail(function() {
                        $('#dynamic-theme-content').html(
                            '<i class="bx bx-info-circle"></i> Something went wrong, Please try again...'
                        );
                        $('#modal-theme-loader').hide();
                    });

            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $(document).on('click', '#goForInstallTheme', function(e) {

                e.preventDefault();

                var getthemeid = document.getElementById("getthemeid").value;
                var userid = document.getElementById("userid").value;
                var theme_title = document.getElementById("theme_title").value;
                var domain_url = document.getElementById("domain_url").value;

                $('#modaltitle').html('');
                $('#dynamic-content').html(''); // leave it blank before ajax call
                $('#modal-loader').show(); // load ajax loader

                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "{{ route('install-kanpai-theme') }}",
                    data: {
                        _token: '{{ csrf_token() }}',
                        getthemeid: getthemeid,
                        userid: userid,
                        theme_title: theme_title,
                        domain_url: domain_url
                    },
                    success: function(response) {
                        if (response == 1) {
                            $('#dynamic-content').html(
                                '<center><img src="{{ asset('uploads/general-setting/completed.png') }}" width="50%;"> <h5 class="modal-title pt-3" style="font-size:1rem;text-align: justify;line-height: 2;"><b>Installation Complete:</b> The installation process is now finished. To use this theme, please <b>GO TO</b> the <b>Installed Themes</b> section and enable <b>Set As Primary</b>. Thank you!</h5></center>'
                            );
                            $('#modal-loader').hide(); // hide ajax loader
                            setTimeout(function() {
                                window.location.reload();
                            }, 1000);
                        } else {
                            $('#dynamic-content').html(
                                '<i class="bx bx-info-circle"></i> Something went wrong, Please try again...'
                            );
                            $('#modal-loader').hide();
                        }
                    }
                });
            });

        });
    </script>
@endsection