@php
    $title = $blade_data['title'];
    $routeLink = $blade_data['routeLink'];
    $countryArr = $form_data->country ? explode(',', $form_data->country) : [];
    $itemCount = 0;
@endphp

@extends('admin.layouts.app')
@section('page-title', $title)
@section('breadcrumb')
    <x-breadcrumb :blades="$blade_data" />
@endsection

@section('content')

    <div class=" ">
        <div class="card rounded-0 mb-2">
            <div class="card-body">

                <form
                    action="{{ $form_data->id ? route($routeLink . '.update', ['id' => $form_data->id]) : route($routeLink . '.store') }}"
                    method="POST" class="edit-form" enctype="multipart/form-data">
                    @csrf

                    <div class="form-group row">
                        <div class="col-sm-4 mb-3">
                            <label class="">Type</label>
                            <div class="">
                                <select name="type" class="form-control @error('type') is-invalid @enderror" required>
                                    @foreach ($type_list as $item)
                                        <option value="{{ $item }}"
                                            {{ $form_data->type == $item ? 'selected' : '' }}>
                                            {{ $item }}</option>
                                    @endforeach
                                </select>
                                @error('type')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-sm-4 mb-3">
                            <label class="">Name</label>
                            <div class="">
                                <input type="text" name="name" value="{{ old('name', $form_data->name) }}"
                                    class="form-control @error('name') is-invalid @enderror" required>
                                @error('name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-sm-4 mb-3">
                            <label class="">Amount</label>
                            <div class="">
                                <input type="number" name="amount" value="{{ old('amount', $form_data->amount) }}"
                                    class="form-control @error('amount') is-invalid @enderror" required>
                                @error('amount')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-sm-4 mb-3">
                            <label class="">Duration</label>
                            <div class="">
                                <input type="number" name="duration" value="{{ old('duration', $form_data->duration) }}"
                                    class="form-control @error('duration') is-invalid @enderror" required>
                                @error('duration')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>


                        <div class="col-sm-4 mb-3">
                            <label class="">Eligibility</label>
                            <div class="">
                                <select name="eligibility" class="form-control @error('eligibility') is-invalid @enderror"
                                    required>
                                    @foreach ($eligibility_list as $item)
                                        <option value="{{ $item }}"
                                            {{ $form_data->eligibility == $item ? 'selected' : '' }}>
                                            {{ $item }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>


                        <div class="col-sm-4 mb-3">
                            <label class="">Approval Type</label>
                            <div class="">
                                <select name="appoval_type" class="form-control i-appoval_type"
                                    onchange="select_approval_type()" required>
                                    <option value="all" {{ $form_data->country == 'all' ? 'selected' : '' }}>
                                        All Country</option>
                                    <option value="select" {{ $form_data->country != 'all' ? 'selected' : '' }}>
                                        Selected Country</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-sm-4 mb-3 auto-approval-field">
                            <label class="">Approval</label>
                            <div class="">
                                <select name="auto_approval" class="form-control">
                                    <option value="1" {{ $form_data->auto_approval == 1 ? 'selected' : '' }}>Auto
                                        Approval</option>
                                    <option value="0" {{ $form_data->auto_approval == 0 ? 'selected' : '' }}>Required
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-12 mb-3 country-field">
                            <div class="row added-country mb-2">
                                @if ($task_country)
                                    @foreach ($task_country as $item)
                                        <div class="col-12 country-list-item country-item-{{ $itemCount }}">
                                            <div class="border border-primary p-2 mb-1">
                                                <div class="row ">
                                                    <div class="col-md-6">
                                                        <select name="options[{{ $itemCount }}][country]"
                                                            class="form-control input-item-country" required>
                                                            <option value="">Select</option>
                                                            @foreach ($country_list as $val)
                                                                <option value=""
                                                                    {{ $item->country == $val['name'] ? 'selected' : '' }}>
                                                                                                                                    </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-5">
                                                        <select name="options[{{ $itemCount }}][approval]"
                                                            class="form-control" required>
                                                            <option value="1"
                                                                {{ $item->auto_approval == 1 ? 'selected' : '' }}>Auto
                                                                Approval
                                                            </option>
                                                            <option value="0"
                                                                {{ $item->auto_approval == 0 ? 'selected' : '' }}>Required
                                                                Approval</option>
                                                        </select>
                                                    </div>
                                                    <div class="col">
                                                        <button type="button" class="btn btn-sm btn-danger"
                                                            onclick="removeItem({{ $itemCount }})">Remove</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @php
                                            $itemCount++;
                                        @endphp
                                    @endforeach
                                @endif
                            </div>
                            <button type="button" class="btn btn-sm btn-primary" onclick="add_country()">Add
                                Country</button>

                        </div>

                        <div class="col-md-12 mb-3">
                            <label for="">Popup Description</label>
                            <textarea name="description_2" id="lv-editor-2" class="form-control">{!! $form_data->description_2 !!}</textarea>
                        </div>


                        <div class="col-md-12 mb-3">
                            <label for="">Main Description</label>
                            <textarea name="description" id="lv-editor" class="form-control">{!! $form_data->description !!}</textarea>
                        </div>

                        <div class="col-md-12 mb-3">
                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                <div class="fileinput-new img-thumbnail" style="width: 200px; height: 150px;">
                                    <img src="{{ $form_data->image_path }}" alt="">
                                </div>
                                <div class="fileinput-preview fileinput-exists img-thumbnail"
                                    style="max-width: 200px; max-height: 150px;"></div>
                                <div>
                                    <span class="btn btn-outline-secondary btn-file">

                                        <span class="fileinput-new">Select image</span>
                                        <span class="fileinput-exists">Change</span>
                                        <input type="file" name="image"></span>
                                    <a href="#" class="btn btn-outline-secondary fileinput-exists"
                                        data-dismiss="fileinput">Remove</a>
                                </div>
                            </div>
                            @error('image')
                                <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                            @enderror

                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-3">
                            <button type="submit" class="btn btn-sm btn-primary submitBtn">Save</button>
                            <a href="{{ route($routeLink . '.index') }}" class="btn btn-sm btn-secondary">Back</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection


@push('scripts')
    <script src="{{ asset('plugins/ckeditor/ckeditor.js') }}" type="text/javascript"></script>
    <script src="{{ asset('plugins/ckeditor/adapters/jquery.js') }}" type="text/javascript"></script>
    <script>
        var itemCount = parseInt({{ $itemCount++ }});
        $(".edit-form").validate({
            //     highlight: function(element) {
            // 	$(element).closest('.form-control').removeClass('is-valid').addClass('is-invalid'); // add the Bootstrap error class to the control group
            // },
            // ignore: ":hidden, [contenteditable='true']",
            // unhighlight: function(element) {
            // 	$(element).closest('.form-control').removeClass('is-invalid').addClass('is-valid');
            // },
            // success: function(element) {
            // 	$(element).closest('.form-control').removeClass('is-invalid').addClass('is-valid'); // remove the Boostrap error class from the control group
            // },
            submitHandler: function(form) {
                var val = $('.i-appoval_type').val();
                if (val == 'select') {
                    let selectValues = [];
                    let isValid = true;
                    if ($('.input-item-country').length === 0) {
                        alert('select country');
                        return false;
                    }

                    $('.input-item-country').each(function() {
                        if (selectValues.includes($(this).val())) {
                            isValid = false;
                            return false; // Exit loop
                        } else {
                            selectValues.push($(this).val());
                        }
                    });

                    if (!isValid) {
                        alert('country must have unique values.');
                        return false;
                    } else {
                        var loadingText = '<i class="fa fa-circle-notch fa-spin"></i> Saving..';
                        $('.edit-form  .submitBtn').html(loadingText).prop('disabled', true);
                        return true;
                    }
                } else {
                    var loadingText = '<i class="fa fa-circle-notch fa-spin"></i> Saving..';
                    $('.edit-form  .submitBtn').html(loadingText).prop('disabled', true);
                    return true;
                }
                return false;
            }
        });
    </script>


    <script>
        CKEDITOR.replace('lv-editor', {
            height: 500,
            allowedContent: true,
            filebrowserUploadUrl: "{{ route('admin.tasks.image_update', ['_token' => csrf_token()]) }}",
            filebrowserUploadMethod: 'form',
            toolbar: [{
                    name: 'document',
                    groups: ['mode', 'document', 'doctools'],
                    items: ['Source', ]
                },
                {
                    name: 'clipboard',
                    groups: ['clipboard', 'undo'],
                    items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo']
                },
                '/',
                {
                    name: 'basicstyles',
                    groups: ['basicstyles', 'cleanup'],
                    items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-',
                        'RemoveFormat'
                    ]
                },
                {
                    name: 'paragraph',
                    groups: ['list', 'indent', 'blocks', 'align', 'bidi'],
                    items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote',
                        'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock',
                        '-', 'BidiLtr', 'BidiRtl'
                    ]
                },
                {
                    name: 'links',
                    items: ['Link', 'Unlink', ]
                },
                {
                    name: 'insert',
                    items: ['Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe']
                },
                '/',
                {
                    name: 'styles',
                    items: ['Styles', 'Format', 'Font', 'FontSize']
                },
                {
                    name: 'colors',
                    items: ['TextColor', 'BGColor']
                },
                {
                    name: 'tools',
                    items: ['Maximize', 'ShowBlocks']
                },
            ],

        }, );

        var oEditor = CKEDITOR.instances.editor;


        CKEDITOR.replace('lv-editor-2', {
            height: 500,
            allowedContent: true,
            filebrowserUploadUrl: "{{ route('admin.tasks.image_update', ['_token' => csrf_token()]) }}",
            filebrowserUploadMethod: 'form',
            toolbar: [{
                    name: 'document',
                    groups: ['mode', 'document', 'doctools'],
                    items: ['Source', ]
                },
                {
                    name: 'clipboard',
                    groups: ['clipboard', 'undo'],
                    items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo']
                },
                '/',
                {
                    name: 'basicstyles',
                    groups: ['basicstyles', 'cleanup'],
                    items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-',
                        'RemoveFormat'
                    ]
                },
                {
                    name: 'paragraph',
                    groups: ['list', 'indent', 'blocks', 'align', 'bidi'],
                    items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote',
                        'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock',
                        '-', 'BidiLtr', 'BidiRtl'
                    ]
                },
                {
                    name: 'links',
                    items: ['Link', 'Unlink', ]
                },
                {
                    name: 'insert',
                    items: ['Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe']
                },
                '/',
                {
                    name: 'styles',
                    items: ['Styles', 'Format', 'Font', 'FontSize']
                },
                {
                    name: 'colors',
                    items: ['TextColor', 'BGColor']
                },
                {
                    name: 'tools',
                    items: ['Maximize', 'ShowBlocks']
                },
            ],

        }, );

        var oEditor_2 = CKEDITOR.instances.editor;


        function select_approval_type() {
            var val = $('.i-appoval_type').val();
            if (val == 'all') {
                $('.auto-approval-field').show();
                $('.country-field').hide();
                $('.country-field .form-control').attr('required', false);
            } else {
                $('.auto-approval-field').hide();
                $('.country-field').show();
                $('.country-field .form-control').attr('required', true);
            }
        }
        select_approval_type();

        function add_country() {
            let newItem = `
            <div class="col-12 country-list-item country-item-${itemCount}">
                <div class="border border-primary p-2 mb-1">
                    <div class="row ">
                        <div class="col-md-6">
                        <select name="options[${itemCount}][country]" class="form-control input-item-country" required>
                            <option value="">Select</option>
                            @foreach ($country_list as $val)
                                    <option value=""></option>
                            @endforeach
                            </select>
                        </div>
                        <div class="col-md-5">
                            <select name="options[${itemCount}][approval]" class="form-control" required>
                                <option value="1">Auto Approval</option>
                                <option value="0">Required Approval</option>                    
                            </select>
                            </div>
                        <div class="col">
                            <button type="button" class="btn btn-sm btn-danger" onclick="removeItem(${itemCount})" >Remove</button>
                        </div>
                    </div>
                </div>
            </div>`;
            $('.added-country').append(newItem);
            itemCount++;
        }

        function removeItem(id) {
            $('.country-item-' + id).remove();
        }
    </script>
@endpush