@extends('admin.layouts.app')

@section('title', '| Motivational Quotes')
@section('quotes', 'active')

@section('search_url', route('admin.quotes'))
@section('search_text', app('request')->input('search'))

@section('show_search_bar', true)

@section('content')

    @session('warning')
        <div class="alert text-white bg-warning" role="alert">
            <div class="iq-alert-text"> {{ session('warning') }} </div>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <i class="ri-close-line"></i>
            </button>
        </div>
    @endsession

    @session('success')
        <div class="alert text-white bg-primary" role="alert">
            <div class="iq-alert-text"> {{ session('success') }} </div>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <i class="ri-close-line"></i>
            </button>
        </div>
    @endsession

    @session('danger')
        <div class="alert text-white bg-danger" role="alert">
            <div class="iq-alert-text"> {{ session('danger') }} </div>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <i class="ri-close-line"></i>
            </button>
        </div>
    @endsession

    <div class="iq-card">
        <div class="iq-card-header d-flex justify-content-between">
            <div class="iq-header-title">
                <h4 class="card-title">Motivational Quotes</h4>
            </div>
            <a href="{{ route('admin.quotes.create') }}"><button type="button" class="btn btn-primary"><i class="ri-add-line"></i>Add New</button></a>
        </div>
        <div class="iq-card-body">
            <div class="table-responsive">
                <table id="datatable" class="table">
                    <thead class="thead-light">
                        <tr>
                            <th style="min-width: 300px">Quote</th>
                            <th>Author</th>
                            <th>Status</th>
                            <th>Delivered On</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if ($quotes->count() < 1)
                            <tr>
                                <td colspan="4" class="text-center">No quote found</td>
                            </tr>
                        @else
                            @foreach ($quotes as $quote)
                                <tr>
                                    <td>
                                        {{ $quote->quote }}
                                    </td>
                                    <td class="text-capitalize" style="white-space: nowrap;">{{ $quote->author }}</td>
                                    <td style="white-space: nowrap;">
                                        @if ($quote->delivered_on)
                                            <span class="badge iq-bg-primary">Delivered</span>
                                        @else
                                            <span class="badge iq-bg-warning">Pending</span>
                                        @endif
                                    </td>
                                    <td style="white-space: nowrap;">{{ $quote->delivered_on ? \Carbon\Carbon::parse($quote->delivered_on)->format('d F Y') : 'Not Delivered' }}</td>
                                    <td style="white-space: nowrap;">
                                        {{-- @if (!$quote->delivered_on) --}}
                                            <div class="flex align-items-center list-user-action">
                                                <a class="iq-bg-primary" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit" href="{{ route('admin.quotes.edit', $quote->id) }}"><i class="ri-pencil-line"></i></a>
                                                <a class="iq-bg-primary" onclick="confirmDeletion(event, '{{ route('admin.quotes.delete', $quote->id) }}')" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete" href="#"><i class="ri-delete-bin-line"></i></a>
                                            </div>
                                        {{-- @endif --}}
                                    </td>
                                </tr>
                            @endforeach
                        @endif
                    </tbody>
                </table>
            </div>
            @if (!$search)
                <div>
                    {{ $quotes->links() }}
                </div>
            @endif
        </div>
    </div>

    <!-- deletion confirmation modal -->
    <div class="modal fade" id="deletionModal" tabindex="-1" role="dialog" aria-labelledby="deletionModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deletionModalLabel">Delete Quote</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this quote? This action cannot be undone.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">No, Keep</button>
                    <form id="deletion_url" action="" method="POST">
                        @csrf
                        <button type="submit" class="btn btn-danger">Yes, Delete</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('scripts')
    <script>
        function confirmDeletion(e, deletion_url) {
            e.preventDefault();
            $('#deletion_url').attr('action', deletion_url);
            $('#deletionModal').modal('show');
        }
    </script>
@endsection