@extends('layouts.main')

@section('main-container')
    <!-- <div class="content d-flex flex-column flex-column-fluid" id="kt_content"> -->
    <!--begin::Toolbar-->
    <style>
        /* .row {
            display: none;
        } */

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

        @font-face {
            font-family: 'OxaniumExtraBold';
            src: url('{{ asset(' /font/Oxanium/static/Oxanium-ExtraBold.ttf') }}') format('truetype');
        }

        @font-face {
            font-family: 'OxaniumMedium';
            src: url('{{ asset(' /font/Oxanium/static/Oxanium-Medium.ttf') }}') format('truetype');
        }

        @font-face {
            font-family: 'OxaniumSemibold';
            src: url('{{ asset(' /font/Oxanium/static/Oxanium-SemiBold.ttf') }}') format('truetype');
        }

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

        .btn.btn-flex.btn-light.btn-active-primary:hover {
            background-color: transparent !important;
        }

        /* 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;
            background: #1b84ff;
        }
    </style>

    <div class="post d-flex flex-column-fluid" id="kt_post">
        <div id="kt_content_container" class="container-xxl mt-4">
            <div class="card" style="margin: 35px 30px 25px 30px;border-radius: 22px;">
                <div data-kt-swapper=" true" data-kt-swapper-mode="prepend"
                    data-kt-swapper-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}"
                    class="row 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>

                    <!-- User and Page column -->
                    <div class="col-md-3">
                        <img src="{{ url('/media/logos/master1.png') }}" alt="User Icon" class="custom-icon">
                        <a href="#" class="breadcrumb-item text-dark"
                            style="font-family: 'OxaniumSemibold';font-size: 20px;">Admin</a>
                        <span class="bullet bg-gray-200 w-5px h-2px"></span>
                        <svg style="margin-bottom: 6px;" width="8" height="13" viewBox="0 0 8 13" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path d="M1.25 12L6.75 6.5L1.25 1" stroke="#404155" stroke-width="1.83333"
                                stroke-linecap="round" stroke-linejoin="round" />
                        </svg>

                        <span style="font-size: 18px;margin-left: 10px;">Exercise</span>
                    </div>

                    <!-- Search box column -->
                    <div class="col-md-4 mt-3 mt-md-0" style="padding-left: 0px;">
                        <div class="input-group flex-nowrap" style="margin-left: 180px;">
                            <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;">
                                    <img src="{{ url('/media/logos/search.png') }}" alt="User Icon"
                                        class="custom-icon h-20px w-20px">
                                </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 Exercise">
                        </div>
                    </div>

                    <!-- Filter column -->
                    <div class="col-md-4 mt-3 mt-md-0" style="text-align: right;margin-left: 70px;">

                        <a href="#" class="btn btn-sm btn-primary text-uppercase filter" data-bs-toggle="modal"
                            data-bs-target="#kt_modal_create_app" id="kt_toolbar_primary_button"
                            style="border-radius: 10px;">Create Exercise</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>

                    </div>

                </div>
                {{-- @if (session('success'))
                    <div class="alert alert-success mt-9">
                        {{ session('success') }}
                    </div>
                @endif --}}
                <hr style="background: #e1e3ec;width: 95%;margin-left: 1.8rem;border: 1px solid #e1e3ec;">
                <div class="card-body pt-0">
                    <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 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 id="mainCheckbox" class="form-check-input custom-checkbox" 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-125px">Title</th>
                                <th class="min-w-125px">Instruction</th>
                                <th class="min-w-125px">Video</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody class="text-gray-600 fw-bold">
                            @foreach ($exercise as $row)
                                <tr>
                                    <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>
                                        {{ $row->exerciseName }}
                                    </td>
                                    <td>
                                        {{ $row->exerciseInfo }}
                                    </td>
                                    <td>{{ $row->videoUrl }}</td>
                                    <td>
                                        <div class="d-flex">
                                            <a href="{{ route('exercise.edit', $row->id) }}" class="text-primary"
                                                data-toggle="tooltip" data-placement="top" title="Edit"
                                                style="margin-right: 26px;margin-left: -13px;">
                                                <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="text-danger" data-toggle="tooltip"
                                                onclick="confirmDelete({{ $row->id }})" data-placement="top"
                                                title="Delete">
                                                <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('exercise.destroy', $row->id) }}" method="POST"
                                            style="display: none;">
                                            @csrf
                                            @method('DELETE')

                                        </form>
                                    </td>
                                </tr>
                            @endforeach

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- </div> -->
        <div class="modal fade" id="kt_modal_create_app" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered mw-900px">
                <div class="modal-content">
                    <div class="modal-header">
                        <h2>Create Exercise</h2>
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                            <span class="svg-icon svg-icon-1">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                        transform="rotate(-45 6 17.3137)" fill="black" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                        transform="rotate(45 7.41422 6)" fill="black" />
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div class="modal-body">
                        <form action="{{ route('exercises.store') }}" method="POST">
                            @csrf
                            <div class="mb-3">
                                <label for="exerciseName" class="form-label">Exercise Title</label>
                                <input type="text" class="form-control" name="exerciseName"
                                    placeholder="Enter exercise name" required>
                            </div>
                            <div class="mb-3">
                                <label for="exerciseInfo" class="form-label">Exercise Instruction</label>
                                <textarea class="form-control adjust_textarea" name="exerciseInfo" rows="3" placeholder="Enter exercise information"></textarea>
                            </div>
                            <div class="mb-3">
                                <label for="selectionBox1" class="form-label">Parameter 1</label>
                                <select class="form-select optional-dropdown" name="selectionBox1">
                                    @foreach ($getParameters as $getParameterKey => $getParameter)
                                        <option value="{{ $getParameterKey }}">{{ $getParameter }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="selectionBox2" class="form-label">Parameter 2</label>
                                <select class="form-select optional-dropdown" name="selectionBox2">
                                    @foreach ($getParameters as $getParameterKey => $getParameter)
                                        <option value="{{ $getParameterKey }}">{{ $getParameter }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="reference_max" class="form-label">Reference Max</label>
                                <select class="form-select optional-dropdown" name="reference_max">
                                    @foreach ($getParameters as $getParameterKey => $getParameter)
                                        <option value="{{ $getParameterKey }}">{{ $getParameter }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="is_calculator" class="form-label">Calculator</label>
                                <select class="form-select optional-dropdown" name="is_calculator">
                                        <option value="0">Off</option>
                                        <option value="1">On</option>
                                </select>
                            </div>
                            <div class="video_section">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="videoTitle" class="form-label">Video Title</label>
                                            <input type="text" class="form-control" name="videoTitle[]"
                                                placeholder="Video Title">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="videoUrl" class="form-label">Video URL</label>
                                            <input type="text" class="form-control" name="videoUrl[]"
                                                placeholder="https://example.com/abc.mp4" required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 text-end">
                                    <button type="button" class="btn btn-primary add_video_section">+ Add</button>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var baseUrl = @json(url('/'));

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

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

        function delete_multiple() {

            if (confirm('Are you sure you want to delete selected exercise?')) {
                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_excercise",
                    type: "POST",
                    data: {
                        ids: checkedValues,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        alert("Excercises Deleted Successfully");
                        window.location.reload();

                    }
                })

                console.log(checkedValues);

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

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

            const maxVideoSection = 5;
            function checkVideoSectionLimit() {
                if ($('input[name="videoTitle[]"]').length >= maxVideoSection) {
                    $('.add_video_section').hide(); // Hide the "Add Input" button
                } else {
                    $('.add_video_section').show(); // Show the button if less than 5 inputs
                }
            }

            $(document).on('click', '.add_video_section', function() {
                $(this).attr("disabled", true);
                var html_field = `<div class="row">
                    <div class="col-md-5">
                        <div class="mb-3">
                            <label for="videoTitle" class="form-label">Video Title</label>
                            <input type="text" class="form-control" name="videoTitle[]"
                                placeholder="Video Title">
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="mb-3">
                            <label for="videoUrl" class="form-label">Video URL</label>
                            <input type="text" class="form-control" name="videoUrl[]"
                                placeholder="https://example.com/abc.mp4" required>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="mb-3">
                            <br>
                            <button type="button" class="mt-2 btn btn-danger remove_video_section">Remove</button>
                        </div>
                    </div>
                </div>`;

                $('.video_section').append(html_field);
                $(this).attr("disabled", false);
                checkVideoSectionLimit();
            });

            $(document).on('click', '.remove_video_section', function() {
                $(this).parent().parent().parent().remove();
                checkVideoSectionLimit();
            });
            checkVideoSectionLimit();
            
            // 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