@extends('layouts.master')
@section('css')
    <link rel="stylesheet" href="{{ asset('assets/css/magnific-popup.css') }}" type="text/css">
@endsection
@section('content')
    <div class="dashboard-body">
        <div class="cards shadow-none">
            <div class="card-body">
                <div class="row mb-2">
                    <div class="col-xl">
                        <form action="{{ url()->current() }}" method="get">
                            <div class="row justify-content-xl-end">
                                <div class="col mb-4">
                                    <h2 class="title-1">
                                        Dashboard Sponsor Links ({{ $eventDashboardSponsorLinks->total() }})
                                    </h2>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-3">
            <div class="col-xxl">
                <div class="row">
                    <div class="col-xxl">
                        <form method="get" action="{{ url()->current() }}">
                            <div class="row justify-content-xxl-end">
                                <div class="col-auto mb-2">
                                    <a href="{{ route('event.app.dashboard.sponsor.links.create') }}"
                                        class="btn btn-outline-primary px-4">+
                                        Add new</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Massage -->
        <div class="table-design custom-table container-fluid py-2">
            <table class="table display mb-5">
                <thead>
                    <th>Sr. No</th>
                    <th>Name</th>
                    <th>Link</th>
                    <th>Image</th>
                    <th>Index</th>
                    <th>Action</th>
                </thead>
                <tbody>
                    @if (count($eventDashboardSponsorLinks) > 0)
                        @php $i = $eventDashboardSponsorLinks->perPage() * ($eventDashboardSponsorLinks->currentPage() - 1) + 1; @endphp
                        @foreach ($eventDashboardSponsorLinks as $eventSponsorLink)
                            <tr>
                                <td>{{ $i++ }}</td>
                                <td>{{ $eventSponsorLink->name ?? '' }}</td>
                                <td>{{ $eventSponsorLink->link ?? '' }}</td>
                                <td>
                                    @if ($eventSponsorLink->image)
                                        <div class=" w-25">
                                            <a class="image-popup-no-margins mr-2"
                                                href="{{ getFilePath($eventSponsorLink->image->path) }}">
                                                <img src="{{ getFilePath($eventSponsorLink->image->path) }}"
                                                    class="img-responsive" style="width:50px;"></a>
                                        </div>
                                    @endif
                                </td>
                                <td>{{ $eventSponsorLink->index ?? '' }}</td>
                                <td>
                                    <div class="members-tools-button">
                                        <a href="{{ route('event.app.dashboard.sponsor.links.edit', $eventSponsorLink->id) }}"
                                            class="btn btn-sm-icon me-3">
                                            <img src="{{ asset('assets/images/icon/edit.png') }}">
                                        </a>
                                        <button class="btn btn-sm-icon me-3"
                                            onclick="sweetAlertAjax('delete','{{ route('event.app.dashboard.sponsor.links.destroy', $eventSponsorLink->id) }}', 'Are you sure you want to delete?')">
                                            <img src="{{ asset('assets/images/icon/delete.png') }}">
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    @else
                        <tr>
                            <td class="text-center" colspan="10">No Data Found </td>
                        </tr>
                    @endif
                </tbody>
            </table>
            {{ $eventDashboardSponsorLinks->appends(Request::all())->links() }}
        </div>
    </div>
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content" style="max-width: 500px; width: 100%; margin-left: 130px;">
                <div class="modal-header">
                    <h5 class="modal-title">Change Index</h5>
                    <button type="button" class="close" data-bs-dismiss="modal">&times;</button>
                </div>
                <form id="indexchange" method="POST">
                    @csrf
                    @method('PATCH')
                    <div class="modal-body">
                        <label>Enter Index</label>
                        <input type="text" class="form-control" id="index" placeholder="Enter index" name="index"
                            value="">
                        <input type="hidden" class="recordId" name="id" value="">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script src="{{ asset('assets/js/jquery.magnific-popup.min.js') }}"></script>
    <script>
        $(document).on('click', '.index-btn', function() {
            var recordId = $(this).data('id');
            var index = $(this).data('value');

            $('#indexchange .recordId').val(recordId);
            $('#index').val(index);
            $("#myModal").modal("show");

        });

        $('#indexchange').on('submit', function(e) {
            e.preventDefault();

            var recordId = $('.recordId').val();
            var index = $('#index').val();

            var url = "{{ route('event.app.home.buttons.update.index', ':eventAppHomeButton') }}";
            url = url.replace(':eventAppHomeButton', recordId);
            $.ajax({
                url: url,
                method: 'patch',
                data: {
                    id: recordId,
                    index: index,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    $('#myModal').modal('hide');
                    swal({
                        text: response.message,
                        icon: "success",
                        button: "Ok",
                    }).then(function() {
                        location.reload();
                    });
                }
            });
        });

        $(".image-popup-no-margins").magnificPopup({
            type: "image",
            closeOnContentClick: !0,
            closeBtnInside: !1,
            fixedContentPos: !0,
            mainClass: "mfp-no-margins mfp-with-zoom",
            image: {
                verticalFit: !0
            },
            zoom: {
                enabled: !0,
                duration: 300
            }
        });
    </script>
@endsection