@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="#upload_file_model"
                    class="btn cur-p btn-sm btn-primary">Upload file</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')
                        <h6 class="text"><a href="/manage-document"><img
                                    src="{{ asset('assets/images/previous_189254.png') }}"
                                    style="height: 20px;width:20px" /></a> &nbsp;&nbsp; <b>Files in
                                {{ $currentDirectory }}</b>
                        </h6>
                        <div class="table-responsive">
                            <table id="directory_table" class="table table-striped table-bordered nowrap">
                                <thead>
                                    <tr>
                                        <td>Directory</td>
                                        <td>State</td>
                                        <td>Year</td>
                                        <td>File Name</td>
                                        <td>Action</td>
                                    </tr>
                                </thead>
                                <tbody>

                                    @foreach ($records as $record)
                                        <tr>
                                            <td>{{ $record->directory }}</td>
                                            <td>{{ $record->StateName }}</td>
                                            <td>{{ $record->Year }}</td>
                                            <td>{{ $record->file_name }}</td>
                                            <td>
                                                <a href="javascript:;"
                                                    class="btn btn-sm cur-p btn-danger delete_btn noloader"
                                                    onclick="fn_delete('{{ basename($record->id) }}')"
                                                    title="Delete File"><i class="c-white-50 ti-trash"></i>
                                                </a>
                                                <a href="{{ url('/download/' . $record->directory . '/' . $record->file_name) }}"
                                                    class="btn btn-sm cur-p btn-success noloader" title="Download"><i
                                                        class="feather icon-download" aria-hidden="true"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach

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

                    </div>
                </div>

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


    <!-- The Modal -->
    <div class="modal upload_file_model" id="upload_file_model">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Upload File</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <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('upload-file') }}" enctype="multipart/form-data"
                                autocomplete="off">
                                @csrf
                                <div class="row lg-row">
                                    <div class="col-md-6">
                                        <label class="control-label">State<span class="red">*</span></label>
                                        <select id="StateCode" name="StateCode" class="form-control select" required>
                                            <option value="99">All States</option>
                                            @foreach ($states as $state)
                                                <option value="{{ $state->StateCode }}">{{ $state->StateName }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-md-6">
                                        <label class="control-label">Year<span class="red">*</span></label>
                                        <select id="year_id" name="year_id" class="form-control select" required>
                                            @for ($year = 2024; $year >= 2010; $year--)
                                                <option value="{{ $year }}">{{ $year }}</option>
                                            @endfor
                                        </select>
                                    </div>

                                    <div class="col-md-12 mt-2">
                                        <label class="control-label">Selet File<span class="red">*</span></label>
                                        <input type="hidden" name="directory" placeholder="Directory Name"
                                            value="{{ request()->segment(2) }}" required>
                                        <input type="file" class="form-control" name="file" accept="application/pdf"
                                            required>
                                    </div>

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

                        </div>
                    </div>


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

    <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>

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

        ul.directory-list li {
            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: 140px;
            text-align: center;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }

        ul.directory-list li:hover {
            transform: translateY(-5px) scale(1.05);
        }

        ul.directory-list li a {
            text-decoration: none;
            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;
            color: #ffbb33;
        }

        ul.directory-list li a .pdf-icon {
            display: block;
            width: 100px;
            height: 130px;
            background: #d9534f;
            color: #fff;
            font-size: 16px;
            line-height: 130px;
            text-align: center;
            margin: 0 auto 10px;
            border-radius: 4px;
            position: relative;
        }

        ul.directory-list li a .pdf-icon::before {
            content: "PDF";
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 20px;
            font-weight: bold;
        }

        ul.directory-list li a .pdf-icon::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 30px;
            height: 30px;
            background: #fff;
            border-top-left-radius: 4px;
            clip-path: polygon(0 0, 100% 0, 100% 100%);
        }

        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>
    <script>
        $(function() {
            $('#directory_table').DataTable({
                'aoColumnDefs': [{
                    "aaSorting": [],
                    'bSortable': false,
                    'aTargets': [-1] /* 1st one, start by the right */
                }]
            });
        });

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

                        $.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