@extends('admin.layouts.app')

@section('crumb')
    <x-bread-crumb :breadcrumbs="[
        ['text' => 'Push Notification', 'link' => route('admin.push_notification.index')],
        ['text' => getLastKeyRoute(request()->route()->getName())],
    ]" :button="['text' => 'Go To All Notification', 'link' => route('admin.push_notification.index')]">
    </x-bread-crumb>
@endsection

@section('content')
    <!--begin::Content-->
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">

        <!--begin::Post-->
        <div class="post d-flex flex-column-fluid" id="kt_post">
            <!--begin::Container-->
            <div id="kt_content_container" class="container-xxl">
                <!--begin::Card-->
                <div class="card">
                    <!--begin::Card header-->
                    <div class="card-header border-0 pt-6">

                        <!--begin::Card body-->

                        <div class="card-body pt-0">
                            <!--begin::Form-->
                            <form action="{{ route('admin.push_notification.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf


                                <!--begin::Input group-->
                                <div class="fv-row mb-10">
                                    <div class="row">

                                        <div class="col-6">
                                            <label class="fs-5 fw-bold form-label mb-5">Title:</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input type="text" class="form-control form-control-solid"
                                                value="{{ old('title') }} " placeholder="Title" name="title" />
                                            @error('title')
                                                <span class="text-danger" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>

                                        <div class="col-6">
                                            <label class="fs-5 fw-bold form-label mb-5"> Users :</label>
                                            <select name="clients" class="form-select"
                                                onchange="toggleUserField(this.value)">
                                                <option value="users">All Users</option>
                                                {{-- <option value="specific_user">Specific User</option> --}}
                                            </select>
                                            @error('clients')
                                                <span class="text-danger" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>

                                        <div class="col-6" id="userField" style="display:none;">
                                            <label class="fs-5 fw-bold form-label mb-5">Select User:</label>
                                            <select name="user_id" id="user-select" class="form-select"
                                                style="width: 100%;">
                                                <option value="">Select a user</option>
                                            </select>
                                            @error('user_id')
                                                <span class="text-danger" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>

                                        <div class="col-12">
                                            <label class="fs-5 fw-bold form-label mb-5">Message:</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <textarea name="message" class="form-control" cols="5" rows="5"></textarea>
                                            @error('message')
                                                <span class="text-danger" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                     

                                    </div>
                                    <!--begin::Label-->
                                </div>
                                <!--end::Input group-->

                                <!--begin::Actions-->
                                <div class="text-center">
                                    <button type="submit" class="btn btn-primary">
                                        <span class="indicator-label">Send</span>
                                    </button>
                                </div>
                                <!--end::Actions-->

                            </form>
                            <!--end::Form-->
                        </div>
                        <!--end::Card body-->
                    </div>
                    <!--end::Card-->
                </div>
                <!--end::Container-->
            </div>
            <!--end::Post-->
        </div>
        <!--end::Content-->

    </div>
@endsection

@push('admin_js')
    <script>
        function toggleUserField(value) {
            document.getElementById('userField').style.display = value === 'specific_user' ? 'block' : 'none';
        }

        $(document).ready(function() {
            $('#user-select').select2({
                placeholder: 'Search for a user',
                ajax: {
                    url: '{{ route('admin.users.search') }}', // Update with your search route
                    dataType: 'json',
                    delay: 250,
                    processResults: function(data) {
                        return {
                            results: data.map(user => ({
                                id: user.id,
                                text: user.name
                            }))
                        };
                    },
                    cache: true
                }
            });
        });
    </script>
@endpush