@extends('layouts.admin.main')

@if (!empty($listingPagesImage))
    @if (!file_exists(storage_path('app/public/advertisement-images/' . $listingPagesImage->file_name)))
        @php $listingPageImageUrl = url('public/storage/advertisement-images/' . $listingPagesImage->file_name); @endphp
    @else
        @php $listingPageImageUrl = url('storage/advertisement-images/' . $listingPagesImage->file_name); @endphp
    @endif
@else
    @php $listingPageImageUrl = ''; @endphp
@endif

@if (!empty($articleDetailPageImage))
    @if (!file_exists(storage_path('app/public/advertisement-images/' . $articleDetailPageImage->file_name)))
        @php $articleDetailPageImageUrl = url('public/storage/advertisement-images/' . $articleDetailPageImage->file_name); @endphp
    @else
        @php $articleDetailPageImageUrl = url('storage/advertisement-images/' . $articleDetailPageImage->file_name); @endphp
    @endif
@else
    @php $articleDetailPageImageUrl = ''; @endphp
@endif

@if (!empty($articleAdBannerImage))
    @if (!file_exists(storage_path('app/public/advertisement-images/' . $articleAdBannerImage->file_name)))
        @php $articleAdBannerImageUrl = url('public/storage/advertisement-images/' . $articleAdBannerImage->file_name); @endphp
    @else
        @php $articleAdBannerImageUrl = url('storage/advertisement-images/' . $articleAdBannerImage->file_name); @endphp
    @endif
@else
    @php $articleAdBannerImageUrl = ''; @endphp
@endif

@if (!empty($popupBannerImage))
    @if (!file_exists(storage_path('app/public/advertisement-images/' . $popupBannerImage->file_name)))
        @php $popupBannerImageUrl = url('public/storage/advertisement-images/' . $popupBannerImage->file_name); @endphp
    @else
        @php $popupBannerImageUrl = url('storage/advertisement-images/' . $popupBannerImage->file_name); @endphp
    @endif
@else
    @php $popupBannerImageUrl = ''; @endphp
@endif

@if (!empty($ad_popup))
    @if ($ad_popup->ad_popup == 1)
        @php $ad_popup = 1; @endphp
    @else
        @php $ad_popup = 0; @endphp
    @endif
@else
    @php $ad_popup = 1; @endphp
@endif

@section('title')
    <title>{{ adminPageTitle('Dashboard') }}</title>
@endsection

@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>Advertisement Images</h1>
                    </div>
                </div>
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12 col-sm-6 col-xl-3 d-flex align-items-stretch flex-column">
                        <div class="card bg-light d-flex flex-fill">
                            <div class="card-header text-muted">
                                News Listing Pages
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-12 news-listing-page">
                                        <img width="100%" src="{{ $listingPageImageUrl }}" alt="No image uploaded yet">
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <div class="text-right">
                                    <a href="javascript:void(0)" class="btn btn-sm theme_btn upload_btn" data-toggle="modal" data-target="#advertisementImageUploadModal" data-image-type="5">
                                        Upload New Image
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 col-sm-6 col-xl-3 d-flex align-items-stretch flex-column">
                        <div class="card bg-light d-flex flex-fill">
                            <div class="card-header text-muted">
                                Article Detail Page
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-12">
                                        <img width="100%" src="{{ $articleDetailPageImageUrl }}" alt="No image uploaded yet">
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <div class="text-right">
                                    <a href="javascript:void(0)" class="btn btn-sm theme_btn upload_btn" data-toggle="modal" data-target="#advertisementImageUploadModal" data-image-type="6">
                                        Upload New Image
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 col-sm-6 col-xl-3 d-flex align-items-stretch flex-column">
                        <div class="card bg-light d-flex flex-fill">
                            <div class="card-header text-muted">
                                Article ad poster
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-12">
                                        <img width="100%" src="{{ $articleAdBannerImageUrl }}" alt="No image uploaded yet">
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <div class="text-right">
                                    <a href="javascript:void(0)" class="btn btn-sm theme_btn upload_btn" data-toggle="modal" data-target="#advertisementImageUploadModal" data-image-type="7">
                                        Upload New Image
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 col-sm-6 col-xl-3 d-flex align-items-stretch flex-column">
                        <div class="card bg-light d-flex flex-fill">
                            <div class="card-header text-muted ">
                                <div class="d-flex justify-content-between align-items-center">
                                    Popup Banner Image
    								<div class="custom-control custom-switch">
    								  <input type="checkbox" class="custom-control-input" id="customSwitch1" value="" >
    								  <label class="custom-control-label" for="customSwitch1"></label>
    								</div>
                                </div>
                                <!-- Default checked -->
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-12">
                                        <img width="100%" src="{{ $popupBannerImageUrl }}" alt="No image uploaded yet">
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <div class="text-right">
                                    <a href="javascript:void(0)" class="btn btn-sm theme_btn upload_btn" data-toggle="modal" data-target="#advertisementImageUploadModal" data-image-type="8">
                                        Upload New Image
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>               
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

<div class="modal fade" id="advertisementImageUploadModal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Upload Image</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="{{ route('admin.ad-image.upload') }}" method="post" enctype="multipart/form-data" id="adImageUploadForm">
                    <input type="hidden" name="type" id="imageType" value="">

                    <div class="alert alert-danger image-upload-error" role="alert" style="display: none;">
                    </div>

                    <div class="form-group mb-0">
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="adImage" name="adImage">
                            <label class="custom-file-label form-control" for="adImage">Choose file</label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default theme_btn danger_btn" data-dismiss="modal">Close</button>
                <button type="button" class="btn theme_btn upload_btn ad-image-submit-button">Upload</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page-specific-scripts')
<script>
    $(document).ready(function() {
        $('#advertisementImageUploadModal').on('shown.bs.modal', function (e) {
            var type = $(e.relatedTarget).attr('data-image-type');
            $('.ad-image-submit-button').data('image-type', type);
            $('#imageType').val(type);
        });
    });

    $("body").on("click", ".ad-image-submit-button", function() {
        var fileInput = document.getElementById('adImage');
        var filePath = fileInput.value;
        // Allowing file type
        var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
        if (!allowedExtensions.exec(filePath)) {
            fileInput.value = '';
            $('.image-upload-error').html('Please choose valid image file');
            $('.image-upload-error').show();
            return false;
        } else {
            var form = $('#adImageUploadForm')[0];
            var formData = new FormData(form);

            $.ajax({
                url: $('#adImageUploadForm').attr('action'),
                type: 'POST',
                dataType: 'JSON',
                timeout: 30000,
                mimeType: "multipart/form-data",
                contentType: false,
                processData: false,
                data: formData,
                beforeSend: function() {
                    $('.image-upload-error').html('');
                    $('.image-upload-error').hide();
                    $('.ad-image-submit-button').prop('disabled', true);
                },
                error: function(data){
                    $('.image-upload-error').html('Something went wrong while uploading image, please try again');
                    $('.image-upload-error').show();
                    $('.ad-image-submit-button').prop('disabled', false);
                },
            }).done(function(data) {

                $('.ad-image-submit-button').prop('disabled', false);

                if (data.status == 'success') {
                    window.location.reload();
                }
                else {
                    $('.image-upload-error').html(data.response);
                    $('.image-upload-error').show();
                }
            });
        }
    });

    $("body").on("change", "#customSwitch1", function() {
    	var toggle = $('#customSwitch1').val();
    	$.ajax({
                url: '{{route("change.status")}}',
                type: 'POST',
                dataType: 'JSON',
                timeout: 30000,
                data: toggle,
                beforeSend: function() {
                    
                },
                error: function(data){
                    
                },
            }).done(function(data) {
            	
        });
    });
</script>
@endsection