@section('optional_css')
    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="{{ asset('plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css') }}">

    <!-- summernote -->
    <link rel="stylesheet" href="{{ asset('plugins/summernote/summernote-bs4.min.css') }}">
    <!-- CodeMirror -->
    <link rel="stylesheet" href="{{ asset('plugins/codemirror/codemirror.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/codemirror/theme/monokai.css') }}">
@endsection
@section('optional_js')
    <!-- SweetAlert2 -->
    <script src="{{ asset('plugins/sweetalert2/sweetalert2.min.js') }}"></script>

    <script>
        $(document).ready(function () {
            $('.delete-row').on('click', function() {
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        event.preventDefault();
                        Swal.fire(
                            'Deleted!',
                            'Your file has been deleted.',
                            'success'
                            )
                        this.closest('form').submit();
                    }
                })
            })
        })
    </script>

    <!-- Summernote -->
    <script src="{{ asset('plugins/summernote/summernote-bs4.min.js') }}"></script>
    <!-- CodeMirror -->
    <script src="{{ asset('plugins/codemirror/codemirror.js') }}"></script>
    <script src="{{ asset('plugins/codemirror/mode/css/css.js') }}"></script>
    <script src="{{ asset('plugins/codemirror/mode/xml/xml.js') }}"></script>
    <script src="{{ asset('plugins/codemirror/mode/htmlmixed/htmlmixed.js') }}"></script>

    <script src="{{ asset('plugins/fileinput/fileinput.min.js') }}"></script>
    
    <script>
        $(document).ready(function() {
            $('.summernote').summernote({
                height: 300,
                callbacks: {
                    onImageUpload: function(files, editor, welEditable) {
                        sendFile(files[0], editor, welEditable);
                    }
                }
            });

            function sendFile(file, editor, welEditable) {
                data = new FormData();
                data.append("file", file);
                data.append('_token', "{{ csrf_token() }}");
                $.ajax({
                    data: data,
                    type: "POST",
                    url: "{{ route('admin.summernote.upload') }}",
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(url) {
                        $('.summernote').summernote('editor.insertImage', url);
                    }
                });
            }
        });
    </script>
@endsection

<x-app-layout>
    <x-slot name="header">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">{{ __('Client') }}</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
            </div><!-- /.col -->
        </div><!-- /.row -->
    </x-slot>
    @if(session('success'))
        <x-alert-success>
            {{ session('success') }}
        </x-alert-success>
    @endif
    @if(session('delete'))
        <x-alert-danger>
            {{ session('delete') }}
        </x-alert-danger>
    @endif

    @if(!empty($settings) && count($settings) > 0)
        <form class="form-horizontal" action="{{ route('admin.setting.update') }}" method="POST" enctype="multipart/form-data">
            <x-card class="col-sm-12">
                <x-slot name="title">{{ __('Setting') }}</x-slot>
                @csrf
                @method('PUT')
                @foreach($settings as $setting)
                    <div class="form-group row">
                        <x-label class="col-sm-2">{{ $setting->name }}</x-label>
                        <div class="col-sm-10">
                            @if($setting->type == 'string')
                                <x-input type="text" name="value[{{ $setting->id }}]" :value="$setting->value"/>
                            @endif
                            @if($setting->type == 'integer')
                                <x-input type="number" name="value[{{ $setting->id }}]" :value="$setting->value"/>
                            @endif
                            @if($setting->type == 'text')
                                <textarea class="summernote" name="value[{{ $setting->id }}]">{{ $setting->value }}</textarea>
                            @endif
                            @if($setting->type == 'image')
                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                <div class="fileinput-preview img-thumbnail text-center mb-2" data-trigger="fileinput">
                                    <img src="{{ Storage::url($setting->value) }}">
                                </div>
                                <div>
                                    <span class="btn btn-info btn-file">
                                        <span class="fileinput-new">Select Image</span>
                                        <input type="file" name="value[{{ $setting->id }}]">
                                    </span>
                                    <a href="#" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remove</a>
                                </div>
                                <p style="margin-top: 15px"><em>Upload image if change featured image</em></p>
                            </div>
                            @endif
                        </div>
                    </div>
                @endforeach
                <x-slot name="footer">
                    <x-button>{{ __('Save') }}</x-button>
                </x-slot>
            </x-card>
        </form>
    @endif

    <x-card>
        <x-slot name="title">{{ __('Client') }}</x-slot>
        @can('client.create')
            <x-slot name="tools">
                <x-button-link href="{{ route('admin.client.create') }}">{{ __('Create') }} {{ __('Client') }}</x-button>
            </x-slot>
        @endcan
        <div class="col-12 table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>{{ __('Title') }}</th>
                        <th>{{ __('Image') }}</th>
                        <th>{{ __('Link') }}</th>
                        <th>{{ __('Status') }}</th>
                        <th>{{ __('Action') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($clients as $client)
                        <tr>
                            <td>{{ $client->title }}</td>
                            <td><img src="{{ Storage::url($client->image) }}" height="100"></td>
                            <td>{{ $client->link }}</td>
                            <td>{{ $client->publish?'Publish':'Draft' }}</td>
                            <td>
                                @can('client.edit')
                                    <x-button-link class="btn-warning float-left mr-2" href="{{ route('admin.client.edit', $client->id) }}">{{ __('Edit') }}</x-button-link>
                                @endcan
                                @can('client.destroy')
                                    <form method="POST" action="{{ route('admin.client.destroy', $client->id) }}">
                                        @csrf
                                        @method('delete')
                                        <x-button-link class="btn-danger delete-row">
                                            {{ __('Delete') }}
                                        </x-button-link>
                                    </form>
                                @endcan
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center">{{ __('Empty') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        {{ $clients->links('vendor.pagination.bootstrap-4') }}
    </x-card>
</x-app-layout>