@extends('layouts.index')
@section('title')
Form Templates
@endsection
@section('css')
    <link href="{{ asset('back') }}/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.min.css" integrity="sha512-EZSUkJWTjzDlspOoPSpUFR0o0Xy7jdzW//6qhUkoZ9c4StFkVsp9fbbd0O06p9ELS3H486m4wmrCELjza4JEog==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        .dropify-message p{
            text-align: center;
        }
    </style>
@endsection
@section('content')
    <div class="page-titles">
        <div class="row">
            <div class="col-lg-8 col-md-6 col-12 align-self-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 d-flex align-items-center">
                        <li class="breadcrumb-item">
                            <a href="{{url('/')}}" class="link"><i class="ri-home-3-line fs-5"></i></a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{url('forms')}}" class="link">Forms</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            Templates
                        </li>
                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Templates</h1>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <!-- ============================================================= -->
    <!-- Container fluid  -->
    <!-- ============================================================= -->
    <div class="container-fluid">
        <!-- ============================================================= -->
        <!-- Start Page Content -->
        <!-- ============================================================= -->
        <div class="row">
            <!-- Column -->
            <div class="col-lg-12 col-xl-12 col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex no-block align-items-center mb-4">
                            <h4>Template List</h4>
                            <div class="ms-auto">
                                <div class="btn-group">
                                    <a href="javascript:void(0)"
                                        class="
                                            btn btn-primary
                                            font-weight-medium
                                            rounded-pill
                                            px-4
                                            " data-bs-toggle="modal" data-bs-target="#createModal">
                                        <i class="fa fa-plus"></i> Add Template
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            @forelse ($list as $item)
                                <div class="col-lg-3 col-md-6">
                                    <a href="{{route('forms.templates.detail', $item->id)}}">
                                        <div class="card border-bottom border-primary">
                                            <div class="card-body">
                                            <div class="d-flex align-items-center">
                                                <div>
                                                <h4>{{$item->nama}}</h4>
                                                {{-- <h6 class="text-primary mb-0">News Feed</h6> --}}
                                                </div>
                                                <div class="ms-auto">
                                                <span class="text-primary display-6"
                                                    ><i data-feather="file-text" class="feather-xl"></i
                                                ></span>
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @empty 
                                <div class="text-center">
                                    <h3 class="text-muted">No data yet</h3>
                                </div>
                            @endforelse
                          </div>
                    </div>
                </div>
            </div>
            <!-- Column -->
        </div>
        <div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header d-flex align-items-center">
                        <h5 class="modal-title" id="createModalLabel">
                            <i class="ti-marker-alt me-2"></i> Add new Template
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="tambah" enctype="multipart/form-data">
                            <div class="form-group mb-3">
                                <label for="">Name <sup class="text-danger" title="Required">*</sup></label>
                                <input type="text" class="form-control" name="nama" id="nama" placeholder="Enter template name">
                                <small class="text-danger" id="nama_validation"></small>
                            </div>
                            <div class="form-group mb-3">
                                <label for="">Template File <sup class="text-danger" title="Required">*</sup></label>
                                <input type="file" class="dropify" data-allowed-file-extensions="doc docx" name="template" id="template">
                                <small class="text-danger" id="template_validation"></small>
                            </div>
                            <div class="form-group mb-3">
                                <label for="">Requested By Lock <sup class="text-danger">*</sup></label>
                                <select name="is_requested_by_lock" class="form-select" id="">
                                    <option value="1">Yes</option>
                                    <option value="0">No</option>
                                </select>
                                <small class="text-danger" id="is_requested_by_lock_validation"></small>
                            </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button"
                            class="
                        btn btn-light-danger
                        text-danger
                        font-weight-medium
                        rounded-pill
                        px-4
                    "
                            data-bs-dismiss="modal">
                            Close
                        </button>
                        <button type="submit" class="btn btn-primary rounded-pill px-4">
                            Save
                        </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- ============================================================= -->
        <!-- End PAge Content -->
        <!-- ============================================================= -->
    </div>
@endsection
@section('js')
    <!--This page plugins -->
    <script src="{{ asset('back') }}/extra-libs/datatables.net/js/jquery.dataTables.min.js"></script>
    <!-- start - This is for export functionality only -->
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js" integrity="sha512-8QFTrG0oeOiyWo/VM9Y8kgxdlCryqhIxVeRpWSezdRRAvarxVtwLnGroJgnVW9/XBRduxO/z1GblzPrMQoeuew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{{ asset('back') }}/js/pages/datatable/datatable-advanced.init.js"></script>
    <script>

        function hideValidation() {
            const validation = document.querySelectorAll(`[id$="_validation"]`)
            for(var i = 0; i < validation.length; i++){
                
                validation[i].style.display = "none";
            }
        }

        //Aksi Tambah
        const tambah = document.getElementById('tambah');

        tambah.addEventListener('submit', async (e) => {
            e.preventDefault();

            const nama = tambah.nama.value;
            const is_requested_by_lock = tambah.is_requested_by_lock.value;
            let template = $('#template')[0].files;
            const _token = "{{ csrf_token() }}";

            let formData = new FormData();
            formData.append("nama", nama);
            formData.append("is_requested_by_lock", is_requested_by_lock);

            if (template[0] !== undefined) {
                formData.append("template", template[0]);
            }

            try {
                let response = await fetch("{{ route('forms.templates.store') }}", {
                    method: "POST",
                    body: formData,
                    headers: {
                        "X-CSRF-TOKEN": _token
                    }
                });
                var datasend = await response.json();

                if (datasend.status == 'success') {
                    
                    hideValidation()
                    $('#createmodel').modal('hide');
                    Swal.fire('Template success added !', '', 'success')

                    setInterval(() => {
                        location.reload()
                    }, 1000);
                }else if (datasend.status == 'error'){
                    if (datasend.data) {
                        var error = Object.entries(datasend.data)
                        hideValidation()
                        error.forEach((key,value) => {
                            $('#'+key[0]+'_validation').show()
                            $('#'+key[0]+'_validation').html(key[1])
                        });
                    }
                }

            } catch (err) {
                console.log(err);
            }

            return false;
        });

        $('.dropify').dropify();
    </script>
@endsection