@extends('admin.layouts.master')

@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>
    <!-- breadcrumb -->
@endsection

@section('css')
    @include('admin.helper.formscss')
@endsection

@section('content')
    <div id='pageid'>
        <div>
            <div class="row">
                <div class="col-md-12 col-xl-12 col-xs-12 col-sm-12">
                    <form id='createext' enctype="multipart/form-data">
                        @csrf
                        <div class="card">
                            <div class="card-body">
                                <div class="row row-sm">
                                    <!-- Basic Information -->
                                    <div class="col-lg-6 mt-2">
                                        <label class="form-label"> اسم الموقع <span class="text-danger">*</span> </label>
                                        <input required name="name" class="form-control" type="text"
                                            placeholder="اسم الموقع الخارجي">
                                    </div>
                                    <div class="col-lg-6 mt-2">
                                        <label class="form-label"> نوع الموقع <span class="text-danger">*</span> </label>
                                        <select required name="type" class="form-control">
                                            <option value="">اختر نوع الموقع</option>
                                            <option value="site">موقع</option>
                                            <option value="script">سكريبت</option>
                                            <option value="internalScript">سكريبت داخلي</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-6 mt-2">
                                        <label class="form-label"> حالة الموقع </label>
                                        <select name="is_active" class="form-control">
                                            <option value="1" selected>نشط</option>
                                            <option value="0">غير نشط</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-6 mt-2">
                                        <label class="form-label"> اسم المدير <span class="text-danger">*</span> </label>
                                        <input required name="admin_name" class="form-control" type="text"
                                            placeholder="اسم مدير الموقع">
                                    </div>
                                    <div class="col-lg-6 mt-2">
                                        <label class="form-label"> API URL <span class="text-danger">*</span> </label>
                                        <input required name="api_url" class="form-control" type="text"
                                            placeholder="https://api.example.com/v1">
                                    </div>
                                    <div class="col-lg-6 mt-2">
                                        <label class="form-label"> Token </label>
                                        <input name="token" class="form-control" type="text" placeholder="API Token">
                                    </div>
                                </div>

                                <hr class="mt-4 mb-4">

                                <!-- Endpoints Configuration -->
                                <div class="row row-sm">
                                    <div class="col-12">
                                        <h5 class="text-primary mb-3"> إعدادات نقاط النهاية (Endpoints) </h5>
                                    </div>

                                    <!-- Products Endpoint -->
                                    <div class="col-lg-6 mt-2">
                                        <label class="form-label"> Products Endpoint <span class="text-danger">*</span>
                                        </label>
                                        <input required name="products_endpoint" class="form-control" type="text"
                                            placeholder="products" value="products">
                                    </div>
                                    <div class="col-lg-6 mt-2">
                                        <label class="form-label"> Products Method <span class="text-danger">*</span>
                                        </label>
                                        <select name="products_http_method" class="form-control">
                                            <option value="GET" selected>GET</option>
                                            <option value="POST">POST</option>
                                        </select>
                                    </div>

                                    <!-- Order Endpoint -->
                                    <div class="col-lg-6 mt-2">
                                        <label class="form-label"> Order Endpoint <span class="text-danger">*</span>
                                        </label>
                                        <input required name="order_endpoint" class="form-control" type="text"
                                            placeholder="orders" value="orders">
                                    </div>
                                    <div class="col-lg-6 mt-2">
                                        <label class="form-label"> Order Method <span class="text-danger">*</span> </label>
                                        <select name="order_http_method" class="form-control">
                                            <option value="GET">GET</option>
                                            <option value="POST" selected>POST</option>
                                        </select>
                                    </div>

                                    <!-- Status Endpoint -->
                                    <div class="col-lg-6 mt-2">
                                        <label class="form-label"> Status Endpoint (للاستعلام عن الأوردر) <span
                                                class="text-danger">*</span> </label>
                                        <input required name="status_endpoint" class="form-control" type="text"
                                            placeholder="status" value="status">
                                    </div>
                                    <div class="col-lg-6 mt-2">
                                        <label class="form-label"> Status Method <span class="text-danger">*</span> </label>
                                        <select name="status_http_method" class="form-control">
                                            <option value="GET" selected>GET</option>
                                            <option value="POST">POST</option>
                                        </select>
                                    </div>

                                    <!-- Balance Endpoint -->
                                    <div class="col-12 mt-4">
                                        <h5 class="text-primary mb-1"> إعدادات رصيد الموقع (اختياري) </h5>
                                        <p class="text-muted small mb-0">لن يتم تحديث الرصيد إلا إذا قمت بتحديد كل من نقطة
                                            النهاية ومفتاح القاعدة.</p>
                                    </div>
                                    <div class="col-lg-6 mt-2">
                                        <label class="form-label"> Balance Endpoint </label>
                                        <input name="balance_endpoint" class="form-control" type="text"
                                            placeholder="balance">
                                    </div>
                                    <div class="col-lg-3 mt-2">
                                        <label class="form-label"> Balance Method </label>
                                        <select name="balance_http_method" class="form-control">
                                            <option value="GET" selected>GET</option>
                                            <option value="POST">POST</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-3 mt-2">
                                        <label class="form-label"> مفتاح القاعدة (config/site_rules.php) </label>
                                        <input name="balance_rule" class="form-control" type="text"
                                            placeholder="مثال: default">
                                    </div>
                                </div>

                                <hr class="mt-4 mb-4">

                                <!-- Headers Configuration -->
                                <div class="row row-sm">
                                    <div class="col-12">
                                        <h5 class="text-primary mb-3"> إعدادات Headers </h5>
                                        <div class="alert alert-info">
                                            <strong>ملاحظة:</strong> يمكنك استخدام %token% في القيم وسيتم استبدالها بالتوكن
                                            الفعلي.
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div id="headers-container">
                                            <!-- Default headers -->
                                            <div class="row header-row mb-2">
                                                <div class="col-5">
                                                    <input type="text" value="api-token" placeholder="Header Key"
                                                        class="form-control header-key">
                                                </div>
                                                <div class="col-5">
                                                    <input type="text" value="%token%" placeholder="Header Value"
                                                        class="form-control header-value">
                                                </div>
                                                <div class="col-2">
                                                    <button type="button" class="btn btn-danger btn-sm remove-header">
                                                        <x-lucide-trash-2 width="20" height="20" />
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <button type="button" class="btn btn-success btn-sm" id="add-header">
                                            <x-lucide-plus width="20" height="20" /> إضافة Header
                                        </button>
                                    </div>
                                </div>

                                <div class="text-center mt-4">
                                    <button type="submit" class="col-4 btn btn-primary mt-3 mb-0">
                                        <x-lucide-save width="20" height="20" /> حفظ الموقع
                                    </button>
                                    <a href="{{ route('admin.external-sites.index') }}"
                                        class="col-4 btn btn-secondary mt-3 mb-0">
                                        <x-lucide-arrow-left width="20" height="20" /> رجوع
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('vue')
    @include('admin.helper.formscripts')
    <script>
        $(function() {
            $('#createext').on('submit', function(e) {
                e.preventDefault();
                let formData = new FormData(document.getElementById('createext'));

                // Collect headers data
                let headersData = {};
                $('.header-row').each(function() {
                    let key = $(this).find('.header-key').val();
                    let value = $(this).find('.header-value').val();
                    if (key && value) {
                        headersData[key] = value;
                    }
                });

                // Add headers to formData
                formData.append('headersData', JSON.stringify(headersData));

                adawe('{{ route('admin.external-sites.store') }}', formData)
            });

            // Add header functionality
            $('#add-header').on('click', function() {
                const headerRow = `
                    <div class="row header-row mb-2">
                        <div class="col-5">
                            <input type="text" placeholder="Header Key" class="form-control header-key">
                        </div>
                        <div class="col-5">
                            <input type="text" placeholder="Header Value" class="form-control header-value">
                        </div>
                        <div class="col-2">
                            <button type="button" class="btn btn-danger btn-sm remove-header">
                                <x-lucide-trash-2 width="20" height="20" />
                            </button>
                        </div>
                    </div>
                `;
                $('#headers-container').append(headerRow);
            });

            // Remove header functionality
            $(document).on('click', '.remove-header', function() {
                $(this).closest('.header-row').remove();
            });
        });

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