@extends('layouts.app')

@section('content')
<div class="page-header">
    <div class="row align-items-end">
        <div class="col-lg-8">

            <div class="page-header-title">
                <div class="page-header-title">
                    <div class="d-inline">
                        <h4>Manage Document</h4>
                        <!-- <span>lorem ipsum dolor sit amet, consectetur adipisicing elit</span> -->
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 text-right">
            <a href="#" data-toggle="modal" data-target="#create_directory_model" class="btn cur-p btn-sm btn-primary">Create New Directory</a>
            {{-- <a href="{{ url('create-directory') }}" class="btn cur-p btn-sm btn-primary">Create New Folder</a> --}}
        </div>
    </div>
</div>
<!-- Page-header end -->

<!-- Page-body start -->
<div class="page-body">
    <div class="row">
        <div class="col-sm-12">
            <!-- Zero config.table start -->
            <div class="card">
                <div class="card-block">
                    @include('common.error')
                    {{-- <h4 class="text">Manage Document</h4> --}}

                    <div class="table-responsive">
                        <table id="directory_table" class="table table-striped table-bordered nowrap">
                            <thead>
                                <tr>
                                    <td>Directory Name</td>
                                    <td>Action</td>
                                </tr>
                            </thead>
                            <tbody>

                                @foreach ($directories as $row)
                                <tr>
                                    <td><a href="{{ url('/file-list/' . basename($row->directory)) }}">{{ basename($row->directory) }}</a>
                                    </td>


                                    <td>

                                        <a href="javascript:;" class="btn btn-sm cur-p p-0 text-primary delete_btn noloader" onclick="update_dir('{{ basename($row->id) }}')" title="Update Directory"><i class="c-white-50 ti-pencil"></i></a>

                                        <a href="javascript:;" class="btn btn-sm cur-p text-danger delete_btn noloader p-0" onclick="fn_delete('{{ basename($row->id) }}')" title="Delete Directory"><i class="c-white-50 ti-trash"></i>
                                        </a>

                                        <a href="{{ url('/file-list/' . basename($row->directory)) }}" class="btn btn-sm cur-p text-success update_btn noloader p-0 "> <i class="c-white-50 ti-view-list"></i>
                                        </a>
                                    </td>
                                </tr>
                                @endforeach

                            </tbody>
                        </table>
                    </div>

                    {{-- <ul class="directory-list">
                            @foreach ($directories as $directory)
                                <li><a href="{{ url('/file-list/' . basename($directory)) }}">{{ basename($directory) }}</a>
                    </li>
                    @endforeach
                    </ul> --}}

                </div>
            </div>

        </div>
    </div>
</div>


<!-- The Modal -->
<div class="modal create_directory_model" id="create_directory_model">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Create Directory</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="close_model">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <!-- Modal body -->
            <div class="modal-body p-0">
                <div class="card">
                    <div class="card-block">

                        <form method="POST" action="{{ url('create-directory') }}" autocomplete="off">
                            @csrf

                            <div class="row lg-row">
                                <input type="hidden" name="id" id="dir_id">
                                <div class="col-md-6">
                                    <label class="control-label">Directory Name<span class="red">*</span></label>
                                    <input autocomplete="off" class="form-control text-box" id="directory_name" name="directory_name" placeholder="Directory Name" type="text" required onkeypress="allowAlphaSpace(event)">
                                </div>

                                <div class="col-md-6 mt-3">
                                    <button type="submit" class="btn btn-primary login-btn">Submit</button>

                                </div>
                            </div>
                        </form>

                    </div>
                </div>


            </div>
        </div>
    </div>
</div>

<style>
    /* ul.directory-list {
                        list-style: none;
                        padding: 0;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: center;
                    }

                    ul.directory-list li {
                        background: linear-gradient(30deg, #2B9FB2, #AAB02C 130%);
                        margin: 10px;
                        padding: 15px;
                        border: 1px solid #ddd;
                        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                        transition: transform 0.3s ease, background 0.3s ease;
                        width: 150px;
                        text-align: center;
                        border-radius: 8px;
                        overflow: hidden;
                        position: relative;
                    }

                    ul.directory-list li:hover {
                        transform: translateY(-5px) scale(1.05);
                        background: linear-gradient(30deg, #2B9FB2, #AAB02C 130%);
                    }

                    ul.directory-list li a {
                        text-decoration: none;
                        color: #fff;
                        display: block;
                        padding: 10px 0;
                        position: relative;
                        z-index: 1;
                    }

                    ul.directory-list li a .folder-icon {
                        display: block;
                        font-size: 48px;
                        margin-bottom: 10px;
                    }

                    ul.directory-list li::before {
                        content: '';
                        background: rgba(255, 255, 255, 0.1);
                        position: absolute;
                        top: 0;
                        left: -75%;
                        width: 50%;
                        height: 100%;
                        transform: skewX(-25deg);
                        transition: left 0.5s ease;
                        z-index: 0;
                    }

                    ul.directory-list li:hover::before {
                        left: 125%;
                    } */
</style>


<link rel="stylesheet" href="{{ asset('bower_components\data_table\dataTables.dataTables.css') }}">
<link rel="stylesheet" href="{{ asset('bower_components\data_table\fixedColumns.dataTables.css') }}">
<link rel="stylesheet" href="{{ asset('bower_components\data_table\buttons.dataTables.css') }}">
<script src="{{ asset('bower_components\data_table\dataTables.js') }}"></script>
<script src="{{ asset('bower_components\data_table\dataTables.fixedColumns.js') }}"></script>
<script src="{{ asset('bower_components\data_table\fixedColumns.dataTables.js') }}"></script>

<script src="{{ asset('bower_components\data_table\dataTables.buttons.js') }}"></script>
<script src="{{ asset('bower_components\data_table\buttons.dataTables.js') }}"></script>
<script src="{{ asset('bower_components\data_table\buttons.colVis.min.js') }}"></script>

<script>
    $(function() {

        $('#directory_table').DataTable({
            'aoColumnDefs': [{
                "aaSorting": [],
                'bSortable': false,
                'aTargets': [-1] /* 1st one, start by the right */
            }]
        });

        $('#close_model').on('click', function(e) {
            $("#create_directory_model").hide();
        });

    });

    function update_dir(id) {
        $(".modal-title").text('Update Directory');
        $("#create_directory_model").show();

        $.ajax({
            type: 'GET',
            url: "/getDirectory",
            data: 'dir_id=' + id,

            success: function(data) {
                if (data != '') {
                    var obj = $.parseJSON(data);
                    $("#dir_id").val(obj[0].id);
                    $("#directory_name").val(obj[0].directory);
                    console.log(obj);
                }
            }
        });


    }

    function fn_delete(id) {
        // alert(id);
        bootbox.confirm({
            title: "",
            message: "Are you sure, you want to delete this Directory?",
            callback: function(result) {
                if (result) {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    var url = '{{ route("delete_directory") }}';

                    $.ajax({

                            type: "POST",
                            data: {
                                id: id
                            },
                            url: url,
                            //url: '{{--{{ route('role.destroy', $user_id) }}--}}',
                            dataType: 'JSON'

                        })
                        .done(function(response) {
                            // bootbox.alert({title: "Deleted?", message: response.message});
                            location.reload();
                        })
                        .fail(function(response) {
                            bootbox.alert({
                                title: "Deleted?",
                                message: 'Something Went Wrong..'
                            });
                        })
                }
            }
        });
    }
</script>
@endsection