@extends('layouts.app')
@push('css')
@endpush
@section('content')
    @inject('carbon', 'Carbon\Carbon')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <div class="d-inline p-2  text-dark" style="font-size: 26px; font-weight: bold">Certificate Templates
                    </div>
                    <div class="d-inline p-2 text-white">

                        <a href="{{ route('certificate_template.create') }}" class="btn btn-md btn-outline-primary"><i
                                class="fas fa-plus-square"></i> Upload New Template</a>
                    </div>
                </div>
                <!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <div class="d-inline p-2 text-white text-right">
                            <a href="{{ route('home') }}" class="btn btn-sm btn-info"><i class="fas fa-home"></i> Home</a>
                        </div>
                        <div class="d-inline p-2 text-white text-right">
                            <a href="{{ route('home') }}" class="btn btn-sm btn-primary text-right"><i
                                    class="fas fa-arrow-circle-left"></i> Back</a>
                        </div>
                    </ol>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->


    <div class="container">
        <h1>Available Templates</h1>
        <div class="row">
            @foreach ($images as $image)
                <div class="col-md-6 mb-2 ">
                    <div class="card" style="width: 100%;">
                        <center> <img src="{{ asset('public/' . $image->path) }}" class="card-img-top" alt="Image not found"
                                style="width:450px;height:300px;"> </center>
                        <div class="card-body">
                            <h5 class="card-title">{{ $image->title }}</h5>
                            <p class="card-text">Uploaded at: {{ $carbon::parse($image->created_at)->format('d/m/Y') }}</p>
                            <a href="{{ route('certificate_template.edit', $image->id) }}" class="btn btn-primary">Edit</a>


                            {{-- <a href="{{ route('certificate_template.destroy', $image->id) }}" class="btn btn-danger btn-sm"
                                onclick="deleteCategory({{ $image->id }})"><i class="fas fa-trash"></i>
                                Delete</a> --}}




                            <button type="submit" class="btn btn-danger btn-sm m-1"
                                onclick="deleteCategory('{{ $image->id }}')"><i class="fas fa-trash"></i>
                                DELETE</button>
                            <form id="delete-form-{{ $image->id }}"
                                action="{{ route('certificate_template.destroy', $image->id) }}" method="POST"
                                style="display: none;">
                                @csrf
                                @method('DELETE')
                            </form>


                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>







    </div>
@endsection

@push('js')
    <script src="https://code.iconify.design/2/2.0.3/iconify.min.js"></script>
    <script type="text/javascript">
        $('#search').on('keyup', function() {
            let value = $(this).val();
            let id = $('input[name="repo_id"]').val();
            console.log(value, id);
            $.ajax({
                type: 'get',
                url: '{{ route('file.search') }}',
                data: {
                    'search': value,
                    'id': id
                },
                success: function(data) {
                    var data = $(data); // the HTML content that controller has produced
                    $('#view').hide().html(data).fadeIn();
                }
            });
        })
    </script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
@endpush