@extends("admin.template.layout")
@section('header')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css"/>
    <style>
        .preview {
            text-align: center;
            overflow: hidden;
            width: 260px;
            height: 260px;
            margin: 10px;
            border: 1px solid red;
        }

        .modal-lg {
            max-width: 1000px !important;
        }
    </style>
@endsection
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">


        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">{{$mode ?? $page_heading}}</h5>

            </div>
            <form id="admin_form" method="post" action="{{route('events.submit')}}" enctype="multipart/form-data">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            @csrf()
                            <input type="hidden" name="id" value="{{$id}}">
                            <input type="hidden" name="euid" value="{{$euid}}">
                            @if($id)

                            @endif
                            <div class="mb-3">
                                <label class="form-label" for="bs-validation-name">Name<span
                                        class="text-danger">*</span>  <small>(Max 45 characters)</small></label>
                                <input
                                    type="text"
                                    class="form-control jqv-input" data-jqv-required="true"
                                    id="name"
                                    name="name"
                                    maxlength="45"
                                    value="{{$event_name}}"
                                />

                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="bs-validation-name">Organizer/Owner<span
                                        class="text-danger">*</span></label>
                                <input name="organiser_name" type="text"
                                       class="form-control jqv-input"
                                       data-jqv-required="true"
                                       value="{{$organiser_name}}">
                                <input type="hidden" name="owner_id" value="0">
                            </div>

                            <div class="mb-3">
                                <label class="form-label" for="bs-validation-name">Image<span
                                        class="text-danger">*</span></label>
                                <input
                                    type="file"
                                    class="form-control jqv-input form-control-file image" data-jqv-required="true"
                                    id="event_image"
                                    name="image"
                                />
                                <input type="hidden" name="image_data" id="image_data">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-header text-center">
                                    <h6>Event QR Code</h6>
                                </div>
                                <div class="card-body text-center">
                                    @if(!extension_loaded('imagick'))
                                        {!! QrCode::size(150)->gradient(153,2,83, 249,0,0,'diagonal')->generate($euid); !!}
                                    @else

                                        {!! QrCode::size(150)->gradient(153,2,83, 249,0,0,'diagonal')->generate($euid); !!}
                                    @endif
                                </div>
                                <div class="card-footer">
                                    <div class="text-danger font-weight-bolder text-center">Event
                                        Code: {{$euid ?? "--------"}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-8">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label class="form-label" for="bs-validation-name">Event Date<span
                                                class="text-danger">*</span></label>
                                        <input
                                            type="text"
                                            class="form-control jqv-input"
                                            id="event-date"
                                            name="date"
                                            value="{{$event_date}}"
                                            autocomplete="off"
                                        />

                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label class="form-label" for="bs-validation-name">Start Time<span
                                                class="text-danger">*</span></label>
                                        <input
                                            type="time"
                                            class="form-control jqv-input" data-jqv-required="true"
                                            id="start_time"
                                            name="start_time"
                                            value="{{$start_time}}"
                                        />
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label class="form-label" for="bs-validation-name">End Time<span
                                                class="text-danger">*</span></label>
                                        <input
                                            type="time"
                                            class="form-control jqv-input" data-jqv-required="true"
                                            id="end_time"
                                            name="end_time"
                                            value="{{$end_time}}"
                                            placeholder="Event Date"
                                        />
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-header">
                                    <h6>Event Image</h6>
                                </div>
                                <div class="card-body p-0 mt-2">
                                    <div id="image_preview" class="p-3 text-center">
                                        @if($image)
                                            <img src="{{$image}}" style="max-height: 180px"
                                                 class="img-fluid">
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">

                            <div class="mb-3">
                                <label class="form-label" for="bs-validation-name">About<span
                                        class="text-danger">*</span></label>
                                <textarea
                                    id="about"
                                    name="about"
                                    rows="4"
                                    class="form-control jqv-input" data-jqv-required="true"
                                >{{$about}}</textarea>
                            </div>


                        </div>
                        <div class="col-md-4">

                            <div class="mb-3">
                                <label class="form-label" for="bs-validation-name">Event Type<span
                                        class="text-danger">*</span></label>
                                <select class="form-control jqv-input select2" id="event_type_id"
                                        data-jqv-required="true"
                                        name="event_type_id">
                                    <option value="">Select Event Type</option>
                                    @foreach(\App\Models\Event::EVENT_TYPES as $key=>$value)
                                        <option @if($event_type==$key) selected
                                                @endif value="{{$key}}">{{$value}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">

                            <div class="mb-3">
                                <label class="form-label" for="bs-validation-name">Privacy<span
                                        class="text-danger">*</span></label>
                                <select class="form-control jqv-input select2" data-jqv-required="true" name="privacy">
                                    <option value="">Select Privacy</option>
                                    @foreach(\App\Models\Event::PRIVACY as $key=>$value)
                                        <option @if($privacy==$key) selected @endif value="{{$key}}">{{$value}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">

                            <div class="mb-3">
                                <label class="form-label">Status<span class="text-danger">*</span></label>
                                <select class="form-control jqv-input select2" data-jqv-required="true" name="status">
                                    <option @if($status== 1) selected @endif value="1">Active</option>
                                    <option @if($status== 0) selected @endif value="0">InActive</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-12 locationForPerson" style="display: none">
                            <div class="mb-3">
                                <label class="form-label" for="bs-validation-name">Building<span
                                        class="text-danger">*</span></label>
                                <input type="text" name="building" placeholder="Building" class="form-control jqv-input"
                                       value="{{$building}}">
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="bs-validation-name">Apartment<span
                                        class="text-danger">*</span></label>
                                <input type="text" name="apartment" placeholder="Apartment"
                                       class="form-control jqv-input" value="{{$apartment}}">
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="bs-validation-name">Landmark<span
                                        class="text-danger">*</span></label>
                                <input type="text" name="landmark" placeholder="Landmark" class="form-control jqv-input"
                                       value="{{$landmark}}">
                            </div>

                            <div class="form-group ">
                                <x-elements.map-location
                                    :lat="$latitude"
                                    :lng="$longitude"
                                    :address="$address"/>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 text-center">
                            <button type="submit" class="main-btn primary-btn btn-hover">
                                Submit
                            </button>
                        </div>
                    </div>

                </div>
                <div class="col-xs-12 col-sm-6">


                </div>

            </form>
        </div>

        <div class="modal fade" id="crop-modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalLabel">Crop Image</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="img-container">
                            <div class="row">
                                <div class="col-md-8">
                                    <img id="img-to-image" class="img" style="max-width: 600px" src="">
                                </div>
                                <div class="col-md-4">
                                    <strong class="ml-2 mt-2">Preview</strong>
                                    <div class="preview"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary" id="crop">Crop</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js"></script>
    <script>
        var $modal = $('#crop-modal');
        var image = document.getElementById('img-to-image');
        var cropper;

        $("body").on("change", ".image", function (e) {
            var files = e.target.files;
            var done = function (url) {
                image.src = url;
                $modal.modal('show');
            };

            var reader;
            var file;
            var url;

            if (files && files.length > 0) {
                file = files[0];

                if (URL) {
                    done(URL.createObjectURL(file));
                } else if (FileReader) {
                    reader = new FileReader();
                    reader.onload = function (e) {
                        done(reader.result);
                    };
                    reader.readAsDataURL(file);
                }
            }
        });

        $modal.on('shown.bs.modal', function () {
            cropper = new Cropper(image, {
                aspectRatio: 3 / 2,
                viewMode: 3,
                preview: '.preview'
            });
        }).on('hidden.bs.modal', function () {
            cropper.destroy();
            cropper = null;
        });

        $("#crop").click(function () {
            canvas = cropper.getCroppedCanvas({
                width: 600,
                height: 400,
            });

            canvas.toBlob(function (blob) {
                url = URL.createObjectURL(blob);
                $('#image_preview').html('<img src="' + url + '"  style="max-height: 180px" class="img-fluid" alt="File preview">');
                var reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onloadend = function () {
                    var base64data = reader.result;
                    $('#image_data').val(base64data)
                    $modal.modal('hide');
                }
            });
        });
    </script>
    <script>
        $('#event-date').datepicker({
            format: 'dd-mm-yyyy',
            startDate: new Date(),
            autoclose: true
        });
        // const fileInput = document.getElementById("event_image");
        // const preview = document.getElementById("image_preview");
        //
        // fileInput.addEventListener("change", () => {
        //     const file = fileInput.files[0];
        //     if (file) {
        //         const reader = new FileReader();
        //         reader.readAsDataURL(file);
        //         reader.onload = () => {
        //             preview.innerHTML = `<img src="${reader.result}"  style="max-height: 250px" class="img-fluid" alt="File preview">`;
        //         };
        //     } else {
        //         preview.innerHTML = "No file selected";
        //     }
        // });
        $(function () {
            var dtToday = new Date();

            var month = dtToday.getMonth() + 1;
            var day = dtToday.getDate();
            var year = dtToday.getFullYear();
            if (month < 10)
                month = '0' + month.toString();
            if (day < 10)
                day = '0' + day.toString();

            var maxDate = year + '-' + month + '-' + day;
            $('#event-date').attr('min', maxDate);
        });

        $('.all-select').click(function () {
            $(this).siblings('.crud-items').prop('checked', this.checked);
        });
        $('.crud-items').click(function () {
            $(this).siblings('.all-select').prop('checked', false);
        });
        $('.all-p').click(function () {
            $(this).siblings('.reader').prop('checked', true);
        });
        App.initFormView();
        let form_in_progress = 0;

        $('body').off('submit', '#admin_form');
        $('body').on('submit', '#admin_form', function (e) {
            e.preventDefault();
            var validation = $.Deferred();
            var $form = $(this);
            var formData = new FormData(this);

            $form.validate({
                rules: {},
                errorElement: 'div',
                errorPlacement: function (error, element) {
                    element.addClass('is-invalid');
                    error.addClass('error');
                    error.insertAfter(element);
                }
            });

            // Bind extra rules. This must be called after .validate()
            App.setJQueryValidationRules('#admin_form');

            if ($form.valid()) {
                validation.resolve();
            } else {
                var error = $form.find('.is-invalid').eq(0);
                $('html, body').animate({
                    scrollTop: (error.offset().top - 100),
                }, 500);
                validation.reject();
            }

            validation.done(function () {
                $form.find('.is-invalid').removeClass('is-invalid');
                $form.find('div.error').remove();


                App.button_loading(true);


                form_in_progress = 1;
                $.ajax({
                    type: "POST",
                    enctype: 'multipart/form-data',
                    url: $form.attr('action'),
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    timeout: 600000,
                    dataType: 'html',
                    success: function (res) {
                        res = JSON.parse(res);
                        console.log(res['status']);
                        form_in_progress = 0;
                        App.button_loading(false);
                        if (res['status'] == 0) {
                            if (typeof res['errors'] !== 'undefined') {
                                var error_def = $.Deferred();
                                var error_index = 0;
                                jQuery.each(res['errors'], function (e_field, e_message) {
                                    if (e_message != '') {
                                        var $input = $('[name="' + e_field + '"]').eq(0);
                                        $input.addClass('is-invalid');
                                        var $errorDiv = $('<div class="error">' + e_message + '</div>');
                                        if ($input.hasClass('select2')) {
                                            $input.next('.select2-container').after($errorDiv);
                                        } else {
                                            $errorDiv.insertAfter($input);
                                        }
                                        if (error_index == 0) {
                                            error_def.resolve();
                                        }
                                        error_index++;
                                    }
                                });
                                error_def.done(function () {
                                    var error = $form.find('.is-invalid').eq(0);
                                    $('html, body').animate({
                                        scrollTop: (error.offset().top - 100),
                                    }, 500);
                                });

                            } else {
                                var m = res['message'] || 'Unable to save variation. Please try again later.';
                                App.alert(m, 'Oops!', 'error');
                            }
                        } else {
                            App.alert(res['message'] || 'Record saved successfully', 'Success!', 'success');
                            setTimeout(function () {
                                window.location.href = res['oData']['redirect'];
                            }, 2500);

                        }

                    },
                    error: function (e) {
                        form_in_progress = 0;
                        App.button_loading(false);
                        console.log(e);
                        App.alert("Network error please try again", 'Oops!', 'error');
                    }
                });
            });
        });
        $(document).ready(function () {
            $('.form-control').on('input', function () {
                $(this).siblings('.error').hide();
            });
            $(window).keydown(function (event) {
                if (event.keyCode == 13) {
                    event.preventDefault();
                    return false;
                }
            });

            // here we show loacation for person

            $('#event_type_id').change(function () {
                if ($(this).val() == {{\App\Models\Event::IN_PERSON}}) {
                    $('.locationForPerson').show();
                } else {
                    $('.locationForPerson').hide();
                }
            });
        });
    </script>
@stop