@extends('admin.layout.index')
@section('title')
    {{ __('messages.tenderCategory') }}
@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;
        }
    </style>
@endsection
@section('content')
    <div class="content-header">

    </div>
    <div class="content">
        <div class="col-12">

            <div class="box">
                <div class="box-header bg-primary">
                    <h4 class="box-title"><strong> {{ $cate->name . ' (' . $cate->getNews->count() . ' ITEMS) ' }} </strong>
                    </h4>
                </div>

                <div class="box-body">
                    <div class="table-responsive">
                        <table class="table product-overview">
                            <thead>
                                <tr>
                                    <th>Cover</th>
                                    <th>News Info</th>
                                    <th>Date</th>
                                    <th>Arrangement</th>
                                    <th style="text-align:center">Edit</th>
                                    <th style="text-align:center">Delete</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (!empty($cate->getNews))
                                    @foreach ($cate->getNews as $business)
                                        <tr>
                                            <td><img src="{{ $business->image_url }}" alt="" width="80">
                                            </td>
                                            <td>
                                                <h5> {{ $business->title }} </h5>
                                                <p> {{ $business->pref }} </p>
                                            </td>
                                            <td> {{ $business->date }} </td>
                                            <td width="70">
                                                <input type="number" class="form-control" min="0"
                                                    id=" {{ $business->id }} " step="1"
                                                    value="{{ $business->arrangment }}" onchange="updateArrangement(this)">
                                            </td>
                                            <td align="center"><a href="{{ route('news.details.updated', $business->id) }}"
                                                    class="btn btn-circle btn-xs" data-toggle="tooltip"
                                                    data-original-title="Delete"><i class="fa fa-edit"></i></a></td>
                                            <td align="center"><a class="btn btn-circle btn-danger btn-xs"
                                                    onclick="deleteCheck(this)" id="{{ $business->id }}"
                                                    data-toggle="tooltip" data-original-title="Delete"><i
                                                        class="ti-trash"></i></a></td>
                                        </tr>
                                    @endforeach
                                @endif


                            </tbody>
                        </table>

                    </div>

                </div>
            </div>

        </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 updateArrangement(el) {
            const data = new FormData();
            data.append('id', el.id);
            data.append('arrangement', el.value);
            data.append('_token', '{{ csrf_token() }}');
            $.ajax({
                type: "post",
                method: 'POST',
                data: data,
                processData: false,
                contentType: false,
                url: "{{ route('news.details.arrangement') }}",
                data: data,
                success: function(response) {
                    location.reload();
                },
                error: function(error) {},

            });
        }

        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('news.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);
                    });
                }
            });
        }
    </script>
@endsection