@extends('layouts.app')

@isset($theme)
    @section('pagetitle', __('Edit Theme'))
@else
    @section('pagetitle', __('Add Theme'))
@endisset
@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"><a href="{{route('admin.theme.index')}}">Themes</a></li>
        <li class="breadcrumb-item active">@yield('pagetitle')</li>
    </ol>
@endsection

@section('content')

    <section class="content">
        <div class="container-fluid">
            <section class="content">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">{{isset($theme) ? $theme->name : __("New theme") }}</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                @isset($theme)
                                    <form action="{{route('admin.theme.update', $theme)}}" method="post">
                                        @method('PATCH')
                                        @else
                                            <form action="{{route('admin.theme.store')}}" method="post">
                                                @endisset
                                                @csrf
                                                <div class="form-group">
                                                    <label for="name">{{__('Name')}}</label>
                                                    <input type="text" @isset($theme) value="{{$theme->name}}" @endisset class="form-control" name="name">
                                                    @error('name')
                                                    <div class="alert alert-danger">{{ $message }}</div>
                                                    @enderror
                                                </div>

                                                <label for="themeColor">{{__('Main color')}}</label>
                                                <div class="input-group colorpicker-element" data-colorpicker-id="2">
                                                    <input type="text" @isset($theme) value="{{$theme->themeColor}}" @endisset class="form-control" name="themeColor">

                                                    <div class="input-group-append">
                                                        <span class="input-group-text"><i @isset($theme) style="color: {{$theme->themeColor}};" @endisset class="fas fa-square"></i></span>
                                                    </div>
                                                    @error('themeColor')
                                                    <div class="alert alert-danger">{{ $message }}</div>
                                                    @enderror
                                                </div>

                                                <label for="themeTextColor">{{__('Menu Text color')}}</label>
                                                <div class="input-group colorpicker-element" data-colorpicker-id="2">
                                                    <input type="text" @isset($theme) value="{{$theme->themeTextColor}}" @endisset class="form-control" name="themeTextColor">

                                                    <div class="input-group-append">
                                                        <span class="input-group-text"><i @isset($theme) style="color: {{$theme->themeTextColor}};" @endisset class="fas fa-square"></i></span>
                                                    </div>
                                                    @error('themeTextColor')
                                                    <div class="alert alert-danger">{{ $message }}</div>
                                                    @enderror
                                                </div>


                                                <label for="themeTextActiveColor">{{__('Menu Active Text color')}}</label>
                                                <div class="input-group colorpicker-element" data-colorpicker-id="3">
                                                    <input type="text" @isset($theme) value="{{$theme->themeTextActiveColor}}" @endisset class="form-control" name="themeTextActiveColor">

                                                    <div class="input-group-append">
                                                        <span class="input-group-text"><i @isset($theme) style="color: {{$theme->themeTextActiveColor}};" @endisset class="fas fa-square"></i></span>
                                                    </div>
                                                    @error('themeTextActiveColor')
                                                    <div class="alert alert-danger">{{ $message }}</div>
                                                    @enderror
                                                </div>

                                                <label for="themeTextActiveBackColor">{{__('Menu Active Background color')}}</label>
                                                <div class="input-group colorpicker-element" data-colorpicker-id="3">
                                                    <input type="text" @isset($theme) value="{{$theme->themeTextActiveBackColor}}" @endisset class="form-control" name="themeTextActiveBackColor">

                                                    <div class="input-group-append">
                                                        <span class="input-group-text"><i @isset($theme) style="color: {{$theme->themeTextActiveBackColor}};" @endisset class="fas fa-square"></i></span>
                                                    </div>
                                                    @error('themeTextActiveBackColor')
                                                    <div class="alert alert-danger">{{ $message }}</div>
                                                    @enderror
                                                </div>
<br/>
                                                <button type="submit" class="btn btn-primary">{{__('Save')}}</button>
                                            </form>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </section>
        </div><!-- /.container-fluid -->
    </section>
@endsection

@section('page_js')
    <script>
        $('.colorpicker-element').colorpicker();
        $('.colorpicker-element').on('colorpickerChange', function(event) {
            $(this).find('.fa-square').css('color', event.color.toString());
        });
    </script>
    @endsection