@extends('layouts.app')

@section('pagetitle', 'Themes')

@section('breadcrumbs')
    <ol class="breadcrumb float-sm-right">
        <li class="breadcrumb-item"><a href="{{route('dashboard')}}">Dashboard</a></li>
        <li class="breadcrumb-item active">Admin</li>
        <li class="breadcrumb-item active">@yield('pagetitle')</li>
    </ol>
@endsection

@section('content')
    <section class="content">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">{{__("Here you can find all themes within ") . config('app.name')}}</h3>
                        <a class="float-right btn-sm btn btn-primary" href="{{route('admin.theme.create')}}"><i
                                class="fa fa-plus"></i> {{__('Add')}}</a>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <table class="datatable-init table table-striped">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>{{__('Name')}}</th>
                                <th data-sortOrder="none"></th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($themes as $theme)
                                <tr>
                                    <td>{{$theme->id}}</td>
                                    <td>{{$theme->name}}</td>
                                    <td>
                                        <a href="{{route('admin.theme.edit', $theme)}}"
                                           class="btn btn-primary"><i
                                                class="fa fa-pencil-alt"></i> {{__('Edit')}}
                                        </a>
                                        <a href="#" data-id="{{$theme->id}}"
                                           class="themeDelBtn btn btn-danger"
                                           data-toggle="modal" data-target="#modal-delete-theme"><i
                                                class="fa fa-times"></i> {{__('Delete')}}
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <div class="modal fade" id="modal-delete-theme" aria-modal="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content bg-danger">
                <form id="themeDelForm" action="{{route('admin.theme.destroy', ['theme' => "<ID>"])}}" method="POST">
                    @csrf
                    @method('delete')
                    <div class="modal-header">
                        <h4 class="modal-title">{{__('Delete theme')}}</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>{{ __("Are you sure?") }} {{ __("This can not be undone!") }}</p>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-outline-light"
                                data-dismiss="modal">{{__('Cancel')}}</button>
                        <button type="submit" class="btn btn-outline-light">{{__('Delete')}}</button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
@endsection

@section('page_js')

    <script>
        $(document).ready(function () {
            $('.themeDelBtn').click(function () {
                var themeid = $(this).attr('data-id');
                var baseDelUrl = "{{route('admin.theme.destroy', ['theme' => "<ID>"])}}"
                var delUrl = baseDelUrl.replace("%3CID%3E", themeid)
                $('#themeDelForm').attr("action", delUrl)
            })
            $('.datatable-init').DataTable(
                {
                    responsive: true,
                    language: {
                        url: '{{asset('/js/datatables_lang/' . app()->getLocale() . '.json')}}'
                    },
                    'columnDefs': [
                        {
                            'targets': [0], /* column index */
                            responsivePriority: 2,
                        },
                        {
                            'targets': [1], /* column index */
                            responsivePriority: 1,
                        },
                        {
                            'targets': [2], /* column index */
                            'orderable': false, /* true or false */
                            responsivePriority: 1,
                        }]

                }
            );

        });
    </script>
@endsection