@extends('Common::admin.layout.page')
@section('page')
<form action="{{ $action }}" method="post" enctype="multipart/form-data" class="action_form" novalidate>
    @foreach (request()->query() as $key => $val)
    <input type="hidden" name="{{ $key }}" value="{{ $val }}">
    @endforeach
    @if ($method == 'put')
    {{ method_field('put') }}
    @endif
    @csrf

    <style>
        /* Container Card Styling */
        .card.custom-shadow {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
            /* شلنا الـ padding من هنا عشان الهيدر يلمس الحواف */
            border-radius: 8px;
            border: none;
            overflow: hidden;
            /* بتضمن إن لون الهيدر ياخد نفس دوران زوايا الكارد وميطلعش براها */
        }

        /* Grouping & Spacing */
        .form-group {
            margin-bottom: 24px;
            /* Increased separation between groups */
        }

        /* Visual Hierarchy: Labels */
        .form-group label {
            font-weight: 600 !important;
            color: #333333 !important;
            margin-bottom: 8px !important;
            /* Closer to input */
            display: block;
            font-size: 14px;
        }

        .card-footer .btn-primary {
            background-color: #007bff !important;
            /* حط كود اللون اللي يعجبك هنا */
            border-color: #007bff !important;
            /* نفس كود اللون للإطار */
        }

        /* لون الزرار لما تقف عليه بالماوس (يفضل يكون درجة أغمق شوية) */
        .card-footer .btn-primary:hover {
            background-color: #0f6acdff !important;
            border-color: #0f6acdff !important;
        }

        /* Input Fields Styling */
        .form-control,
        .select2-selection {
            background-color: #ffffff !important;
            border: 1px solid #ced4da !important;
            border-radius: 6px !important;
            padding: 10px 12px;
            /* Comfortable padding */
            height: auto;
            /* Allow padding to define height if needed */
            box-shadow: none;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        .form-control:focus,
        .select2-container--default.select2-container--open .select2-selection--single {
            border-color: #ced4da !important;
            /* ابقِ على لون الإطار الرمادي أو اختر لوناً آخر */
            outline: 0;
            box-shadow: none !important;
            /* إزالة التظليل */
            background-color: #ffffff !important;
            /* لضمان بقاء الخلفية بيضاء دائمًا */
        }

        /* Placeholder Styling */
        .form-control::placeholder {
            color: #999999 !important;
            opacity: 1;
            font-weight: 400;
        }

        /* Select2 specific tweaks to match */
        .select2-container .select2-selection--single {
            height: 38px !important;
            /* Match standard input height */
            padding: 5px;
        }

        /* Card Header Styling */
        .card-header {
            background-color: #007bff !important;
            /* Bootstrap Primary Blue */
            color: #ffffff !important;
            padding: 15px 20px !important;
            border-bottom: none;
            margin-bottom: 25px !important;
            /* المسافة اللي طلبتها بين الهيدر واللي تحته */
        }

        /* Card Body Styling (عشان نعوض المسافة اللي شلناها من الكارد الأساسي) */
        .card-body {
            padding: 20px 30px 30px 30px !important;
            /* مسافة 30 بيكسل من اليمين والشمال والأسفل */
        }

        .card-title {
            font-weight: 600;
            font-size: 1.1rem;
            margin: 0;
        }
    </style>

    <div class="col-sm-12">
        <div class="card card-primary custom-shadow bg-white">
            <div class="card-header">
                <h3 class="card-title">{{ __($title) }} [ {{ $method == 'post' ? __('Add') : __('Edit') }} ]</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    @foreach ($inputs as $myname => $input)
                    <div class="col-md-6">
                        <x-input :input="$input" :name="$myname" :model="$model" lang="all" />
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-12">
        @include('Common::admin.form.includes')
        @include('Common::admin.form.images')
        @include('Common::admin.form.map')
    </div>

    <div class="col-sm-12">
        <div class="card">
            <div class="card-footer">
                <button type="submit" class="btn btn-primary"> <span>{{ __('Save') }}</span>
                    <i class="fas fa-save"></i></button>
            </div>
        </div>
    </div>
</form>
@if (!count(request()->query()) && (!isset($isSetting) || !$isSetting) && !$model->id)
<script>
    $(".select2").val('').trigger('change');
</script>
@endif
<script>
    $('.select2').select2({
        allowClear: true,
        placeholder: function() {
            $(this).data('placeholder');
        }
    });

    $(document).ready(function() {
        var masters = @json($masters);
        var players = @json($players);
        var selectedOrganizer = "{{ $model->organizer_user_id ?? '' }}";

        function updateOrganizerList() {
            var accessibility = $('select[name="Accessibility"]').val();
            var organizerSelect = $('select[name="organizer_user_id"]');
            organizerSelect.empty();

            // Add default placeholder option if needed
            // organizerSelect.append('<option value="">{{ __("Select Organizer") }}</option>');

            var options = {};
            if (accessibility === 'Public') {
                options = players;
            } else if (accessibility === 'Private') {
                options = masters;
            }

            $.each(options, function(key, value) {
                var isSelected = (key == selectedOrganizer) ? 'selected' : '';
                organizerSelect.append('<option value="' + key + '" ' + isSelected + '>' + value + '</option>');
            });

            // Refresh Select2 if it's being used
            if (organizerSelect.hasClass('select2-hidden-accessible')) {
                organizerSelect.trigger('change');
            }
        }

        // Listen for changes
        $('select[name="Accessibility"]').on('change', function() {
            updateOrganizerList();
        });

        // Initial load
        // Only run if we are editing or if Accessibility has a value, 
        // but be careful not to overwrite if the user just failed validation (old input).
        // For now, let's trigger it to ensure consistency.
        if ($('select[name="Accessibility"]').val()) {
            updateOrganizerList();
        }
    });
</script>
@stop