@extends('admin.layouts.master')
@section('css')
    @include('admin.helper.formscss')
@endsection
@section('page-header')
    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto"> إنشاء وكيل جديد </h4>
            </div>
        </div>
        <div class="d-flex my-xl-auto right-content">
            <a href="{{ route('admin.agents.index') }}" class="btn btn-secondary">
                <x-lucide-arrow-right width="20" height="20" /> العودة للقائمة
            </a>
        </div>
    </div>
    <!-- breadcrumb -->
@endsection
@section('content')
    <!-- row -->
    <div id='blogId'>
        <div>

            <div class="row">
                <div class="col-md-12 col-xl-12 col-xs-12 col-sm-12">

                    <form id='newuser'>
                        <div class="card">
                            <div class="card-body">


                                <div class="row row-sm">
                                    {{-- <div class="col-lg-4 mt-2">
                                        <label class="form-label"> الاسم </label>
                                        <input required class="form-control" name="name" value="" type="text">
                                    </div> --}}
                                    <x-admin.form.input name="name" label="الاسم " col="4" required />
                                    <x-admin.form.input name="phone" label="رقم التليفون " col="4" required />
                                    <x-admin.form.input name="address" label="العنوان " col="4" required />
                                    <x-admin.form.input name="image" label="الصوره " col="4" required
                                        type="file" accept="image/jpeg,image/png,image/jpg,image/gif,image/webp" />
                                    {{-- <div class="col-lg-4 mt-2">
                                        <label class="form-label"> </label>
                                        <input required class="form-control" name="phone" value="" type="text">
                                    </div> --}}
                                    {{-- <div class="col-lg-4 mt-2">
                                        <label class="form-label"> العنوان </label>
                                        <input required class="form-control" name="address" value="" type="text">
                                    </div> --}}
                                    {{-- <div class="col-lg-4 mt-2">
                                        <label class="form-label"> الصوره </label>
                                        <input required class="form-control" name="image" value="" type="file">
                                    </div> --}}
                                    <div class="col-lg-12 mt-3">
                                        <textarea id="elm1" name="note">   </textarea>
                                    </div>

                                </div>
                                <button type="submit" class="btn btn-primary mt-3 mb-0"> حفظ </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- row closed -->
        </div>
        <!-- Container closed -->
    </div>
    <!-- main-content closed -->
@endsection

@section('js')
    @include('admin.helper.formscripts')
    @include('vue')
    <script>
        $(function() {
            $('#newuser').on('submit', function(e) {
                e.preventDefault();

                // التحقق من صحة البيانات
                let name = $('input[name="name"]').val();
                let phone = $('input[name="phone"]').val();
                let address = $('input[name="address"]').val();
                let image = $('input[name="image"]')[0].files[0];

                if (!name || !phone || !address || !image) {
                    Swal.fire('خطأ', 'يرجى ملء جميع الحقول المطلوبة', 'error');
                    return;
                }

                let formData = new FormData(document.getElementById('newuser'));
                const content = tinymce.get('elm1').getContent();
                formData.append('note', content);
                adawe('{{ route('admin.agents.store') }}', formData)
            });

        });
        $(function() {
            $('.select2').select2()
        });
    </script>
@endsection