@extends('Dashboard.layouts.app')
@section('search')
    <!-- App Search-->
    <form class="app-search d-none d-md-block" action="{{ route('notification.create') }}" method="get">
        <div class="position-relative">
            <input type="text" name="keyword" class="form-control" placeholder="Search..." autocomplete="off"
                id="search-options" value="{{ request()->keyword ?? '' }}">
            <span class="mdi mdi-magnify search-widget-icon"></span>
            <span class="mdi mdi-close-circle search-widget-icon search-widget-icon-close d-none"
                id="search-close-options"></span>
        </div>
    </form>
@endsection
@section('noti_active', 'active')
@section('main_content')

    <div class="page-content" data-aos="fade-up ">
        <div class="container-fluid">
            <div class="col-xxl-12">
                <div class="card">
                    <div class="card-header align-items-center d-flex" data-aos="fade-up">
                        <h4 class="card-title mb-0 flex-grow-1">Noti Messages List</h4>
                        <div class="flex-shrink-0">

                            <!-- Default Modals -->
                            <button type="button" class="btn btn-primary " data-bs-toggle="modal"
                                data-bs-target="#myModal">Create Noti Message</button>
                            <div id="myModal" class="modal fade" tabindex="-1" aria-labelledby="myModalLabel"
                                aria-hidden="true" style="display: none;">
                                <div class="modal-dialog modal-dialog-centered ">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="myModalLabel">Create New Noti Message</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"> </button>
                                        </div>
                                        <div class="modal-body">
                                            <form action="{{ route('notification.store') }}" method="post"
                                                enctype="multipart/form-data">
                                                @csrf
                                                <div class="mb-3">
                                                    <label for="image">Image</label>
                                                    <div class="mb-3">
                                                        <img src="{{ asset('images/logo.jpg') }}"
                                                            class="border-dotted imgPreview" alt=""
                                                            style="width: 150px;border-radius: 10px;border: 1px solid #888   ">
                                                    </div>
                                                    <input type="file" class="form-control" name="image"
                                                        onchange="addPhoto(this)" id="photo" accept="image/*" />
                                                </div>
                                                <div class="mb-3 ">
                                                    <label for="basiInput" class="form-label">Title</label>
                                                    <input type="text" required class="form-control" name="title"
                                                        id="title">
                                                </div>

                                                <div class="mb-3 ">
                                                    <label for="basiInput" class="form-label">Description</label>
                                                    <textarea name="body" id="description" cols="30" rows="10" class="form-control"></textarea>
                                                </div>

                                                <div class="text-end mt-3">
                                                    <button type="button" class="btn btn-light"
                                                        data-bs-dismiss="modal">Close</button>
                                                    <button type="submit" class="btn btn-primary ">Create</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div><!-- /.modal-content -->
                                </div><!-- /.modal-dialog -->
                            </div><!-- /.modal -->
                        </div>
                    </div><!-- end card header -->

                    <div class="card-body">
                        <div class="table-responsive table-card">
                            <table class="table table-borderless table-centered align-middle table-nowrap mb-0">
                                <thead class="text-muted table-light">
                                    <tr>
                                        <th scope="col"> ID</th>
                                        <th scope="col">Image</th>
                                        <th scope="col">Title</th>
                                        {{-- <th scope="col">Description</th> --}}
                                        <th scope="col">Action</th>
                                        <th scope="col">Created At</th>
                                        <th scope="col">Updated At</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($notifications as $key=>$noti)
                                        <tr>
                                            <td>{{ ($notifications->currentPage() - 1) * $notifications->perPage() + $key + 1 }}</td>
                                            <td>
                                                <img src="{{ $noti->image ? asset('storage/notifications/'.$noti->image) : asset('images/logo.jpg') }}" alt="photo" width="50px"
                                                    height="50px">
                                            </td>
                                            <td>{{ $noti->title }}</td>
                                            {{-- <td>{{ Str::limit($noti->body, 80) }}</td> --}}
                                            <td>
                                                @include('Dashboard.Notification.edit')

                                                <button class="btn btn-danger btn-sm "
                                                    onclick="confirm('{{ $noti->title }}','{{ $noti->id }}')">
                                                    <i class='bx bx-trash'></i>
                                                </button>
                                                <form action="{{ route('notification.destroy', $noti->id) }}"
                                                    id="typeDel{{ $noti->id }}" method="post">
                                                    @csrf @method('DELETE')
                                                </form>
                                            </td>
                                            <td>{{ $noti->created_at->diffForHumans() }}</td>
                                            <td>{{ $noti->updated_at->diffForHumans() }}</td>
                                        </tr>
                                    @empty
                                        <tr class="text-center">
                                            <td colspan="6">
                                                <img src="{{ asset('assets/images/nodata.webp') }}" width="300"
                                                    alt="">
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody><!-- end tbody -->
                            </table><!-- end table -->

                            <div class="float-end mt-3 me-3">
                                {{ $notifications->links() }}
                            </div>
                        </div>
                    </div>
                </div> <!-- .card-->
            </div>
        </div>
        <!-- container-fluid -->
    </div>

@endsection

@section('script')
    <script>
        function chageImg(id) {
            let preview = document.getElementById('previewImg' + id);
            let file = document.getElementById('photo' + id).files[0];
            let reader = new FileReader();

            reader.addEventListener("load", function() {
                preview.src = reader.result;
            })

            if (file) {
                reader.readAsDataURL(file);
            }
            console.log(file);
            console.log(preview);
        }


        function confirm(value, id) {
            Swal.fire({
                title: "Are you sure?",
                text: ` ${value} notification will be delete!`,
                icon: "warning",
                showCancelButton: !0,
                confirmButtonText: "Yes, delete it!",
                cancelButtonText: "No, cancel!",
                confirmButtonClass: "btn btn-primary w-xs me-2 mt-2",
                cancelButtonClass: "btn btn-danger w-xs mt-2",
                buttonsStyling: !1,
                showCloseButton: !0,
            }).then(function(t) {
                t.value ?
                    document.getElementById('typeDel' + id).submit()

                    :
                    t.dismiss === Swal.DismissReason.cancel &&
                    Swal.fire({
                        title: "Cancelled",
                        text: "Your imaginary file is safe",
                        icon: "error",
                        confirmButtonClass: "btn btn-primary mt-2",
                        buttonsStyling: !1,
                    });
            });
        }

        function addPhoto(ele) {
            const file = ele.files[0];
            if (file) {
                let reader = new FileReader();
                reader.onload = function(event) {
                    $('.imgPreview').attr('src', event.target.result);
                }
                reader.readAsDataURL(file);
            }
        }

        function editPhoto(ele) {
            const file = ele.files[0];
            if (file) {
                let reader = new FileReader();
                reader.onload = function(event) {
                    $('.editImgPreview').attr('src', event.target.result);
                }
                reader.readAsDataURL(file);
            }
        };

        // function clickFile() {
        //     document.getElementById('photo').click()
        // }

        // function clickEditFile() {
        //     document.getElementById('edit-photo').click()
        // }
    </script>

@endsection