@extends('Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
@section('content')
<div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
    <div class="col-auto">
        <h5>
            <button type="button" class="btn btn-icon bg-white me-2"
                style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ route('project_table') }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                        viewBox="0 0 24 24" fill="none" stroke="#000"
                        stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" class="icon icon-tabler">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a>
            </button>
            Documents
        </h5>
    </div>

    <div class="col-auto">
        <div class="d-flex gap-2">

            <a href="{{ route('create_doc', $project->id ?? null) }}"
                class="btn btn-primary">
                Create Document
            </a>

            <a href="{{ route('add_document', $project->id ?? null) }}"
                class="btn btn-success">
                Upload Document
            </a>

        </div>
    </div>
</div>
<div class="card p-0 m-2">
    <div class="row mb-3 align-items-center p-3 g-2">
    </div>
    <div class="table-responsive pt-0 pb-2">
        <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">
            <div class="justify-content-between dt-layout-table">
                <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                    <table class="table" id="usersTable">
                        <thead>
                            <tr>
                                <th>Sno</th>
                                <th>Date</th>
                                <th>Project Name</th>
                                <th>Document Name</th>
                                <th>Document Type</th>
                                <th>Document</th>
                                <th>Is Mailed</th>
                                <th>Send Mail</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- DELETE MODAL -->
    <div class="modal fade" id="delete" tabindex="-1">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content p-4 text-center">
                <h5>Are you sure?</h5>
                <form method="POST" action="{{ route('delete_document') }}">
                    @csrf
                    <input type="hidden" name="id" id="deleteId">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" class="btn btn-danger" id="finalSubmit">
                        Yes Delete
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- TOAST -->
<div class="toast-container position-fixed top-0 end-0 p-3">
    <div id="successToast"
        class="toast align-items-center text-bg-success border-0"
        role="alert">
        <div class="d-flex">
            <div class="toast-body">
                Document saved successfully
            </div>
            <button type="button"
                class="btn-close btn-close-white me-2 m-auto"
                data-bs-dismiss="toast">
            </button>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script>
    $(document).ready(function() {
        const projectId = @json($project_id);
        let ajaxUrl = projectId ?
            "{{ route('project.documents', ':id') }}"
            .replace(':id', projectId) :
            "{{ route('project.documents') }}";
        $('#usersTable').DataTable({
            processing: true,
            serverSide: false,
            ajax: {
                url: ajaxUrl,
                dataSrc: 'data'
            },
            columns: [{
                    data: null,
                    render: function(data, type, row, meta) {
                        return meta.row + 1;
                    }
                },
                {
                    data: 'created_at',
                    render: function(data) {
                        return new Date(data)
                            .toLocaleDateString();
                    }
                },
                {
                    data: 'project.project_name',
                    defaultContent: '-'
                },
                {
                    data: 'document_name'
                },
                {
                    data: null,
                    render: function() {
                        return 'PDF';
                    }
                },
                {
                    data: 'pdf_file',
                    render: function(file) {
                        return file ?
                            `<a href="/storage/${file}"
                        target="_blank"
                        class="btn btn-sm btn-primary">
                        View PDF
                    </a>` :
                            '-';
                    }
                },
                {
                    data: 'is_emailed',
                    render: function(data) {
                        return data == 1 ?
                            '<span class="badge bg-success">Yes</span>' :
                            '<span class="badge bg-danger">No</span>';
                    }
                },
                {
                    data: null,
                    render: function(data, type, row) {
                        let url =
                            "{{ route('sent_mail', ':id') }}"
                            .replace(':id', row.id);
                        return `
        <a href="${url}"
            class="btn btn-sm btn-primary">
            Send Email
        </a>
        `;
                    }
                },
                {
                    data: null,
                    render: function(data, type, row) {
                        return `
                    <i class="ti tabler-trash text-danger deleteBtn"
                        data-id="${row.id}"
                        data-bs-toggle="modal"
                        data-bs-target="#delete"
                        style="cursor:pointer;font-size:22px">
                    </i>
                    `;
                    }
                }
            ]
        });
        // DELETE
        $(document).on('click', '.deleteBtn', function() {
            let id = $(this).data('id');
            $('#deleteId').val(id);
        });
    });
</script>
<script>

document.addEventListener('DOMContentLoaded', function () {

    const urlParams =
        new URLSearchParams(window.location.search);

    // SUCCESS TOAST
    if (urlParams.get('success') == '1') {

        showToast(
            'Document Mail Sent Successfully',
            'success'
        );

        removeQueryParams();
    }

    // ERROR TOAST
    if (urlParams.get('error') == '1') {

        showToast(
            'Something went wrong',
            'error'
        );

        removeQueryParams();
    }

});

function removeQueryParams() {

    window.history.replaceState(
        {},
        document.title,
        window.location.pathname
    );
}

function showToast(message, type) {

    let bgClass =
        type == 'success'
        ? 'bg-success'
        : 'bg-danger';

    let toastId =
        'toast_' + Date.now();

    let toastHtml = `

        <div class="toast-container position-fixed top-0 end-0 p-3"
            style="z-index:9999;">

            <div id="${toastId}"
                class="toast align-items-center text-white ${bgClass} border-0"
                role="alert"
                aria-live="assertive"
                aria-atomic="true">

                <div class="d-flex">

                    <div class="toast-body">

                        ${message}

                    </div>

                    <button type="button"
                        class="btn-close btn-close-white me-2 m-auto"
                        data-bs-dismiss="toast">
                    </button>

                </div>

            </div>

        </div>
    `;

    document.body.insertAdjacentHTML(
        'beforeend',
        toastHtml
    );

    let toastEl =
        document.getElementById(toastId);

    let toast =
        new bootstrap.Toast(toastEl, {
            delay: 3000
        });

    toast.show();

    toastEl.addEventListener(
        'hidden.bs.toast',
        function () {

            toastEl.parentElement.remove();
        }
    );
}

</script>

<script>

document.addEventListener(
    'DOMContentLoaded',
    function() {

        const urlParams =
            new URLSearchParams(
                window.location.search
            );

        // SUCCESS TOAST
        if (urlParams.get('success') == '1') {

            showToast(
                'Mail Sent Successfully',
                'success'
            );

            // REMOVE success=1 FROM URL
            window.history.replaceState(
                {},
                document.title,
                window.location.pathname
            );
        }

        // ERROR TOAST
        if (urlParams.get('error') == '1') {

            showToast(
                'Something went wrong',
                'error'
            );

            // REMOVE error=1 FROM URL
            window.history.replaceState(
                {},
                document.title,
                window.location.pathname
            );
        }
    }
);

function showToast(message, type) {

    let bgClass =
        type == 'success'
        ? 'bg-success'
        : 'bg-danger';

    let toastHtml = `

        <div class="position-fixed top-0 end-0 p-3"
            style="z-index:9999;">

            <div id="liveToast"
                class="toast align-items-center text-white ${bgClass} border-0"
                role="alert"
                aria-live="assertive"
                aria-atomic="true">

                <div class="d-flex">

                    <div class="toast-body">
                        ${message}
                    </div>

                    <button type="button"
                        class="btn-close btn-close-white me-2 m-auto"
                        data-bs-dismiss="toast">
                    </button>

                </div>

            </div>

        </div>
    `;

    document.body.insertAdjacentHTML(
        'beforeend',
        toastHtml
    );

    let toastEl =
        document.getElementById(
            'liveToast'
        );

    let toast =
        new bootstrap.Toast(
            toastEl,
            {
                delay: 3000
            }
        );

    toast.show();
}

</script>
@endsection