@extends('admin.layout.index')
@section('title')
     {{ __('messages.core') }}
@endsection
@section('css')
    <style>
        .center-test {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

        }

        .form-input-test {
            width: 350px;
            padding: 20px;
            background: #fff;
            box-shadow: -3px -3px 7px rgba(94, 104, 121, 0.377),
                3px 3px 7px rgba(94, 104, 121, 0.377);
            margin-bottom: 50px;
            margin-top: 50px;
        }

        .form-input-test img {
            width: 100%;
            margin-bottom: 30px;
            position: relative;
            max-height: 100%;
            border: 4px solid #fff;

        }

        .form-input-test input {
            display: none;
        }

        .form-input-test label {
            display: block;
            width: 45%;
            height: 45px;
            line-height: 50px;
            text-align: center;
            background: #1172c2;
            color: #fff;
            font-size: 15px;
            font-family: "Open Sans", sans-serif;
            text-transform: Uppercase;
            font-weight: 600;
            border-radius: 5px;
            cursor: pointer;
            margin: auto;
        }

        .image-core {
            max-height: 300px;
            width: auto;
            overflow: hidden;
            height: 300px;
            text-align: center;
            max-lines: 1;
            align-content: center;
            text-overflow: ellipsis;
        }

        .title-core {
            overflow: hidden;
            max-lines: 1;
            text-overflow: ellipsis;
            max-height: 22px;
        }
    </style>
@endsection
@section('content')
    <div class="content-header">

    </div>
    <div class="content">
        <div class="col-12">
            <div class="box-header bg-primary">
                <h4 class="box-title">
                    <strong>{{ $core->title . ' (  ' . $core->getEveryCoreBusinessAndProject->count() . ' ITEMS) ' }}</strong>
                </h4>
            </div>

            @if (!empty($core->getEveryCoreBusinessAndProject))
                @foreach ($core->getEveryCoreBusinessAndProject as $business)
                    <div class="card justify-content-between d-flex">
                        <div class="card-header text-center">
                            <h4 class="card-title text-center"> {{ $business->title }} </h4>
                            <a href="{{ route('project.details.add-view', $business->id) }}">
                                <button class="btn btn-primary pull-right">
                                    {{ __('messages.add-project') }}
                                </button></a>

                        </div>

                    </div>
                    <div class="row">
                        @if(count($business->getEveryProject) > 0)

                        @foreach ($business->getEveryProject as $media)
                            @if (!empty($media->getProjects))
                                <div class="col-md-12 col-lg-4">
                                    <div class="card">
                                        @if ($media->getProjects->imageUrl)
                                            <img class="card-img-top image-core" src="{{ $media->getProjects->imageUrl }}"
                                                alt="Card image cap">
                                        @else
                                            <div class="card-img-top image-core">
                                                <h2>no image selected</h2>
                                            </div>
                                        @endif
                                        <div class="card-body">
                                            <h4 class="card-title title-core">
                                                {{ $media->getProjects->title }} </h4>
                                            <p class="card-text"> {{ $media->getProjects->pref }} </p>
                                        </div>
                                        <div class="card-footer justify-content-between d-flex">
                                            <ul class="list-inline mb-0 mr-2">
                                                <li><a
                                                        href="{{ route('project.details.updated', $media->getProjects->id) }}">
                                                        <i class="fa fa-edit"> Edit </i></a></li>
                                            </ul>

                                            <ul class="list-inline mb-0">
                                                <li><a href="#" id="{{ $media->getProjects->id }}" onclick="deleteCheck(this)">
                                                        <i class="fa fa-trash"> Delete </i></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                        @else
                            <h3 style="text-align:center;">لا يوجد بيانات لعرضها</h3>
                        @endif
                    </div>
                @endforeach

                @else
              <h3 style="text-align:center;">لا يوجد بيانات لعرضها</h3>
            @endif



        </div>
    </div>
@endsection
@section('js')
    <script>
        function showPreview(event) {
            //alert('showPreview');
            if (event.target.files.length > 0) {
                let src = URL.createObjectURL(event.target.files[0]);
                let preview = document.getElementById("file-ip-1-preview");
                preview.src = src;
                preview.style.display = "block";
            }
        }

        function showPreview2(event) {
            //alert('showPreview');
            if (event.target.files.length > 0) {
                let src = URL.createObjectURL(event.target.files[0]);
                let preview = document.getElementById("file-ip-2-preview");
                preview.src = src;
                preview.style.display = "block";
            }
        }

        function deleteCheck(el) {
            console.log(el);
            swal.fire({

                title: `{{ __('Are you sure to delete') }} `,
                text: "{{ __('You will not be able to recover this!') }}",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "{{ __('Yes, delete it!') }}",
                cancelButtonText: "{{ __('Cancel') }}",
                closeOnConfirm: false
            }).then(function(result) {
                if (result.isConfirmed) {
                    // ajax to remove here
                    $.ajax({
                        url: "{{ route('project.details.delete') }}",
                        method: "post",
                        data: {
                            id: el.id,
                            _token: '{{ csrf_token() }}',
                        },
                    }).done(function(data) {
                        $('.bg-warning').remove().countSeletToDelete();
                        return swal.fire({
                            title: `{{ __('The deletion was completed successfully') }}`,
                            text: "{{ __('not related to products') }}",
                            type: "success",
                            confirmButtonColor: "#DD6B55",
                            confirmButtonText: "{{ __('Okey') }}",
                            confirmOnConfirm: false
                        });
                    }).then(function() {
                        console.log('aaa');
                        window.location.reload();
                    }).catch(function(error) {
                        // Handle AJAX errors here
                        console.error(error);
                    });
                }
            });
        }

        const fileInput = document.getElementById('file-input');
        console.log(fileInput);

        /* fileInput.addEventListener('change', event => {
            if (fileInput.files.length > 0) {
                const img = document.createElement('img');
                const selectedImage = fileInput.files[0];
                const objectURL = URL.createObjectURL(selectedImage);

                img.onload = function handleLoad() {
                    console.log(`Width: ${img.width}, Height: ${img.height}`);
                    if (img.width < 100 || img.height < 100) {
                        console.log("The image's width or height is less than 100px");
                    }
                    URL.revokeObjectURL(objectURL);
                };

                img.src = objectURL;
                document.body.appendChild(img);
            }

            // Reset the input value to allow selecting the same file again
            fileInput.value = null;
        }); */
    </script>
@endsection