@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;
  }
</style>
<div class="post d-flex flex-column-fluid" id="kt_post">
    <div id="kt_content_container" class="container-xxl" style="">

        {{-- @if(session('success'))
        <div class="alert alert-success mt-9">
            {{ session('success') }}
        </div>
        @endif --}}
        <div class="card" style="margin: 30px 30px 30px 30px;border-radius: 22px;box-shadow: none;">
            <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">
                <div class="col-md-4">
                    <img src="{{url('/media/logos/master1.png')}}" alt="User Icon" class="custom-icon" style="margin-bottom:3px;">
                    <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: 2px;margin-left: 5px;" 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;">Programs</span>
                </div>
                <div class="col-md-7">
                    <ul class="breadcrumb breadcrumb-separatorless fw-bold fs-7 my-1">
                        <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 Programs">
                            </div>
                        </li>
                        <li>
                            <a href="{{ url('/create_team') }}" 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 PROGRAM</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>
            </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-75px">ID</th>
                            <th class="min-w-120px" style="text-transform: none;padding-left: 60px;">Title</th>
                            <th style="text-align: center; text-transform: none;" class="min-w-150px">Planned Sessions</th>
                            <th style="text-align: center; text-transform: none;" class="min-w-150px">Order Number</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($team 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"  onclick="window.location='{{ route('full-calender', $row->id) }}';">{{ $rowCount++ }}</td>
                            <td style="color: #2c2c2e; word-wrap: break-word;"  onclick="window.location='{{ route('full-calender', $row->id) }}';">
                                <div class="d-flex align-items-center">
                                    <div class="symbol symbol-40px me-4">
                                        <div class="symbol-label fs-2 fw-semibold bg-danger text-inverse-danger" style="font-size: 16px !important;background: #8C3EFF !important; display: flex; align-items: center; justify-content: center;">
                                            {{ strtoupper(substr($row->team_name, 0, 2)) }}
                                        </div>
                                    </div>
                                    <div>
                                        <a href="{{ route('full-calender', $row->id) }}" class="text-decoration-none mb-2" style="white-space: normal; color: #2c2c2e;">
                                            {{ $row->team_name }}
                                        </a>
                                        <div style="color: #8D99AE; margin-top: 5px;">
                                            {{ $row->description }}
                                        </div>
                                    </div>
                                </div>
                            </td>

                            <td onclick="window.location='{{ route('full-calender', $row->id) }}';" style="text-align: center;color:#2c2c2e">{{ $row->program_details->groupBy('created_for') ? count($row->program_details->groupBy('created_for')) : 0 }}</td>
                            <td onclick="window.location='{{ route('full-calender', $row->id) }}';" style="text-align: center;color:#2c2c2e">{{ $row->order_number }}</td>
                            <td onclick="window.location='{{ route('full-calender', $row->id) }}';" 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('team.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('team.destroy', $row->id) }}" method="POST" style="display: none;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="button" onclick="confirmDelete('{{ $row->id }}')">Delete Team</button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>

                </table>

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

<script>
      var baseUrl = @json(url('/'));
    function confirmDelete(teamId) {
        var confirmation = confirm('Are you sure you want to delete this team?');

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

    function delete_multiple(){
        
        if (confirm('Are you sure you want to delete selected programs?')) {
            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_teams",
                type: "POST",
                data: {
                    ids: checkedValues,
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    alert("Programs 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