@extends('layouts.main')

@section('main-container')
    <style>
        table.dataTable>tbody>tr {
            background-color: #dedede;
        }

        div#kt_datatable_example_5_length {
            display: none;
        }

        div#kt_datatable_example_5_filter {
            display: none;
        }

        td {
            background: white !important;
        }

        .no-separator {
            border-bottom: none;
        }

        div#kt_content_container {
            margin-top: 0px;
        }

        /* Custom checkbox style */
        .custom-checkbox {
            display: inline-block;
            width: 17px;
            height: 17px;
            background-color: white;
            border: 1px solid #8D99AE;
            border-radius: 3px;
        }

        /* Custom checkmark when checkbox is checked */
        .custom-checkbox:checked::after {
            content: "\2713";
            /* Unicode checkmark character */
            display: block;
            text-align: center;
            font-size: 12px;
            line-height: 17px;
            width: 16px;
            height: 16px;
            background: #8C3EFF;
        }

        div.dataTables_wrapper .table-responsive{
            min-height: 500px
        }
    </style>
    <div class="post d-flex flex-column-fluid" id="kt_post">
        <div id="kt_content_container" class="container-xxl" style="">

            <div class="card" style="margin: 30px 30px 30px 30px;border-radius: 22px;box-shadow: none; min-height: 700px">
                <div data-kt-swapper="true" data-kt-swapper-mode="prepend"
                    data-kt-swapper-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}"
                    class="page-title d-flex align-items-center flex-wrap mt-4 me-3 mb-5 mb-lg-0">
                    <span class="h-20px border-gray-200 border-start mx-2"></span>
                    <ul class="breadcrumb breadcrumb-separatorless fw-bold fs-7 my-1">
                        <img src="{{ url('/media/logos/resources-gray.png') }}" alt="Resource Icon" class="custom-icon"
                            style="margin-bottom:3px;">
                        <li class="breadcrumb-item" style="font-weight: 100;">Resources</li>
                        <li style="">
                            <div class="input-group">
                                <span class="input-group-prepend">
                                    <span class="input-group-text"
                                        style="background-color: white;border-right: none;border-radius: unset;height: 44px;border-top-left-radius: 12px;border-bottom-left-radius: 12px;border: 1px solid #dbdfe9;">
                                        <img src="{{ url('/media/logos/search.png') }}" alt="User Icon"
                                            class="custom-icon h-15px w-15px">
                                    </span>
                                </span>
                                <input type="text" class="form-control" id="customSearch"
                                    style="border-left: none;border-top-right-radius: 12px;border-bottom-right-radius: 12px;width:275px"
                                    placeholder="Search Resources">
                            </div>
                        </li>
                        <li>
                            <a href="{{ url('/create_resource') }}" class="btn btn-sm btn-primary text-uppercase filter"
                                data-bs-toggle="" data-bs-target="#"
                                style="margin-left:20px;border-radius: 10px;padding: 10px 20px 10px 20px;font-family: 'OxaniumSemibold';">CREATE
                                RESOURCE</a>
                            <button type="button" class="btn btn-sm btn-danger d-none multiple_delete"
                                style="margin-left:20px;" onclick="delete_multiple();"
                                data-kt-customer-table-select="delete_selected">Delete Selected</button>

                        </li>
                    </ul>
                </div>

                <hr style="background: #e1e3ec;width: 95%;margin-left: 1.8rem;border: 1px solid #e1e3ec;">
                <div class="card-body pt-0" style="padding: 2rem 0rem 0rem 2rem;">
                    <table class="table align-middle fs-6 gy-5" id="kt_datatable_example_5">
                        <thead>
                            <tr class="text-start text-muted fw-bolder fs-7 text-uppercase gs-0">
                                <th class="d-flex w-10px pe-2">
                                    <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                                        <input class="form-check-input custom-checkbox" id="mainCheckbox" type="checkbox"
                                            data-kt-check="true"
                                            data-kt-check-target="#kt_datatable_example_5 .form-check-input"
                                            style="background: white;border: 1px solid #8D99AE;border-radius: 3px;height: 17px;width: 17px;"
                                            value="1" />
                                    </div>
                                </th>
                                <th class="min-w-20px">ID</th>
                                <th class="min-w-120px" style="text-align: center;text-transform: none;padding-right: 14px;">File Type</th>
                                <th class="min-w-120px" style="text-align: center;text-transform: none;padding-right: 14px;">Title</th>
                                <th style="text-align: center;text-transform: none;padding-right: 14px;"
                                    class="min-w-150px">Date Created</th>
                                <th style="text-align: center;text-transform: none;" class="min-w-125px">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="text-gray-600 fw-bold">
                            @php
                                $rowCount = 1;
                            @endphp
                            @foreach ($resources as $row)
                                <tr class="no-separator" style="cursor: pointer;border: none;">
                                    <td>
                                        <div class="form-check form-check-sm form-check-custom form-check-solid">
                                            <input class="form-check-input custom-checkbox rowCheckbox" type="checkbox"
                                                style="background: white;border: 1px solid #8D99AE;border-radius: 3px;height: 17px;width: 17px;"
                                                value="{{ $row->id }}" />
                                        </div>
                                    </td>
                                    <td style="color:#2c2c2e">{{ $rowCount++ }}</td>
                                    <td style="text-align: center;color:#2c2c2e">{{ $row->file_type }}</td>
                                    <td style="text-align: center;color:#2c2c2e">{{ $row->title }}</td>
                                    <td style="text-align: center;color:#2c2c2e">
                                        {{ \Carbon\Carbon::parse($row->created_at)->format('m-d-Y') }}</td>
                                    <td style="text-align: center;color:#2c2c2e">
                                        <div class="btn-group" role="group">
                                            <a href="{{ route('resource.edit', $row->id) }}" class="btn btn-light btn-sm"
                                                style="background: white;">
                                                <svg width="18" height="19" viewBox="0 0 18 19" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M9 15.5H15.75" stroke="#8C3EFF" stroke-width="1.5"
                                                        stroke-linecap="round" stroke-linejoin="round" />
                                                    <path
                                                        d="M12.375 3.12517C12.6734 2.8268 13.078 2.65918 13.5 2.65918C13.7089 2.65918 13.9158 2.70033 14.1088 2.78029C14.3019 2.86024 14.4773 2.97743 14.625 3.12517C14.7727 3.27291 14.8899 3.4483 14.9699 3.64132C15.0498 3.83435 15.091 4.04124 15.091 4.25017C15.091 4.4591 15.0498 4.66599 14.9699 4.85902C14.8899 5.05204 14.7727 5.22743 14.625 5.37517L5.25 14.7502L2.25 15.5002L3 12.5002L12.375 3.12517Z"
                                                        stroke="#8C3EFF" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                </svg>
                                            </a>
                                            <a href="#" class="btn btn-light btn-sm"
                                                onclick="confirmDelete({{ $row->id }})" style="background: white;">
                                                <svg width="18" height="19" viewBox="0 0 18 19" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M2 5H3.5H15.5" stroke="#FF0101" stroke-width="1.5"
                                                        stroke-linecap="round" stroke-linejoin="round" />
                                                    <path
                                                        d="M14 5V15.5C14 15.8978 13.842 16.2794 13.5607 16.5607C13.2794 16.842 12.8978 17 12.5 17H5C4.60218 17 4.22064 16.842 3.93934 16.5607C3.65804 16.2794 3.5 15.8978 3.5 15.5V5M5.75 5V3.5C5.75 3.10218 5.90804 2.72064 6.18934 2.43934C6.47064 2.15804 6.85218 2 7.25 2H10.25C10.6478 2 11.0294 2.15804 11.3107 2.43934C11.592 2.72064 11.75 3.10218 11.75 3.5V5"
                                                        stroke="#FF0101" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                    <path d="M7.25 8.75V13.25" stroke="#FF0101" stroke-width="1.5"
                                                        stroke-linecap="round" stroke-linejoin="round" />
                                                    <path d="M10.25 8.75V13.25" stroke="#FF0101" stroke-width="1.5"
                                                        stroke-linecap="round" stroke-linejoin="round" />
                                                </svg>
                                            </a>
                                        </div>
                                        <form id="delete-form-{{ $row->id }}"
                                            action="{{ route('resource.destroy', $row->id) }}" method="POST"
                                            style="display: none;">
                                            @csrf
                                            @method('DELETE')
                                            <button type="button" onclick="confirmDelete('{{ $row->id }}')">Delete
                                                Resource</button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>

                    </table>

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

    <script>
        var baseUrl = @json(url('/'));

        function confirmDelete(resourceId) {
            var confirmation = confirm('Are you sure you want to delete this resource?');

            if (confirmation) {
                document.getElementById('delete-form-' + resourceId).submit();
            }
        }

        function delete_multiple() {

            if (confirm('Are you sure you want to delete selected resources?')) {
                var checkedValues = [];
                $('.rowCheckbox:checked').each(function() {
                    checkedValues.push($(this).val()); // Assuming you want to get the value from the second column
                });

                $.ajax({
                    url: baseUrl + "/delete_all_resources",
                    type: "POST",
                    data: {
                        ids: checkedValues,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        alert("Resources Deleted Successfully");
                        window.location.reload();

                    }
                })
            }
        }
    </script>
    <script>
        $(document).ready(function() {
            var table = $('#kt_datatable_example_5').DataTable();
            table.order([4, 'asc']).draw();

            $('#customSearch').on('input', function() {
                table.search(this.value).draw();
                table.order([4, 'asc']).draw();
            });

            // Event listener for check all checkbox
            $('#mainCheckbox').on('change', function() {
                if ($(this).is(':checked')) {
                    $('.rowCheckbox').prop('checked', true);
                    $('.filter').addClass('d-none');
                    $('.multiple_delete').removeClass('d-none');
                } else {
                    $('.rowCheckbox').prop('checked', false);
                    $('.filter').removeClass('d-none');
                    $('.multiple_delete').addClass('d-none');
                }
            });

            // Event listener for individual row checkboxes
            $('#kt_datatable_example_5 tbody').on('change', '.rowCheckbox', function() {
                if ($('.rowCheckbox:checked').length === $('.rowCheckbox').length) {
                    $('#mainCheckbox').prop('checked', true);
                } else {
                    $('#mainCheckbox').prop('checked', false);
                }

                if($('.rowCheckbox:checked').length > 0){
                    $('.multiple_delete').removeClass('d-none');
                } else {
                    $('.multiple_delete').addClass('d-none');
                }
            });
        });
    </script>
@endsection