@extends('app')
@section('content')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/plugins/blueimp/blueimp-gallery.min.css') }}">
    <link href="{{ asset('assets/cpanel/css/image_upload.css') }}" rel="stylesheet" type="text/css" media="screen" />
    <style>
        #wizard-steps-general ul.wizard-steps {
            display: flex;
            justify-content: center;
            /* keep the whole wizard centered */
            flex-wrap: wrap;
            /* wrap on small screens */
            flex-direction: row-reverse;
            /* step 1 on far right */
            padding-left: 0;
            list-style: none;
        }
    </style>
        @if (Session::has('flash_message'))
        <div class="alert {{ Session::has('flash_message_status') ? 'alert-error' : 'alert-success' }}">
            <button class="close" data-dismiss="alert"></button>
            {!! Session::get('flash_message') !!}
        </div>
    @endif
    @if ($currentStep == 1)
        <div class="page-title"><a href="{{ route('majlis.index') }}"><i class="icon-custom-right"></i></a>
            <h3>مناسبة / مجلس - <span class="semi-bold">{{ $isEdit == 'Add' ? 'أضافة' : 'تحرير' }}</span></h3>
        </div>
    @endif
    <div class="row">
        <div class="col-md-12">
            <div class="grid simple">
                <div class="grid-title c-page-title">
                    <span>مناسبة / مجلس </span>
                </div>
                <div class="grid-body">
                    <div class="form-wizard-steps m-b-60 row" id="wizard-steps-general">
                        <ul class="wizard-steps narrow col-sm-12">

                            <li data-target="#step5"
                                class="{{ $currentStep > 5 ? 'completed' : '' }} {{ $currentStep == 5 ? 'active' : '' }}">
                                <a href="#tab5" class='tab6' data-toggle="tab">
                                    <span class="step">5</span> <span class="title">ملخص المجلس <br></span> </a>
                            </li>
                            <li data-target="#step4"
                                class="{{ $currentStep > 4 ? 'completed' : '' }} {{ $currentStep == 4 ? 'active' : '' }}">
                                <a href="#tab4" class='tab4' data-toggle="tab">
                                    <span class="step">4</span> <span class="title">الموقع</span> </a>
                            </li>
                            <li data-target="#step3"
                                class="{{ $currentStep > 3 ? 'completed' : '' }} {{ $currentStep == 3 ? 'active' : '' }}">
                                <a href="#tab3" class='tab3' data-toggle="tab">
                                    <span class="step">3</span> <span class="title">الصور الإضافية</span> </a>
                            </li>
                            <li data-target="#step2"
                                class="{{ $currentStep > 2 ? 'completed' : '' }} {{ $currentStep == 2 ? 'active' : '' }}">
                                <a href="#tab2" class='tab2' data-toggle="tab">
                                    <span class="step">2</span> <span class="title">معلومات المالك والاتصال</span> </a>
                            </li>
                            <li class="{{ $currentStep > 1 ? 'completed' : '' }} {{ $currentStep == 1 ? 'active' : '' }}"
                                data-target="#step1"> <a href="#tab1" class='tab1' data-toggle="tab">
                                    <span class="step">1</span> <span class="title">المعلومات الأساسية</span> </a> </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>

                    @if ($currentStep == 1)
                        @include('admin.majlis.step1')
                    @elseif ($currentStep == 2)
                        @include('admin.majlis.step2')
                    @elseif ($currentStep == 3)
                        @include('admin.majlis.step3')
                    @elseif ($currentStep == 4)
                        @include('admin.majlis.step4')
                    @elseif ($currentStep == 5)
                        @include('admin.majlis.step5')
                    @endif

                </div>
            </div>
        </div>
    </div>
@endsection
@section('page_script')
    <script src="{{ asset('assets/cpanel/js/image_upload.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/plugins/blueimp/jquery.blueimp-gallery.min.js') }}"></script>
    <script type="text/javascript" language="javascript" class="init">
        let is_cropped = true;
        $(document).ready(function() {

            $('.save_majlis').click(function(e) {
                e.preventDefault();
                $('#save_now').val('true');
                $(this).closest('form').submit();
            });
            $('#save_step1_majlis').click(function(e) {
                $('#save_step1_now').val('true');
                $('#progressbar').show();
                $('#form_majlis').trigger('submit');
            });

            updateFeatureCharLimitNum('title_field', 'char_count_title', 100);
            $("#title_field").keyup(function(event) {
                updateFeatureCharLimitNum('title_field', 'char_count_title', 100);
            });
            updateFeatureCharLimitNum('description_field', 'char_count_description', 300);
            $("#description_field").keyup(function(event) {
                updateFeatureCharLimitNum('description_field', 'char_count_description', 300);
            });

        });

        $(document).on('click', '#startCrop', function(e) {

            var image = $('#image1 .cropbox');
            AspectRatio = '1:1';
            maxWidth = MaxHeight = 4000;
            var value = $("#beacon_target").val();
            var originalWidth = image[0].naturalWidth;
            var originalHeight = image[0].naturalHeight;
            is_cropped = true;
            $('#image1 .cropbox').imgAreaSelect({
                handles: true,
                fadeSpeed: 200,
                onSelectChange: updateCoords,
                imageHeight: originalHeight,
                imageWidth: originalWidth,
                aspectRatio: AspectRatio,
                maxHeight: MaxHeight,
                maxWidth: maxWidth,
            });
            $("#image1-dim").html('width: 0, height: 0');
            $("#image1-dim").show();

        });

        function updateCoords(img, selection) {
            if (!selection.width || !selection.height)
                return;

            $('#x').val(selection.x1);
            $('#y').val(selection.y1);
            $('#w').val(selection.width);
            $('#h').val(selection.height);
            $("#image1-dim").html('width: ' + selection.width + ', height: ' + selection.height);
        }
        $(document).on('change', '.upload_image_class', function(e) {
            is_cropped = false;
        });
        $(document).on('click', '.remove_picture', function(e) {
            is_cropped = true;
        });

        $('#form_majlis').on('submit', function(e) {
            if (is_cropped == false) {
                e.preventDefault();
                $('#progressbar').hide();
                alert("يرجى قص الصورة قبل المتابعة");
                return false;
            }
        });
    </script>
@endsection