@extends('layouts.app')

@section('content')
    <div class="modal fade" id="modal-default">
        <div class="modal-dialog">
            <div class="modal-content" id="modalContent">

            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>


    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ $page_title }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">{{ $module_title }}</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">{{ $module_title }}</h3>
                            <a href="#" data-url="{{ $import_url }}" class="btn btn-success" style="float: right;"
                                data-toggle="modal" data-target="#modal-default">
                                Validate Esi, PF
                            </a>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <table id="example1" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Client</th>
                                        <th>Location</th>
                                        <th>Month</th>
                                        <th>Year</th>
                                        <th>Status</th>
                                        <th>Is Processed</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                        <!-- /.card-body -->
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        $(function() {
            var table = $('#example1').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: @json($data_table_url),
                    data: function(d) {
                        d.name = $('#filter_name').val();
                    }
                },
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'client_name',
                        name: 'client_name'
                    },
                    {
                        data: 'location_name',
                        name: 'location_name'
                    },
                    {
                        data: 'month',
                        name: 'month'
                    },
                    {
                        data: 'year',
                        name: 'year'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'is_processed',
                        name: 'is_processed'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
                order: [
                    [0, 'desc']
                ]
            });

            $('#filter_name').keyup(function() {
                table.draw();
            });
        });
        $(document).on('click', '[data-toggle="modal"][data-target="#modal-default"]', function(e) {

            const url = $(this).data('url');
            const modal = $('#modal-default');
            const modalBody = modal.find('#modalContent');


            // Optional: show loading spinner
            modalBody.html('<div class="text-center p-5"><i class="fas fa-spinner fa-spin"></i> Loading...</div>');

            // Load content via AJAX
            $.ajax({
                url: url,
                method: 'GET',
                success: function(response) {
                    modalBody.html('');
                    modalBody.html(response);
                },
                error: function(xhr) {
                    modalBody.html('<div class="alert alert-danger">Failed to load content.</div>');
                }
            });
        });
    </script>


    <script>
        $('#modalContent').on("change", "#client_id", function() {
            // alert('hai');
            var clientId = $(this).val();
            var dataUrl = $(this).data("url");

            if (clientId) {
                var finalUrl = dataUrl.replace("__ID__", clientId);
                $.ajax({
                    url: finalUrl,
                    type: "GET",
                    dataType: "json",
                    success: function(response) {
                        // alert('hai');
                        if (response.success) {
                            console.log(response);

                            var locationDropdown = $("#client_location");
                            locationDropdown.empty();

                            locationDropdown.append(
                                '<option value="">Select Location</option>'
                            );

                            $.each(response.data, function(key, value) {
                                locationDropdown.append(
                                    '<option value="' +
                                    key +
                                    '">' +
                                    value +
                                    "</option>"
                                );
                            });
                        } else {
                            $("#client_location").html(
                                '<option value="">Select Location</option>'
                            );
                        }
                    },
                    error: function() {
                        $("#client_location").html(
                            '<option value="">Select Location</option>'
                        );
                        console.error("Failed to fetch client location.");
                    },
                });
            } else {
                $("#client_location").val("");
            }
        });
    </script>
@endpush