@php 
        $pageName = "application";
    $subpageName = "workshop_list";  
@endphp

@extends('layouts.app')

@section('css')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <style>
        #indicatorContainer {
            max-height: 70vh;
            overflow-y: auto;
        }

        .indicator-inner-table td {
            word-wrap: break-word;
            white-space: normal;
        }
    </style>
@endsection

@section('content')

    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4 class="fw-bold">List Workshops</h4>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-divide mb-0">
                        <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="#">Workshops</a></li>
                        <li class="breadcrumb-item active">List Workshop </li>
                    </ol>
                </nav>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                @if(Session::has('message'))
                    <div class="alert alert-solid-success d-flex align-items-center" role="alert">
                        <span class="alert-icon rounded">
                            <i class="ti ti-check"></i>
                        </span>
                        {{session('message')}}
                    </div>
                @endif

                <form method="GET" class="mb-3">
                    <div class="row">
                        <div class="col-md-3">
                            <label>Category</label>
                            <select name="category_id" id="category_id" class="form-control changecategory">
                                <option value="">Select Category</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label>Type</label>
                            <select name="type_id" id="type_id" class="form-control workshop_type">
                                <option value="">Select Type</option>
                                @foreach($types as $type)
                                    <option value="{{ $type->id }}">{{ $type->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label>&nbsp;</label>
                            <button class="btn btn-primary w-100">Search</button>
                        </div>
                    </div>
                </form>

                <table class="table table-bordered" id="diagnosticsTable">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Title</th>
                            <th>Type</th>
                            <th>City</th>
                            <th>Venue</th>
                            <th>Participants</th>
                            <th>Date</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($workshops as $item)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $item->ttle ?? '' }} </td>
                                <td>{{ $item->typename->name ?? '' }}</td>
                                <td>{{ $item->city ?? '' }}</td>
                                <td>{{ $item->venue ?? '' }}</td>
                                <td>{{ $item->particiants ?? '' }}</td>
                                <td>{{ \Carbon\Carbon::parse($item->start_date)->format('j M Y') }} -
                                    {{ \Carbon\Carbon::parse($item->end_date)->format('j M Y') }}</td>
                                <td>
                                    <a data-bs-toggle="modal" data-bs-target="#smallModal"
                                        data-url="{{ route('show-participants', $item->id) }}"
                                        class="btn btn-info btn-sm">Participants</a>
                                    <a data-bs-toggle="modal" data-bs-target="#bigModal"
                                        data-url="{{ route('show-facilitators', $item->id) }}"
                                        class="btn btn-success btn-sm">Facilitators</a>

                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>

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

  <div class="modal fade" id="bigModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            
            <div class="modal-header">
                <h5 class="modal-title">Select Facilitators</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body" id="facilitatorContainer">
             
            </div>

        </div>
    </div>
</div>
<div class="modal fade" id="smallModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            
            <div class="modal-header">
                <h5 class="modal-title">List Participants</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body" id="participantContainer">
               
             
            </div>

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






@endsection

@section('scripts')


    <script>
        $(document).ready(function () {
            $('#diagnosticsTable').DataTable();
        });
    </script>

    


 <script>
  $(document).on('click', '[data-bs-target="#bigModal"]', function () {
    let url = $(this).data('url');
    $('#facilitatorContainer').html('<p class="text-center">Loading...</p>');

    $.get(url, function (html) {
        $('#facilitatorContainer').html(html);

        if ($.fn.DataTable.isDataTable('#facilitatorsTable')) {
            $('#facilitatorsTable').DataTable().destroy();
        }

        $('#facilitatorsTable').DataTable({
            paging: true,
            searching: true,
            ordering: true,
            info: false,
            lengthChange: false
        });
    }).fail(function () {
        $('#facilitatorContainer').html('<div class="alert alert-danger text-center">Failed to load data.</div>');
    });
});



$(document).on('submit', '#saveFacilitatorsForm', function (e) {
    e.preventDefault();

    let form = $(this);
    let workshopId = form.data('id');
    let url = '/save-facilitators/' + workshopId;

    $.ajax({
        url: url,
        method: 'POST',
        data: form.serialize(),
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        success: function () {
            alert('Facilitators saved successfully!');
            $('#bigModal').modal('hide');
        },
        error: function () {
            alert('Failed to save facilitators.');
        }
    });
});

 </script>

  <script>
  $(document).on('click', '[data-bs-target="#smallModal"]', function () {
    let url = $(this).data('url');
    $('#participantContainer').html('<p class="text-center">Loading...</p>');

    $.get(url, function (html) {
        $('#participantContainer').html(html);

        if ($.fn.DataTable.isDataTable('#participantsTable')) {
            $('#participantsTable').DataTable().destroy();
        }

        $('#participantsTable').DataTable({
            paging: true,
            searching: true,
            ordering: true,
            info: false,
            lengthChange: false
        });
    }).fail(function () {
        $('#participantContainer').html('<div class="alert alert-danger text-center">Failed to load data.</div>');
    });
});



$(document).on('submit', '#saveParticipantsForm', function (e) {
    e.preventDefault();

    let form = $(this);
    let workshopId = form.data('id');
    let url = '/save-participants/' + workshopId;

    $.ajax({
        url: url,
        method: 'POST',
        data: form.serialize(),
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        success: function () {
            alert('Participants saved successfully!');
            $('#smallModal').modal('hide');
        },
        error: function () {
            alert('Failed to save participants.');
        }
    });
});

 </script>


    <script>
        $(document).ready(function () {
            $(document).on('change', '.changecategory', function () {
                var cat_id = $(this).val();

                var div = $(this).parent();

                var op = '';
                $.ajax({
                    type: 'get',
                    url: '{!!URL::to('findWorkshopTypeData')!!}',
                    data: { 'id': cat_id },
                    success: function (data) {
                        console.log(data);

                        op += '<option value="0" selected disabled>Select Type</option>';
                        for (var i = 0; i < data.length; i++) {
                            op += '<option value="' + data[i].id + '">' + data[i].name + '</option>';

                        }
                        $(".workshop_type").html(op);

                    },
                    error: function () {
                    }
                });
            });

        });
    </script>
'
    <script>
        $(document).ready(function () {
            $(document).on('change', '.changetype', function () {
                var type_id = $(this).val();

                var div = $(this).parent();

                var op = '';
                $.ajax({
                    type: 'get',
                    url: '{!!URL::to('findWorkshopTitleData')!!}',
                    data: { 'id': type_id },
                    success: function (data) {
                        console.log(data);

                        op += '<option value="0" selected disabled>Select Title</option>';
                        for (var i = 0; i < data.length; i++) {
                            op += '<option value="' + data[i].id + '">' + data[i].name + '</option>';

                        }
                        $(".workshop_title").html(op);

                    },
                    error: function () {
                    }
                });
            });

        });
    </script>'

  

@endsection