@csrf
<div class="flex">
    <div class="label-field"><label>
        <span>{{ __("Status") }}</span>
        <select name="status" required>
            <option value="active" {{ isset($subscription) && $subscription && $subscription->status == 'active' ? 'selected' : '' }}>{{ __("Active") }}</option>
            <option value="inactive" {{ isset($subscription) && $subscription && $subscription->status == 'inactive' ? 'selected' : '' }}>{{ __("Inactive") }}</option>
        </select>
    </label></div>
</div>
<div class="flex">
    <div class="label-field"><label>
        <span>{{ __("Name(English)") }}</span>
        <input type="text" placeholder="" value="{{ isset($subscription) && $subscription ? $subscription->name_english : '' }}" name="name_english" required>
    </label></div>
    <div class="label-field"><label>
        <span>{{ __("Name(Chinese)") }}</span>
        <input type="text" placeholder="" value="{{ isset($subscription) && $subscription ? $subscription->name_chinese : '' }}" name="name_chinese" required>
    </label></div>
</div>
<div class="flex">
    <div class="label-field"><label>
        <span>{{ __("Period(English)") }}</span>
        <select name="period_english" required>
            <option value="annually" {{ isset($subscription) && $subscription && $subscription->period_english == 'annually' ? 'selected' : '' }}>Annually</option>
            <option value="monthly" {{ isset($subscription) && $subscription && $subscription->period_english == 'monthly' ? 'selected' : '' }}>Monthly</option>
            <option value="daily" {{ isset($subscription) && $subscription && $subscription->period_english == 'daily' ? 'selected' : '' }}>Daily</option>
        </select>
    </label></div>
    <div class="label-field"><label>
        <span>{{ __("Period(Chinese)") }}</span>
        <select name="period_chinese" required>
            <option value="每年" {{ isset($subscription) && $subscription && $subscription->period_chinese == '每年' ? 'selected' : '' }}>每年</option>
            <option value="每月" {{ isset($subscription) && $subscription && $subscription->period_chinese == '每月' ? 'selected' : '' }}>每月</option>
            <option value="每日" {{ isset($subscription) && $subscription && $subscription->period_chinese == '每日' ? 'selected' : '' }}>每日</option>
        </select>
    </label></div>
</div>
<div class="flex">
    <div class="label-field"><label>
        <span>{{ __("Name description(English)") }}</span>
        <input type="text" placeholder="" name="description_english" value="{{ isset($subscription) && $subscription ? $subscription->description_english : '' }}" required>
    </label></div>
</div>
<div class="flex">
    <div class="label-field"><label>
        <span>{{ __("Name description(Chinese)") }}</span>
        <input type="text" placeholder="" name="description_chinese" value="{{ isset($subscription) && $subscription ? $subscription->description_chinese : '' }}" required>
    </label></div>
</div>
<div class="flex">
    <div class="label-field"><label>
        <span>{{ __("Price") }}($)</span>
        <input type="text" class="number-only" placeholder="" name="price" value="{{ isset($subscription) && $subscription ? $subscription->price : '' }}" required>
    </label></div>
</div>

<div class="legend-form form-tabs basic-services-wrapper">
    <h3 class="nomarg">Basic services</h3>
    @php
        $basicServices = isset($subscription) && $subscription ? $subscription->basicServices : [[]];
    @endphp
    @foreach ($basicServices as $basicService)
        <div class="form-tabs basic-services-item">
            <div class="flex align-center">
                <div class="fit-content">
                    Service <span class="basic-services-count">{{ $loop->iteration }}</span> title
                </div>
                <div class="label-field"><label>
                    <span>(English)</span>
                    <input type="text" placeholder="" value="{{ isset($basicService->title_english) ? $basicService->title_english : '' }}" name="basic_service_title_english[{{ $loop->index }}]" required>
                </label></div>
                <div class="label-field"><label>
                    <span>(Chinese)</span>
                    <input type="text" placeholder="" value="{{ isset($basicService->title_chinese) ? $basicService->title_chinese : '' }}" name="basic_service_title_chinese[{{ $loop->index }}]" required>
                </label></div>
            </div>
            <div class="form-tabs basic-services-item-list-wrapper">
                @php
                    $lists = isset($basicService->lists) ? $basicService->lists : [[]];
                @endphp
                @foreach ($lists as $list)
                    <div class="flex align-center basic-services-item-list-item">
                        <div class="fit-content list-title">
                            {{ __("Service") }} <span class="basic-services-count">{{ $loop->iteration }}</span> {{ __("list") }}
                        </div>
                        <div class="label-field">
                            <label>
                                <span>({{ __("English") }})</span>
                                <input type="text" placeholder="" value="{{ isset($list->title_english) ? $list->title_english : '' }}" class="basic_service_list_title_english" name="basic_service_list_title_english[{{ $loop->parent->index }}][{{ $loop->index }}]" required>
                            </label>
                        </div>
                        <div class="label-field">
                            <label>
                                <span>({{ __("Chinese") }})</span>
                                <input type="text" placeholder="" value="{{ isset($list->title_chinese) ? $list->title_chinese : '' }}" class="basic_service_list_title_chinese" name="basic_service_list_title_chinese[{{ $loop->parent->index }}][{{ $loop->index }}]" required>
                            </label>
                        </div>
                        <div class="list-buttons-wrapper">
                            <button type="button" class="list-buttons" data-action="remove">-</button>
                            <button type="button" class="list-buttons" data-action="add">+</button>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="flex">
                <button type="button" class="btn btn-error basic-services-buttons btn-normal" data-action="remove">{{ __("Remove service") }}</button>
            </div>
        </div>
    @endforeach
    <div class="flex">
        <button type="button" class="btn primary-button btn-normal basic-services-buttons" data-action="add">{{ __("Add new service") }}</button>
    </div>
</div>

<div class="legend-form form-tabs optional-services-wrapper">
    <h3 class="nomarg">Optional services</h3>
    @php
        $optionalServices = isset($subscription) && $subscription ? $subscription->optionalServices : [[]];
    @endphp
    @foreach ($optionalServices as $optionalService)
        <div class="form-tabs optional-services-item">
            <div class="flex align-center optional-services-item-list-item">
                <div class="fit-content list-title">
                    {{ __("Service") }} <span class="optional-services-count">{{ $loop->iteration }}</span> {{ __("list") }}
                </div>
                <div class="label-field">
                    <label>
                        <span>({{ __("English") }})</span>
                        <input type="text" placeholder="" value="{{ isset($optionalService->title_english) ? $optionalService->title_english : '' }}" name="optional_service_title_english[{{ $loop->index }}]" required>
                    </label>
                </div>
                <div class="label-field">
                    <label>
                        <span>({{ __("Chinese") }})</span>
                        <input type="text" placeholder="" value="{{ isset($optionalService->title_chinese) ? $optionalService->title_chinese : '' }}" name="optional_service_title_chinese[{{ $loop->index }}]" required>
                    </label>
                </div>
            </div>

            <div class="flex align-center price-fields">
                <div class="fit-content">
                    {{ __("Service") }} <span class="optional-services-count">{{ $loop->iteration }}</span> {{ strtolower(__("Price")) }}
                </div>
                <div class="label-field">
                    <label>
                        <input type="radio" class="optional_service_is_custom" name="optional_service_is_custom[{{ $loop->index }}]" value="no" {{ isset($optionalService->is_custom) && !$optionalService->is_custom ? 'checked' : '' }} required>
                        <span>$</span>
                        <input type="text" class="number-only" name="optional_service_price[{{ $loop->index }}]" value="{{ isset($optionalService->is_custom) && !$optionalService->is_custom && isset($optionalService->price) ? $optionalService->price : '' }}">
                    </label>
                    <label>
                        <span>{{ __("Period") }}</span>
                        <select name="optional_service_period[{{ $loop->index }}]">
                            <option value="year" {{ isset($optionalService->is_custom) && !$optionalService->is_custom && isset($optionalService->period) && $optionalService->period == 'year' ? 'selected' : '' }}>{{ __("Year") }}</option>
                            <option value="month" {{ isset($optionalService->is_custom) && !$optionalService->is_custom && isset($optionalService->period) && $optionalService->period == 'month' ? 'selected' : '' }}>{{ __("Month") }}</option>
                            <option value="day" {{ isset($optionalService->is_custom) && !$optionalService->is_custom && isset($optionalService->period) && $optionalService->period == 'day' ? 'selected' : '' }}>{{ __("Day") }}</option>
                        </select>
                    </label>
                </div>
                <div class="label-field">
                    <label>
                        <input type="radio" class="optional_service_is_custom" name="optional_service_is_custom[{{ $loop->index }}]" value="yes" {{ isset($optionalService->is_custom) && $optionalService->is_custom ? 'checked' : '' }} required>
                        <span>{{ __("Custom") }}:</span>
                        <input type="text" name="optional_service_custom_description[]" value="{{ isset($optionalService->is_custom) && $optionalService->is_custom && isset($optionalService->custom_description) ? $optionalService->custom_description : '' }}">
                    </label>
                </div>
            </div>

            <div class="flex">
                <button type="button" class="btn btn-error optional-services-buttons btn-normal" data-action="remove">{{ __("Remove service") }}</button>
            </div>
        </div>
    @endforeach
    
    <div class="flex">
        <button type="button" class="btn primary-button btn-normal optional-services-buttons" data-action="add">{{ __("Add new service") }}</button>
    </div>
</div>

<div class="d-flex align-items-center justify-content-center">
    <button type="submit" class="btn green-btn mx-3">{{ __("Save") }}</button>
    <a href="{{ route('cms.subscriptions.management') }}" class="btn red-btn mx-3">{{ __("Back") }}</a>
</div>

<script>
	$(document).ready( function () {
		$(document).on('click', '.basic-services-item-list-wrapper .basic-services-item-list-item .list-buttons', function(e) {
			var action = $(this).attr('data-action');
			var parentWrapper = $(this).parents('.basic-services-item-list-wrapper').first();

			if (action == 'add') {
				var cloneWrapper = parentWrapper.find('.basic-services-item-list-item').first().clone();

				cloneWrapper.find('input[type="text"]').val('');

				parentWrapper.append(cloneWrapper);
			}
			else if (action == 'remove') {
				if (parentWrapper.find('.basic-services-item-list-item').length > 1) {
					$(this).parents('.basic-services-item-list-item').first().remove();
				}
			}
		});
		$(document).on('click', '.basic-services-wrapper .basic-services-buttons', function(e) {
			var action = $(this).attr('data-action');
			var parentWrapper = $(this).parents('.basic-services-wrapper').first();

			if (action == 'add') {
				var cloneWrapper = parentWrapper.find('.basic-services-item').first().clone();

				cloneWrapper.find('.basic-services-count').text(parentWrapper.find('.basic-services-item').length + 1);
				cloneWrapper.find('input[type="text"]').val('');
				cloneWrapper.find('.basic-services-item-list-wrapper .basic-services-item-list-item:not(:first-child)').remove();
				cloneWrapper.find('.basic-services-item-list-wrapper .basic-services-item-list-item .basic_service_list_title_english').attr('name', 'basic_service_list_title_english[' + parentWrapper.find('.basic-services-item').length + '][]');
				cloneWrapper.find('.basic-services-item-list-wrapper .basic-services-item-list-item .basic_service_list_title_chinese').attr('name', 'basic_service_list_title_chinese[' + parentWrapper.find('.basic-services-item').length + '][]');
				
				parentWrapper.find('.basic-services-item:last').after(cloneWrapper);
			}
			else if (action == 'remove') {
				if (parentWrapper.find('.basic-services-item').length > 1) {
					$(this).parents('.basic-services-item').first().remove();

					var count = 1;
					parentWrapper.find('.basic-services-item').each(function( index ) {
						$(this).find('.basic-services-count').text(count);
						$(this).find('.basic-services-item-list-wrapper .basic-services-item-list-item .basic_service_list_title_english').attr('name', 'basic_service_list_title_english[' + (count - 1) + '][]');
						$(this).find('.basic-services-item-list-wrapper .basic-services-item-list-item .basic_service_list_title_chinese').attr('name', 'basic_service_list_title_chinese[' + (count - 1) + '][]');
						count++;
					});
				}
			}
		});
		$(document).on('click', '.optional-services-wrapper .optional-services-buttons', function(e) {
			var action = $(this).attr('data-action');
			var parentWrapper = $(this).parents('.optional-services-wrapper').first();

			if (action == 'add') {
				var cloneWrapper = parentWrapper.find('.optional-services-item').first().clone();

				cloneWrapper.find('.optional-services-count').text(parentWrapper.find('.optional-services-item').length + 1);
				cloneWrapper.find('input[type="radio"]').prop('checked', false);
				cloneWrapper.find('.optional_service_is_custom').attr('name', 'optional_service_is_custom[' + parentWrapper.find('.optional-services-item').length + ']');
				cloneWrapper.find('.price-fields').find('select').removeAttr('required');
				cloneWrapper.find('.price-fields').first().find('input[type="text"]').removeAttr('required');

				parentWrapper.find('.optional-services-item:last').after(cloneWrapper);
			}
			else if (action == 'remove') {
				if (parentWrapper.find('.optional-services-item').length > 1) {
					$(this).parents('.optional-services-item').first().remove();
					
					var count = 1;
					parentWrapper.find('.optional-services-item').each(function( index ) {
						$(this).find('.optional-services-count').text(count);
						$(this).find('.optional_service_is_custom').attr('name', 'optional_service_is_custom[' + (count - 1) + ']');
						count++;
					});
				}
			}
		});
		$(document).on('change', '.optional_service_is_custom', function(e) {
			$(this).parents('.price-fields').first().find('select').removeAttr('required');
			$(this).parents('.price-fields').first().find('input[type="text"]').removeAttr('required');

			$(this).parents('.label-field').first().find('select').attr('required', 'required');
			$(this).parents('.label-field').first().find('input[type="text"]').attr('required', 'required');
		});
	});
</script>