@extends('layouts.master')

@section('title')
    @lang('translation.yajra-datatable')
@endsection

@section('css')
    <!--datatable css-->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
@endsection

@section('content')
    <div class="bg-white px-4">
        <div class="table-responsive bg-white">
            <div class="d-flex justify-content-between align-items-center">
                <h4 class='py-3 pt-4'>
                    @lang('translation.Plan_Specification')
                </h4>
            </div>
            <style>
                .table-container {
                    height: 60vh !important;
                    overflow: auto;
                }

                .table thead {
                    position: sticky;
                    top: 0;
                    z-index: 1;
                    background-color: white;
                    /* Ensure the header has a background color */
                }

                .table thead th {
                    position: sticky;
                    top: 0;
                    z-index: 2;
                    background-color: white;
                    /* Ensure the header has a background color */
                }
            </style>
            <form id='config-plan'>
                <div class='table-container'>
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>@lang('translation.Plans')</th>
                                @foreach ($plan as $p)
                                    <th>{{ $p->name }}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($plan_spe as $key => $d)
                            <tr>
                                <td>{{ (int) $key + 1 }}</td>
                                <td>{{ $d->name }}</td>
                                @foreach ($plan as $p)
                                    @php
                                        $isChecked = $select->where('plan_id', $p->id)->where('Specification_id', $d->id)->where('status','Y')->isNotEmpty();
                                    @endphp
                                    <td class='text-center'>
                                        <input class='checkbox-input' {{ $isChecked ? 'checked' : '' }} type='checkbox'
                                            name='plan_{{ $p->id }}_spc_{{ $d->id }}'
                                            id='plan_{{ $p->id }}_spc_{{ $d->id }}'>
                                    </td>
                                @endforeach
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="text-end py-3">
                    <button type='button' onclick='submitForm()' class='btn btn-info px-4'>@lang('translation.Submit')</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        function submitForm() {
            // Serialize the form data
            var formData = $('#config-plan').serializeArray();

            // Create an object to hold the data
            var data = {};

            // Add the user_id to the data object
            data['user_id'] = '{{ auth()->user()->id }}';

            // Loop through the serialized form data and add it to the data object
            $.each(formData, function(index, field) {
                data[field.name] = field.value;
            });

            // Send the data via AJAX
            $.ajax({
                url: "{{ env('APP_URL') }}/api/price-and-plan",
                type: 'post',
                data: data,
                success: function(response) {
                    if (response.success == true) {
                        Swal.fire({
                            position: 'center',
                            icon: 'success',
                            title: response.message,
                            showConfirmButton: false,
                            timer: 3500,
                            showCloseButton: true
                        });
                        // alert(response.user_id);
                        // window.location.reload();
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                }
            });
        }
    </script>
@endsection