@extends('app')
@section('content')
    <link href="{{ asset('assets/plugins/jquery-notifications/css/messenger.css') }}" rel="stylesheet" type="text/css"
        media="screen" />
    <link href="{{ asset('assets/plugins/jquery-notifications/css/messenger-theme-flat.css') }}" rel="stylesheet"
        type="text/css" media="screen" />
    <link href="{{ asset('assets/css/bootstrap-fileupload.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/css/imgareaselect-default.css') }}" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/plugins/blueimp/blueimp-gallery.min.css') }}">
    <style>
        body {
            overflow-y: scroll !important;
        }
    </style>
    @if (session('flash_message'))
        <div class="alert {{ session('flash_message_status') ? 'alert-error' : 'alert-success' }}">
            <button class="close" data-dismiss="alert"></button>
            {!! session('flash_message') !!}
        </div>
    @endif

    <br>
    <div class="grid simple vertical mobile-scroll">

        <div class="grid-body no-border">
            <div class='row control' style="margin-bottom: 10px; margin-top: 10px;  background-color: #fff;">
                <div class="col-sm-5 col-xs-12">
                    <div class="pull-right markaction">
                        @can('backgroundimage-destroy')
                            <a id="del" href="javascript:void(0)" class="btn btn-danger"
                                data-url="{{ route('admin.backgroundimage.bulkdelete') }}">حذف</a>
                        @endcan
                    </div>
                </div>

                <div class="col-sm-2 col-xs-12" style="text-align: center;">
                    <span class="bold" style="font-size: 20px;">صورة التطبيق الخلفية</span>
                </div>

                <div class="col-sm-5 col-xs-12">
                    @can('backgroundimage-create')
                        <a href="javascript:void(0)" data-target="#addModal" data-toggle='modal'
                            class="btn btn-primary">إضافة</a>
                    @endcan

                    @if (
                        !auth()->user()->can('backgroundimage-create') &&
                            (auth()->user()->can('backgroundimage-destroy') || auth()->user()->can('backgroundimage-edit')))
                        <a href="#" class="btn btn-primary" style="visibility: hidden;">no visibilty</a>
                    @endif
                </div>

            </div>
            <table class="table table-hover" id="datatable-example">
                <thead>
                    <tr>
                        <th><input type="checkbox" class="group-checkable" data-set="#datatable-example .checkboxes" /></th>
                        <th>Id</th>
                        <th>صورة</th>
                        <th>الحالة</th>
                        <th></th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <!--Add background image Modal-->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModal">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form method="POST" action="{{ route('backgroundimage.store') }}" id="form_backgroungimage_add"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">إضافة الصورة الخلفية</h4>
                    </div>
                    <div class="modal-body">

                        <div id="image1_div">
                            <div class="row">
                                <div class="col-md-6">
                                    <img src="{{ asset('assets/img/bg-bassam.png') }}" class="img-responsive">
                                    <p>إختيارك لصورة تمتلك أبعاد أكبر من أبعاد زجهزة الهاتف سيتيح الفرصة لحركة الصورة
                                        الأفقية</p>
                                </div>
                                <div class="col-md-6">
                                    @php $return = false @endphp
                                    <div class="form-group row ">

                                        <div class="col-md-10 controls">
                                            <div class="fileupload {{ $return != '' ? 'fileupload-exists' : 'fileupload-new' }}"
                                                data-provides="fileupload">

                                                @if ($return != '')
                                                    <div style="max-width: 400px; max-height: 400px;"
                                                        class="fileupload-new thumbnail">
                                                        <img alt="" src="{{ asset('assets/img/no-image.png') }}">
                                                    </div>
                                                    <div class="fileupload-preview fileupload-exists thumbnail"
                                                        id="image1"
                                                        style="max-width: 400px; max-height: 400px; line-height: 20px;">
                                                        <a data-gallery="" class="gallery-item"
                                                            href="{{ asset('uploads/backgroundimage/' . $backgroundimage->image_url) }}"><img
                                                                src="{{ asset('uploads/backgroundimage/' . $backgroundimage->image_url) }}"
                                                                style="max-height:350px;" /></a>
                                                    </div>
                                                @else
                                                    <div style="max-width: 400px; max-height: 400px;"
                                                        class="fileupload-new thumbnail">
                                                        <img alt="" src="{{ asset('assets/img/no-image.png') }}">
                                                    </div>
                                                    <div class="fileupload-preview fileupload-exists thumbnail"
                                                        id="image1"
                                                        style="max-width: 400px; max-height: 400px; line-height: 20px;">
                                                    </div>
                                                @endif
                                                <div>
                                                    <span class="btn btn-file">
                                                        <span class="fileupload-new">اختر صورة</span>
                                                        <span class="fileupload-exists">تغيير الصورة</span>
                                                        <input type="file" name="background_image"
                                                            class="background_image" />
                                                    </span>
                                                    <a href="javascript:void(0)"
                                                        class="btn remove_picture fileupload-exists"
                                                        data-dismiss="fileupload"
                                                        style="padding-left: 0.5vmax; padding-right: 0.5vmax"><i
                                                            class="fa fa-trash-o" aria-hidden="true"></i></a>
                                                    <p id="image1-dim" class="label label-success" style="display:none;">
                                                    </p>
                                                    <p id="image1-size" class="label label-success"
                                                        style="display:none;">
                                                    </p>
                                                </div>
                                            </div>
                                            <code>الحجم الأقصى المسموح به:</code> 1MB
                                        </div>

                                        <div class="img-container" class="input">
                                            <input type="hidden" class="x" name="logo_x" id="x" />
                                            <input type="hidden" class="y" name="logo_y" id="y" />
                                            <input type="hidden" class="w" name="logo_w" id="w" />
                                            <input type="hidden" class="h" name="logo_h" id="h" />
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" onclick='closeModal("#addModal")'
                            aria-label="Close"><span aria-hidden="true">إلغاء</span></button>
                        <button class="btn btn-primary img-submit-btn">حفظ</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--Modal Close-->

    <!-- Edit Twasul Type Modal -->
    <div class="modal fade" id="editModal" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content" style="margin-top: 70px ">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">تحرير الصورة الخلفية</h4>
                </div>
                <form method="POST" action="{{ route('admin.backgroundimage.editbackground') }}"
                    id="form_backgroungimage_edit" enctype="multipart/form-data">
                    @csrf

                    <div class="modal-body">

                        <div id='editModal_data'></div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" onclick='closeModal("#editModal")'
                            aria-label="Close"><span aria-hidden="true">إلغاء</span></button>
                        <button class="btn btn-primary img-submit-btn">تحديث</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- Modal Close -->

    <form method="POST" class="inline" id="bulkaction">
        @csrf
        <input type="hidden" value="" name="ids" id="ids" />
    </form>
@endsection

@section('page_script')
    <script type="text/javascript" language="javascript" class="init">
        $('.img-submit-btn').prop('disabled', true);
        $('#editModal').on('show.bs.modal', function() {
            $('.img-submit-btn').prop('disabled', true);
        });
        $(document).on("change", ".background_image", function(e) {
            var image = $(this).val();
            if (image) {
                $('.img-submit-btn').removeAttr('disabled');
            } else {
                $('.img-submit-btn').prop('disabled', 'disabled');
            }
        });

        $(document).on("click", "#edit_background", function(e) {
            e.preventDefault(); // Prevent default action
            var id = $(this).data('edit_background');

            $.get('{{ route('admin.backgroundimage.geteditcomponent') }}', {
                id: id
            }, function(response) {
                $('#editModal_data').html(response); // Insert raw HTML
                $('#editModal').modal('show'); // Show modal
            }).fail(function(xhr, status, error) {
                console.error('Error:', error);
                console.error('Status:', status);
                console.error('Response:', xhr.responseText);
            });
        });



        function closeModal(id) {
            $(id).modal('hide');
        }

        jQuery(document).ready(function($) {

            $('#datatable-example').DataTable({
                processing: true,
                serverSide: true,
                "order": [
                    [1, "desc"]
                ],
                language: {
                    search: "",
                    searchPlaceholder: "بحث",
                    "zeroRecords": "لا يوجد محتوى",
                    processing: "<img src='{{ url('/') }}/assets/img/Webp.net-resizeimage.gif' />"
                },
                ajax: {
                    "url": "{{ route('admin.backgroundimage.datatable') }}",
                    "type": "POST",
                    "headers": {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                },
                columns: [{
                        data: 'check',
                        name: 'check'
                    },
                    {
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'image_url',
                        name: 'image_url'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'actions',
                        name: 'actions'
                    }
                ],
                "iDisplayLength": 50,
                "columnDefs": [{
                        "targets": [1],
                        "visible": false,
                        "searchable": false
                    },
                    {
                        "targets": [0, 1, 2, 4],
                        "searchable": false
                    },
                    {
                        "targets": [0, 1, 2, 3, 4],
                        "orderable": false
                    }
                ]
            });

            $('#datatable-example_wrapper .dataTables_filter input').addClass("input-medium ");
            $('#datatable-example_wrapper .dataTables_length select').addClass("select2-wrapper span12");
            $('#datatable-example_wrapper .dataTables_length select').removeClass("form-control");

            $('#datatable-example input').click(function() {
                $(this).parent().parent().parent().toggleClass('row_selected');
            });
            $(".select2-wrapper").select2({
                minimumResultsForSearch: -1
            });

        });

        //image cropping code write below
        $(document).on('click', '#startCrop', function(e) {

            var image = $('#image1 .cropbox');
            AspectRatio = '1:1';
            maxWidth = MaxHeight = 1170;
            var value = $("#beacon_target").val();
            // console.log(image[0]);
            var originalWidth = image[0].naturalWidth;
            var originalHeight = image[0].naturalHeight;
            $('#image1 .cropbox').imgAreaSelect({
                handles: true,
                fadeSpeed: 200,
                onSelectChange: updateCoords,
                imageHeight: originalHeight,
                imageWidth: originalWidth,
                aspectRatio: AspectRatio,
                maxHeight: MaxHeight,
                maxWidth: maxWidth,
                // parent: '#image1'
            });
            $("#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);
        }

        //image cropping edit code write below
        $(document).on('click', '#startCrop2', function(e) {

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

        });

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

            $('#x2').val(selection.x1);
            $('#y2').val(selection.y1);
            $('#w2').val(selection.width);
            $('#h2').val(selection.height);
            $("#image2-dim").html('width: ' + selection.width + ', height: ' + selection.height);
        }
    </script>
    <script src="{{ asset('assets/plugins/blueimp/jquery.blueimp-gallery.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/bootstrap/js/bootstrap-fileupload.js') }}"></script>
    <script src="{{ asset('assets/cpanel/js/image_upload.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/js/jquery.imgareaselect.pack.js') }}"></script>
@endsection