@extends('layouts.admin.index')

@section('content')
    <div class="page-header page-header-light shadow">
        <div class="page-header-content d-lg-flex">
            <div class="d-flex">
                <h4 class="page-title mb-0">
                    Home - <span class="fw-normal">Training Management</span>
                </h4>

                <a href="#page_header"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>

            {{-- <div class="collapse d-lg-block my-lg-auto ms-lg-auto" id="page_header">
                <div class="d-sm-flex align-items-center mb-3 mb-lg-0 ms-lg-3">
                    <div class="d-inline-flex mt-3 mt-sm-0">
                        <a href="{{ route('training-management.create') }}"
                            class="status-indicator-container ms-1 btn btn-primary rounded-pill">
                            Add Training Management
                        </a>
                    </div>
                </div>
            </div> --}}
        </div>

        <div class="page-header-content d-lg-flex border-top">
            <div class="d-flex">
                <div class="breadcrumb py-2">
                    <a href="{{ route('admin.dashboard') }}" class="breadcrumb-item"><i class="ph-house"></i></a>
                    <a href="{{ route('admin.dashboard') }}" class="breadcrumb-item">Home</a>
                    <span class="breadcrumb-item active">Training Management</span>
                </div>

                <a href="#breadcrumb_elements"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>
    </div>

    <div class="content">

        @include('error-success')

        <div class="mb-3 row">
            <div class="col-lg-12" style="text-align: right">
                <a href="{{ route('training-management.create') }}"
                    class="status-indicator-container ms-1 btn btn-primary rounded-pill">
                    Add Training Management
                </a>
            </div>
        </div>
        <form action="{{ route('training-management.index') }}">
            <div class="row">
                <div class="col-lg-6"></div>
                <div class="col-lg-6">
                    <div class="row">

                        <div class="col-lg-9">
                            <div class="mb-3">
                                <input type="text" name="q" id="searchTerm" class="form-control"
                                    placeholder="Search..." value="{{ $searchTerm ?? '' }}">
                            </div>
                        </div>

                        <div class="col-lg-3" style="text-align: right">
                            <div class="mb-3">
                                <button type="button" id="searchBtn" class="btn btn-primary"
                                    style="width: 100%">Search</button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </form>
        <div class="card">

            <div class="table-responsive">
                <table class="table table-bordered " id="training-table">
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Description</th>
                            <th>Category</th>
                            <th>File</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $("body").on("click", ".delete-resource", function(e) {
                e.preventDefault();

                const formId = $(this).attr("data-form-id");

                console.log("formId", formId)

                Swal.fire({
                    title: 'Are you sure that you want to delete this record?',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'No, cancel please!'
                }).then((result) => {
                    /* Read more about isConfirmed, isDenied below */
                    if (result.isConfirmed) {
                        document.getElementById(formId).submit();
                    }
                })
            });
        });
    </script>
       <script>
        $(document).ready(function() {
            var baseUrl = "{{ asset('uploads/files/') }}";

            var table = $('#training-table').DataTable({
                buttons: {
                    dom: {
                        button: {
                            className: 'btn btn-light'
                        }
                    },
                    buttons: [{
                            extend: 'copy'
                        },
                        {
                            extend: 'csv'
                        },
                        {
                            extend: 'excel'
                        },
                        {
                            extend: 'pdf'
                        },
                        {
                            extend: 'print'
                        }
                    ]
                },
                responsive: true,
                processing: true,
                serverSide: true,
                order: [[2, 'desc']],
                ajax: '{{ route('training-management.index') }}',
                columns: [
                    {
                        data: 'title',
                        name: 'title'
                    },
                    {
                        data: 'description',
                        name: 'description'
                    },
                    {
                        data: 'category_title',
                        name: 'categories.title'
                    },
                    {
                        data: 'file',
                        name: 'file',
                        render : function(data,type,row){
                            return `<a href="${baseUrl}/${data}" class="btn btn-info btn-sm" target="_blank">View</a>`;

                        }
                    },
                    {
                        data: null,
                        name: 'actions',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            let editUrl = `{{ route('training-management.edit', ':id') }}`.replace(':id', row
                                .id);
                            let deleteFormId = `delete-form-${row.id}`;
                            let deleteUrl = `{{ route('training-management.destroy', ':id') }}`.replace(':id', row.id);

                            let deleteAction = row.deleted_at ?
                                '<i class="ph ph-archive" style="color:red;"></i>' :
                                `<a href="javascript:void(0)" data-form-id="${deleteFormId}" class="text-body mx-1 delete-resource" title="Delete"><i class="ph-trash"></i></a>`;

                            return `<div class="d-inline-flex">
                                    <a href="${editUrl}" class="text-body mx-1" title="Edit"><i class="ph-pen"></i></a>
                                    ${deleteAction}
                                    <form id="${deleteFormId}" style="display:none" action="${deleteUrl}" method="POST">
                                        {{ csrf_field() }}
                                        {{ method_field('DELETE') }}
                                    </form>
                                </div>`;
                        }
                    }
                ]
            });
            $('#training-table_filter').hide();
            $('#training-table_length').hide();
            $('#searchBtn').on('click', function() {
                table.search($('#searchTerm').val()).draw(); // Use DataTable's search method
            });
            $('#searchTerm').on('keyup', function() {
                table.search(this.value).draw(); // Use DataTable's search method
            });
        });
    </script>
@endsection