@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">
                    @isset($notice_file)
                        <h1 class="m-0 text-dark">Update Template</h1>
                    @else
                        <h1 class="m-0 text-dark">Upload Template</h1>
                    @endisset
                </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('notice.index') }}" 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 -->

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <!-- Main row -->
            <div class="row">
                <div class="col-md-12 col-x-12 col-sm-12">
                    <form action="{{ route('certificate_template.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div id="main-container">
                            <div class="container-item">
                                <div class="card-body">
                                    <!-- Form -->
                                    <div class="row">

                                        <div class="col-md-12 col-xl-12 col-sm-12">
                                            <div class="form-group">
                                                <label for="title">Template Title</label>
                                                <input name="title" id="title" type="text" placeholder="title"
                                                    class="form-control @error('title') is-invalid @enderror" required />
                                                @error('title')
                                                    <span class="invalid-repository" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>




                                        <div class="row">
                                            <div class="col-md-6 col-xl-6 col-sm-6">
                                                <div class="form-group">
                                                    <input type='file' name='image' id='file'
                                                        class="form-control @error('file') is-invalid @enderror" required
                                                        placeholder="ding" accept="image/*"><br>
                                                    @error('file')
                                                        <span class="invalid-repository" role="alert">
                                                            <strong>{{ $message }}</strong>
                                                        </span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-3 col-xl-4 col-sm-12 form-group">
                                                <div>
                                                    {{-- <a href="javascript:void(0)"
                                                    class="remove-item btn btn-sm btn-danger remove-social-media">Remove</a> --}}
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>


                                <input type="submit" class="btn btn-primary" value="Save" />

                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- /.row (main row) -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
    @endsection @push('js')
    <script>
        $(".delete_file").on('click', function() {
            var id = $(this).data("id");
            var token = $("meta[name='csrf-token']").attr("content");

            $.ajax({
                url: "/filedelete/" + id,
                type: 'DELETE',
                data: {
                    "id": id,
                    "_token": token,
                },
                success: function() {
                    var classname = "div_" + id;
                    $('.' + classname).hide();
                    console.log(classname);
                }
            });

        });
    </script>

    <script type="text/javascript">
        function delete_file(id) {
            $.ajax({
                type: 'post',
                url: "/filedelete/" + id,
                success: console.log('yes')
            });
        };
    </script>

    <script src="{{ asset('js/cloneData.js') }}" type="text/javascript"></script>
    <script>
        $("a#add-more").cloneData({
            mainContainerId: "main-container", // Main container Should be ID
            cloneContainer: "container-item", // Which you want to clone
            removeButtonClass: "remove-item", // Remove button for remove cloned HTML
            removeConfirm: true, // default true confirm before delete clone item
            removeConfirmMessage: "Are you sure want to delete?", // confirm delete message
            //append: '<a href="javascript:void(0)" class="remove-item btn btn-sm btn-danger remove-social-media">Remove</a>', // Set extra HTML append to clone HTML
            minLimit: 1, // Default 1 set minimum clone HTML required
            maxLimit: 50, // Default unlimited or set maximum limit of clone HTML
            defaultRender: 1,
            init: function() {
                console.info(":: Initialize Plugin ::");
            },
            beforeRender: function() {
                console.info(":: Before rendered callback called");
            },
            afterRender: function() {
                console.info(":: After rendered callback called");
                //$(".selectpicker").selectpicker('refresh');
            },
            afterRemove: function() {
                console.warn(":: After remove callback called");
            },
            beforeRemove: function() {
                console.warn(":: Before remove callback called");
            },
        });
    </script>

    <script>
        $('button[name="change-file"]').on('click', function() {
            let res = "<input type='file' name='file[]' id='file'>";
            $('div[id="input-file"]').html(res);
        });



        window.onload = function() {
            $(function() {
                $("#exp").datepicker({
                    dateFormat: "dd/mm/yy"
                });
            });
        };
    </script>
@endpush