@extends('layouts.host', ['header' => true, 'header_image' => false])
@section('title', 'Division Rules')
{{-- @section('back_button')
    <a href="{{ url()->previous() }}" class="back-btn-back">
        <i class="fa-solid fa-chevron-left"></i>
    </a>
@endsection --}}
@section('content')
    <section class="main-sec-become-hosted">
        <div class="host-event-details-content">
            <div class="create-event-rules-row manage-division-row">
                <div class="create-event-rules-column manage-division-column">
                    <div class="form-group">
                        <label>Division Rules</label>
                        <div class="formfield">
                            <img src="{{ asset('images/upload-division-img.png') }}" id="uploading-img"
                                class="{{ $division_rule ? 'd-none' : '' }}">
                            {{-- <img src="{{ asset('images/upload-successful.png') }}" id="uploaded-img" width="100" height="100"
                                class="{{ $division_rule ? '' : 'd-none' }}"> --}}

                            <div class="upload-sucess-box {{ $division_rule ? '' : 'd-none' }}" id="uploaded-img">
                                <img src="{{ asset('images/upload-successful.png') }}" alt="" style="width: 40px;"
                                    height="40">
                                <p>UPLOAD SUCCESSFUL</p>
                            </div>
                            {{-- <img src="{{ asset('images/upload-division-img.png') }}" id="uploading-img" class="{{ $division_rule ? 'div-rule-present' : ''}}">
                            <img src="{{ asset('images/copy.png') }}" id="uploaded-img" width="100" height="100"
                                class="d-none"> --}}
                            <input type="file" id="division_rules" name="division_rules" class="form-control"
                                data-url="{{ route('host.event.pdf-upload-for-parse') }}" accept="application/pdf">
                            <input type="hidden" name="division_rules_text" id="division_rules_text"
                                value="{{ $division_rule ? getDivisionRuleData($division_rule->id) : '' }}">
                            <input type="hidden" name='media_token' id="media_token" value="{{ str()->random(7) }}">
                            <input type="hidden" name="new-data-url" id="new-data-url">
                        </div>
                    </div>
                    <div class="upload-from-file-btn">
                        <button class="event-view-btn" id="view-rules" {{ $division_rule ? '' : 'disabled' }}
                            data-url="{{ $division_rule ? '/storage/' . $division_rule->path : '' }}">View<div
                                class="spinner-border d-none" role="status">
                                <span class="sr-only">Loading...</span>
                            </div></button>
                        <button class="event-reset-btn reset-division-rule-file" id="reset-rules"
                            {{ $division_rule ? '' : 'disabled' }}
                            reset-url="{{ auth()->check() ? route('host.division.reset.file', ['id' => jsencode_userdata(auth()->user()->divisionRule)]) : null }}">Reset
                            <div class="spinner-border d-none" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </button>
                        <button class="event-save-btn " id="save-rules" disabled>Save<div class="spinner-border d-none"
                                role="status">
                                <span class="sr-only">Loading...</span>
                            </div></button>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @include('host.event-new-flow.modal.comon-modal')
    @push('scripts')
        <script>
            jQuery(document).ready(function() {
                let beforeUploadImg = APP_URL + '/images/upload-division-img.png';
                let afterUploadImg = APP_URL + '/images/copy.png';

                function showBtnLoader(element) {
                    jQuery(element).children('.spinner-border').removeClass('d-none')
                    jQuery(element).attr('disabled', true)
                }

                //hide btn loader
                function hideBtnLoader(element) {
                    jQuery(element).children('.spinner-border').addClass('d-none')
                    jQuery(element).attr('disabled', false)
                }

                var isDivisionRule = "{{ $division_rule ? true : false }}";

                if (isDivisionRule) {}

                $('#division_rules').on('change', function() {
                    var this_element = $(this);
                    if (jQuery(this)[0].files.length > 0) {

                        var file = this_element[0].files[0];
                        var fileSize = file.size;
                        var fileExtension = file.name.split('.').pop();
                        var fileSizeLimit = 1024 * 1024 * 10; // 10MB
                        if (fileSize > fileSizeLimit) {
                            errorShow('Error', 'File size exceeds the limit of 5MB', 'Try again');
                            this_element.val('');
                            return false;
                        }
                        if (fileExtension != 'pdf') {
                            errorShow('Error', 'Only PDF files are allowed', 'Try again');
                            this_element.val('');
                            return false;
                        }

                        let media_token = $('#media_token').val();

                        let url = $(this).data('url');
                        let formData = new FormData();
                        formData.append('file', $(this)[0].files[0]);
                        formData.append('pdf_type', 'description');
                        formData.append('media_token', media_token);

                        let response = ajaxCall(url, 'post', formData, true, true);
                        response.then((response) => {
                            if (response.success == true) {
                                $('#division_rules_text').val(response.data);
                                $("#view-rules").attr('data-url', response.doc_path);
                                $("#new-data-url").val(response.doc_path);
                                $("#new-data-url").trigger('change');

                                $("#uploading-img").addClass('d-none');
                                $("#uploaded-img").removeClass('d-none');
                                this_element.addClass('d-none');
                                // jQuery('#title-desc').addClass('d-none');
                                // this_element.parent().find('button').removeClass('d-none');
                                $("#view-rules").attr('disabled', false);
                                $("#reset-rules").attr('disabled', false);
                                $("#save-rules").attr('disabled', false);


                            } else {
                                errorShow('Error', response.msg, 'Try again');
                            }
                        });
                    }
                });
                // $('#reset-rules').on('click', function(e) {

                //     // hideBtnLoader(jQuery(this));
                // });

                var mediaPath = "{{ $division_rule ? '/storage/' . $division_rule->path : '' }}";

                $('#new-data-url').change(function() {
                    mediaPath = $(this).val();
                });

                jQuery('#view-rules').click(function(e) {
                    e.preventDefault();

                    jQuery('#title').text('Division Rules');

                    showBtnLoader(jQuery(this));
                    //showing preview of pdf
                    // jQuery('#common-modal-content').html($('#division_rules_text').val());
                    // jQuery('#pdf-preview-modal').modal('show');

                    // let mediaPath = $(this).data('url');
                    // console.log(mediaPath);

                    let pdfUrl = APP_URL + mediaPath;

                    // jQuery('#pdf-preview').attr('src', pdfUrl + '#toolbar=0&navpanes=0');
                    previewPdf(pdfUrl , jQuery('#pdf-preview'));
                    jQuery('#pdf-preview-modal').modal('show');

                    hideBtnLoader(jQuery(this));

                });


                jQuery("#save-rules").click(function(e) {
                    e.preventDefault();
                    $("#save-rules").attr('disabled', true);
                    // showBtnLoader(jQuery(this));
                    let url = '{{ route('host.division.create.rules') }}';
                    let formData = new FormData();
                    // formData.append('division_rules_text', $('#division_rules_text').val());
                    formData.append('division_rule', jQuery('#division_rules')[0].files[0]);
                    let response = ajaxCall(url, 'post', formData, true, true);
                    response.then((response) => {
                        if (response.status == true) {
                            errorShow('Success', response.message, 'Close');
                            $("#save-rules").attr('disabled', true);
                            jQuery('#error-description').click(function() {
                                window.location.href = response.url;
                            });
                        } else {
                            errorShow('Error', response.message, 'Try again');
                        }
                        // hideBtnLoader(jQuery(this));
                    });
                });

                window.addEventListener('beforeunload', function(event) {
                    let media_token = $("#media_token").val();
                    console.log('Token: ' + media_token);
                    if (media_token) {
                        let url = "{{ route('host.event.deleteTempMedia') }}";
                        let formData = {
                            media_token: media_token
                        };

                        // navigator.sendBeacon(url, JSON.stringify(formData));
                        let response = ajaxCall(url, 'post', formData, true, true);
                        response.then((response) => {
                            if (response.status == true) {
                                console.log('temp media deleted successfully');
                            } else {
                                errorShow('Error', response.message, 'Try again');
                            }
                        });
                    }
                });

                //REMOVE FILE FROM DB
                jQuery('.reset-division-rule-file').click(function(e) {
                    e.preventDefault();
                    if (jQuery('input[name="division_rules"]')[0].files.length > 0) {
                        errorShow('Success', 'Deleted successfully', 'Close');
                        $('#division_rules_text').val(null);
                        // $("#uploading-img").show();
                        $("#uploaded-img").addClass('d-none');
                        $("#uploading-img").removeClass('d-none');

                        $('#division_rules').val('');

                        $("#division_rules").removeClass('d-none');
                        $("#view-division-rules").attr('disabled', true);
                        $("#reset-division-rules").attr('disabled', true);
                        $("#save-division-rules").attr('disabled', true);
                        $("#view-division-rules").attr('data-url', '');
                        $(this).attr('disabled', true);
                        return false;
                    }
                    let url = jQuery(this).attr('reset-url');
                    if (url.length > 0) {
                        let response = ajaxCall(url, 'post');
                        response.then((response) => {
                            if (response.status == true) {
                                e.preventDefault();
                                errorShow('Success', response.message, 'Close');
                                // showBtnLoader(jQuery(this));
                                $('#division_rules_text').val(null);
                                // $("#uploading-img").show();
                                $("#uploaded-img").addClass('d-none');
                                $("#uploading-img").removeClass('d-none');

                                $('#division_rules').val('');

                                $("#division_rules").removeClass('d-none');
                                $("#view-rules").attr('disabled', true);
                                $("#reset-rules").attr('disabled', true);
                                $("#save-rules").attr('disabled', true);
                                $("#view-rules").attr('data-url', '');
                                $(this).attr('disabled', true);
                            }
                        });
                    }
                });
            });
        </script>
    @endpush
@endsection