@extends('layouts.app')

<link rel="stylesheet" href="{{ asset('vendor/css/dropzone.min.css') }}">
@section('content')
<div class="row">
    <div class="col-sm-12">
        <form action="{{route('test_drive_location.store')}}" method="post">
            @csrf
            <div class="add-client bg-white rounded">
                <h4 class="mb-0 p-20 f-21 font-weight-normal text-capitalize border-bottom-grey">
                    @lang('app.test_drive_location')</h4>
                <div class="row p-20">

                    <div class="col-lg-6 col-md-6">
                        <x-forms.text :fieldLabel="__('app.location_name_en')" fieldName="location_name_en"
                                      fieldId="location_name_en" :fieldPlaceholder="__('app.location_name_en')" fieldRequired="true" />
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <x-forms.text :fieldLabel="__('app.location_name_ar')" fieldName="location_name_ar"
                                      fieldId="location_name_ar" :fieldPlaceholder="__('app.location_name_ar')" fieldRequired="true">
                        </x-forms.text>
                    </div>

                    <div class="col-lg-6 col-md-6">
                        <x-forms.select fieldId="assigned_task_to" fieldName="assigned_task_to" :fieldLabel="__('app.assigned_task_to')"
                                        search="true">
                            <option value="" selected disabled>{{__('app.nothing_selected')}}</option>
                            @foreach($employees as $employee)
                                @php $user = DB::table('users')->where('id',$employee->user_id)->first(); @endphp
                                <option value="{{$employee->user_id}}">{{$user ?->name}}</option>
                            @endforeach
                        </x-forms.select>
                    </div>
                    <style>
                        table {
                            border-collapse: collapse;
                            width: 100%;
                        }

                        th, td {
                            border: 1px solid black;
                            padding: 8px;
                            text-align: center;
                        }

                        th {
                            background-color: #f2f2f2;
                        }
                    </style>
                    <div class="col-lg-6 col-md-6">
                        <label>{{__('app.send_notification_to')}}</label>
                        <table>
                            <thead>
                            <tr>
                                <th>{{__('app.select')}}</th>
                                <th>{{__('app.name')}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($employees as $employee)
                                @php $user = DB::table('users')->where('id',$employee->user_id)->first(); @endphp
                                <tr>
                                    <td><input type="checkbox" class="employee-checkbox" name="send_notification_to[]" value="{{$employee->user_id}}"></td>
                                    <td>{{$user ?->name}}</td>
                                </tr>
                            @endforeach

                            </tbody>
                        </table>
                    </div>
                    <div class="col-lg-12 col-md-6">
                        <button type="submit" class="btn btn-primary">{{__('app.save')}}</button>
                    </div>
                </div>
            </div>

        </form>
    </div>
</div>
<script>
    // JavaScript to handle checkbox selection logic
    const checkboxes = document.querySelectorAll('.employee-checkbox');

    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', () => {
            // You can handle checkbox changes here
            if (checkbox.checked) {
                // Checkbox is checked, you can do something with the selected employee
                console.log('Selected Employee ID: ' + checkbox.parentElement.nextElementSibling.textContent);
            } else {
                // Checkbox is unchecked
            }
        });
    });
</script>
@endsection