@extends('layouts.admin')

@section('styles')
@endsection


@section('content')
    <div class="container-fluid">

        <style>
            .table thead tr td {
                padding: 0px 0px 15.2px 0px;
            }
        </style>

        <div class="row">

            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-10">
                                @include('elements.admin-breadcrumb')
                            </div>
                            <div class="col-2 text-end">
                                <a class="btn btn-primary" href="{{ route('admin.export.workshopRegistrationsReport') }}"><i class="fa-solid fa-file-export"></i> Export</a>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        @include('elements.alert')

                            <form class="mb-15" id="kt_Location_delete" action="" method="POST">
                                @csrf
                                @method('post')

                                <table class="table  w-100 nowrap  no-footer">
                                    <tbody>
                                        <tr>

                                            <td  class="col-md-4">
                                                <select id="filter_workshop" class="form-select form-control-sm datatable-input select2" data-toggle="select2">
                                                    <option value="">- Select Workshop -</option>
                                                    @foreach ($workshops as $workshops)
                                                        <option value="{{ $workshops->id }}">{{ $workshops->title }}</option>
                                                    @endforeach
                                                </select>
                                            </td>

                                            <td class="col-md-2">
                                                <input type="date" id="start_date" class="form-control form-control-sm datatable-input" style="padding: 8px;" />
                                            </td>
                                            <td class="col-md-2">
                                                <input type="date" id="end_date" class="form-control form-control-sm datatable-input" style="padding: 8px;"/>
                                            </td>

                                            <td>
                                                <button type="button" class="btn btn-dark" id="kt_reset">Reset</button>
                                                <button class="btn btn-danger" id="kt_delete" style="display: none"
                                                    type="submit" name="submit" value="delete">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

                                <table id="common_datatable" class="table table-striped w-100"
                                    data-column="id,workshop_title,book_date,start_time,end_time,bookread,watchvideo,exam_score,first_name,last_name,email,phone,created_at"
                                    data-column-name="id,workshop_title,book_date,start_time,end_time,bookread,watchvideo,exam_score,first_name,last_name,email,phone,created_at,actions"
                                    data-extra-param="start_date,end_date,filter_workshop"
                                    data-extra-param-name="start_date,end_date,filter_workshop"
                                    data-control="{{ route('admin.register_workshop.list') }}" data-sorting="5"
                                    data-sorting-type="DESC" data-serial-number="1" data-except-sorting-columns="9"
                                    role="grid" aria-describedby="common_datatable_info">
                                    <thead>
                                        <tr>
                                            <th>
                                                <input class="form-check-input" type="checkbox" name="checkAll" id="checkAll">
                                            </th>
                                            <th>Workshop Title</th>
                                            <th>Booked Date</th>
                                            <th>Start Time</th>
                                            <th>End Time</th>
                                            <th>Book Read</th>
                                            <th>Watch Video</th>
                                            <th>Exam Score</th>
                                            <th>First Name</th>
                                            <th>Last Name</th>
                                            <th>Email</th>
                                            <th>Phone</th>
                                            <th>Date</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                        </div>
                    </form>
                </div> <!-- end card body-->
            </div> <!-- end card -->
        </div><!-- end col-->
    </div> <!-- end row-->

    </div>

    <div class="modal fade" id="editTrackingIdModal" tabindex="-1" aria-labelledby="editTrackingIdModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Tracking Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('admin.workshop.edit-tracking-id') }}" method="POST">
                        @csrf
                        <input type="hidden" name="workshopRegisterId" id="workshopRegisterId">
                        <div class="mb-3">
                            <div class="form-group">
                                <label class="form-label" for="tracking_id">Tracking Id: </label>
                                <input type="text" name="tracking_id" id="tracking_id" class="form-control" placeholder="Enter Tracking Id" required>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="form-group">
                                <label class="form-label" for="tracking_url">Tracking URL: </label>
                                <input type="text" name="tracking_url" id="tracking_url" class="form-control" placeholder="Enter Tracking URL" required>
                            </div>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('scripts')

<script>
    $(document).ready(function () {
        // Show modal and fetch tracking ID
        $('#editTrackingIdModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var workshopRegisterId = button.data('id');

            // Set hidden input
            $("#editTrackingIdModal #workshopRegisterId").val(workshopRegisterId);

            // Clear the input first
            $("#editTrackingIdModal #tracking_id").val('');
            $("#editTrackingIdModal #tracking_url").val('');

            // Fetch existing tracking_id via AJAX
            $.ajax({
                url: '{{ route("admin.workshop.get-tracking-id") }}',
                method: 'POST',
                data: {
                    workshopRegisterId: workshopRegisterId,
                    _token: '{{ csrf_token() }}'
                },
                success: function (response) {
                    if (response.success) {
                        $("#editTrackingIdModal #tracking_id").val(response.tracking_id);
                        $("#editTrackingIdModal #tracking_url").val(response.tracking_url);
                    }
                },
                error: function (xhr) {
                    console.error("Failed to fetch tracking ID:", xhr.responseText);
                }
            });
        });

        // Reset form when modal is hidden
        $('#editTrackingIdModal').on('hidden.bs.modal', function () {
            $(this).find('form')[0].reset();
        });
    });
</script>

@endsection