@extends('layout.default')

@section('content')
    <div class="card card-custom">
        <div class="card-header">
            <div class="card-title py-3">
                <div class="flex-column">
                    <h3 class="card-label">
                        <div>
                            <div class="font-weight-bolder mb-2">{{ $project->name }}
                                @if ($project->fieldAccess()->count())
                                    <button type="button" class="btn btn-icon" onclick="loadGrantedFields()">
                                        <span class="fas fa-user-friends ml-2 text-muted font-size-lg"></span>
                                    </button>
                                @endif
                            </div>
                            <div href="#" class="font-size-lg text-dark-50">Bidang: {{ $project->field->name }} -
                                {{ $project->field->branch->name }}</div>
                        </div>
                    </h3>
                    @if (!is_null($folder))
                        <div class="mt-3">
                            <x-project.folder-breadcrumb :folder="$folder->id" :project="$project->id" />
                        </div>
                    @endif
                </div>
            </div>
            <div class="card-toolbar">
                <a href="{{ route('projects.index') }}" class="btn btn-light-primary btn-sm mr-3">
                    <i class="fas fa-arrow-left"></i> Daftar Project
                </a>

                <a href="{{ route('projects.filing.search', ['project' => $project]) }}"
                    class="btn btn-light-primary btn-sm mr-3">
                    <i class="fas fa-search"></i> Cari Berkas Project
                </a>

                <div class="dropdown dropdown-inline  mr-3">
                    <a href="#" class="btn btn-primary btn-sm" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false">
                        <i class="ki ki-plus"></i> Tambah
                    </a>
                    <div class="dropdown-menu p-0 m-0 dropdown-menu-md dropdown-menu-right" style="">
                        <ul class="navi navi-hover">
                            <li class="navi-item">
                                <a href="javascript:;" onclick="showModalAddFolder()" class="navi-link">
                                    <span class="navi-icon">
                                        <i class="fas fa-folder"></i>
                                    </span>
                                    <span class="navi-text">Folder</span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a href="javascript:;" onclick="showModalAddFile()" class="navi-link">
                                    <span class="navi-icon">
                                        <i class="fas fa-file-alt"></i>
                                    </span>
                                    <span class="navi-text">File</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="dropdown dropdown-inline dropleft">
                    <button type="button" class="btn btn-light-primary btn-icon btn-sm" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                        <i class="ki ki-bold-more-ver"></i>
                    </button>
                    <div class="dropdown-menu dropdown-menu-sm" style="">
                        <a class="dropdown-item"
                            href="{{ route('projects.manage_file_history.index', ['project' => $project]) }}">Riwayat Kelola
                            File</a>
                        <a class="dropdown-item" href="javascript:;" onclick="createTemplateFolder()">Buat Folder
                            Template </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body">
            @livewire('project-filing', ['project' => $project, 'folder' => $folder])
        </div>
    </div>

    <form id="create_folder_form" method="POST"
        action="{{ route('projects.filing.store_folder', ['project' => $project]) }}">
        <div class="modal fade" id="addFolderModal" data-backdrop="static" tabindex="-1" role="dialog"
            aria-labelledby="staticBackdrop" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addFolderModalLabel">Tambah Folder</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <i aria-hidden="true" class="ki ki-close"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        @csrf
                        <input type="hidden" name="folder_id" value="{{ optional($folder)->id }}">

                        <x-inputs.form-group for="name" label="{{ __('Nama') }}" required="true">
                            <x-inputs.text id="name" name="name" type="text" value="Folder Tanpa Nama" />
                        </x-inputs.form-group>

                    </div>
                    <div class="modal-footer">
                        <button type="button" id="btn_submit_folder"
                            class="btn btn-primary font-weight-bold">Simpan</button>
                        <button type="button" class="btn btn-light-primary font-weight-bold"
                            data-dismiss="modal">Batal</button>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <form id="update_folder_form" method="POST" action="#">
        <div class="modal fade" id="updateFolderModal" data-backdrop="static" tabindex="-1" role="dialog"
            aria-labelledby="staticBackdrop" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="updateFolderModalLabel">Edit Folder</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <i aria-hidden="true" class="ki ki-close"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        @csrf
                        @method('PUT')

                        <x-inputs.form-group for="name" label="{{ __('Nama') }}" required="true">
                            <x-inputs.text id="name" name="name" type="text" value="" />
                        </x-inputs.form-group>

                    </div>
                    <div class="modal-footer">
                        <button type="button" id="btn_update_folder"
                            class="btn btn-primary font-weight-bold">Simpan</button>
                        <button type="button" class="btn btn-light-primary font-weight-bold"
                            data-dismiss="modal">Batal</button>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <form id="add_file_form" method="POST" action="{{ route('projects.filing.store_file', ['project' => $project]) }}">
        <div class="modal fade" id="addFileModal" data-backdrop="static" tabindex="-1" role="dialog"
            aria-labelledby="staticBackdrop" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addFileModalLabel">Tambah File</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <i aria-hidden="true" class="ki ki-close"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        @csrf
                        <input type="hidden" name="folder_id" value="{{ optional($folder)->id }}">

                        <div class="dropzone dropzone-default dropzone-success" id="file">
                            <div class="dropzone-msg dz-message">
                                <h3 class="dropzone-msg-title">Drop files here or click to upload.</h3>
                                <span class="dropzone-msg-desc">Upload up to 10 files</span>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="btn_submit_file"
                            class="btn btn-primary font-weight-bold">Simpan</button>
                        <button type="button" class="btn btn-light-primary font-weight-bold"
                            data-dismiss="modal">Batal</button>
                    </div>
                </div>
            </div>
        </div>
    </form>

    @include('project._modal-granted-fields')
@endsection

@push('page_script')
    {!! JsValidator::formRequest('App\Http\Requests\Project\StoreFolderRequest', '#create_folder_form') !!}
    {!! JsValidator::formRequest('App\Http\Requests\Project\UpdateFolderRequest', '#update_folder_form') !!}

    <script>
        var dropzone;
        $(document).ready(function() {
            $('#btn_submit_folder').on('click', function(e) {
                storeNewFolder();
            });

            $("#btn_update_folder").on('click', function(e) {
                updateFolder();
            });

            dropzone = new Dropzone('#file', {
                url: "{{ route('projects.filing.store_file', ['project' => $project]) }}", // Set the url for your upload script location
                paramName: "file", // The name that will be used to transfer the file
                uploadMultiple: true,
                maxFiles: 10,
                maxFilesize: 25, // MB
                parallelUploads: 10,
                addRemoveLinks: true,
                autoProcessQueue: false,
                acceptedFiles: ".png,.jpg,.jpeg,.pdf,.word,.wordx,.xls,.xlsx,.ppt,.pptx",
                init: function() {
                    var myDropzone = this;
                    $('#btn_submit_file').on('click', function(e) {
                        storeNewFile(myDropzone.getAcceptedFiles());
                    });

                    this.on("sendingmultiple", function() {

                    });

                    this.on("successmultiple", function(files, response) {

                    });

                    this.on("errormultiple", function(files, response) {

                    });

                    this.on('resetFile', function() {
                        this.removeAllFiles();
                    })
                }
            });
        });

        function showModalAddFolder() {
            $('#create_folder_form')[0].reset();
            $('#addFolderModal').modal('show');
        }

        function storeNewFolder() {
            const $form = $('#create_folder_form');

            if (!$form.validate().form()) {
                return false;
            }

            const url = $form.attr('action');
            const data = $form.serialize();
            const responseCallback = function(response) {
                MyApp.alert("{{ __('Save') }}", "{{ __('Add Folder Success') }}", "success", () => {
                    Livewire.emit('itemAdded');
                    $('#addFolderModal').modal('hide');
                });
            };

            return MyApp.ajaxPost(url, data, responseCallback);
        }

        function showModalAddFile() {
            $('#add_file_form')[0].reset();
            dropzone.removeAllFiles();
            $('#addFileModal').modal('show');
        }

        function storeNewFile(files = []) {
            if (!$('#add_file_form').validate().form()) {
                return false;
            }

            const $form = $('#add_file_form');

            let data = new FormData($("#add_file_form")[0]);
            files.forEach((file) => {
                data.append('files[]', file);
            });

            const url = $form.attr('action');

            const responseCallback = function(response) {
                MyApp.alert("{{ __('Save') }}", "{{ __('Add File(s) Success') }}", "success", () => {
                    Livewire.emit('itemAdded');
                    $('#addFileModal').modal('hide');
                    dropzone.removeAllFiles(true);
                });
            };

            return MyApp.ajaxPost(url, data, responseCallback);
        }

        function destroyFile(url) {
            const sendRequest = () => {
                MyApp.ajaxDelete(url, null, function(response) {
                    MyApp.alert("{{ __('Save') }}", "{{ __('File deleted successfully') }}", "success",
                        () => {
                            Livewire.emit('itemRemoved');
                        });
                });
            };

            return MyApp.confirm("{{ __('Confirm') }}", "{{ __('Are you sure to delete this file?') }}", "warning",
                sendRequest);
        }

        function editFolder(id, name) {
            $('#update_folder_form')[0].reset();

            const url = "{{ url('/projects/' . $project->id . '/filing/update-folder') }}/" + id;
            $('#update_folder_form').prop('action', url);
            $('#update_folder_form').find('input[name=name]').val(name);

            $('#updateFolderModal').modal('show');
        }

        function updateFolder() {
            const $form = $('#update_folder_form');

            if (!$form.validate().form()) {
                return false;
            }

            const url = $form.attr('action');
            const data = $form.serialize();
            const responseCallback = function(response) {
                MyApp.alert("{{ __('Save') }}", "{{ __('Edit Folder Success') }}", "success", () => {
                    Livewire.emit('itemAdded');
                    $('#updateFolderModal').modal('hide');
                });
            };

            return MyApp.ajaxPut(url, data, responseCallback);
        }

        function destroyFolder(url) {
            const sendRequest = () => {
                MyApp.ajaxDelete(url, null, function(response) {
                    MyApp.alert("{{ __('Save') }}", "{{ __('Folder deleted successfully') }}", "success",
                        () => {
                            Livewire.emit('itemRemoved');
                        });
                });
            };

            return MyApp.confirm("{{ __('Confirm') }}", "{{ __('Are you sure to delete this folder?') }}", "warning",
                sendRequest);
        }

        function deleteSelected() {
            MyApp.confirm("{{ __('Confirm') }}",
                "{{ __('Are you sure to delete selected folder(s) and file(s) ?') }}", "warning", () => {
                    Livewire.emit('confirmDelete');
                });
        }

        function createTemplateFolder() {
            const requestGenerate = () => {
                MyApp.ajaxPost("{{ route('projects.filing.generate_template_folder', ['project' => $project]) }}",
                    null, (response) => {
                        MyApp.alert("{{ __('Save') }}", "{{ __('Folder generated successfully') }}",
                            "success",
                            () => {
                                Livewire.emit('itemAdded');
                            });
                    });
            }
            MyApp.confirm("{{ __('Confirm') }}",
                "{{ __('Are you sure to generate folder by template on this project?') }}", "warning",
                requestGenerate);
        }

        function loadGrantedFields() {
            MyApp.ajaxGet("{{ route('projects.show_granted_fields', ['project' => $project]) }}", null, (response) =>
                showGrantedFields(
                    response));
        }
    </script>
@endpush