@extends('layout.admin')

@section('title')
    Media
@endsection

@section('content')
    <main class="page-content">
        <x-breadcrumb first="Medaia" second="List" url="javascript:void(0)" button-text="Upload New" />

        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <h5 class="mb-0">Media Files</h5>
                    {{-- <form class="ms-auto position-relative">
                        <div class="position-absolute top-50 translate-middle-y search-icon px-3"><i
                                class="bi bi-search"></i></div>
                        <input class="form-control ps-5" type="text" placeholder="search">
                    </form> --}}
                </div>
                <br>
                <div class="media-list">
                    @if (session('error'))
                        <x-alert type="danger" :message="session('error')" />
                    @elseif (session('success'))
                        <x-alert type="success" :message="session('success')" />
                    @endif
                    <div class="row">
                        @foreach ($data as $d)
                            <div class="col-md-4 mb-4">
                                @if (Helper::fileExtention($d['file_name']) != 'pdf')
                                    <img src="{{ $d['directory_url'] }}" data-url = "{{ $d['directory_url'] }}"
                                        data-filetype = "{{ Helper::fileExtention($d['file_name']) }}"
                                        data-filepath ="{{ route('admin.media.filedelete', Helper::encript($d['relative_path'])) }}"
                                        class="img-tabs" alt="{{ $d['file_name'] }}"
                                        style="
                                        width: 100%;
                                        object-fit: contain;
                                        height: 200px;
                                        cursor: pointer"
                                        loading="lazy">
                                @else
                                    <img src="{{ asset('admin/assets/images/pdf.png') }}"
                                        data-url = "{{ $d['directory_url'] }}" data-filetype = "pdf"
                                        data-filepath ="{{ route('admin.media.filedelete', Helper::encript($d['relative_path'])) }}"
                                        class="img-tabs" alt="{{ $d['file_name'] }}"
                                        style="
                                        width: 100%;
                                        object-fit: contain;
                                        height: 200px;
                                        cursor: pointer"
                                        loading="lazy">
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </main>

    <div class="modal fade" id="imageDetails" tabindex="-1" aria-modal="true" role="dialog" style="padding-left: 0px;">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Image Url</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="img-url" style="word-break: break-all;">
                    </div>
                    <a href="" class="btn btn-danger mx-auto d-block mt-3 image-delete-btn"
                        style="width: max-content;">Delete</a>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="newFileUpload" tabindex="-1" aria-modal="true" role="dialog" style="padding-left: 0px;">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Upload File</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form class="row g-3" method="post" action="{{ route('admin.media.upload') }}"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="col-12">
                            <div class="upload-image-video-list">
                                <div class="image-video-upload">
                                    <div class="image_upload_container">
                                        <label class="form-label">File</label>
                                        <input type="file"
                                            class="form-control @error('file')
                                            is-invalid
                                        @enderror"
                                            name="file" onchange="imageupload(this)">
                                        @error('file')
                                            <x-form-alert
                                                message="You need to select a file for upload and file size should be under 2MB." />
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary" style="width: 100px;">
                                    Upload
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js-add')
    <script>
        $(document).ready(function() {
            $('.delete-btn').on('click', function() {
                Swal.fire({
                    title: "Are you sure?",
                    text: "You won't be able to revert this!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, delete it!"
                }).then((result) => {
                    if (result.isConfirmed) {
                        let url = $(this).data('url');
                        window.location.href = url;
                    } else {
                        Swal.fire({
                            title: "Safe!",
                            text: "Your file is safe.",
                            icon: "success"
                        });
                    }
                });
            });
        });

        const imageDetailsModal = new bootstrap.Modal(document.getElementById('imageDetails'));
        const imageUploadModal = new bootstrap.Modal(document.getElementById('newFileUpload'));
        const imgTabs = $('.img-tabs');

        const newUploadForm = $('.btn-group .btn');

        imgTabs.on('click', function() {
            let src = $(this).data('url');
            let filetype = $(this).data('filetype');
            let deletepath = $(this).data('filepath');
            console.log(deletepath);
            if (filetype != 'pdf') {
                $('.img-url').html(`
                    <img src="${src}" style="width: 100%; margin-bottom: 20px;" />
                    <b>Image URL</b>: ${src}
                `);
            } else {
                $('.img-url').html(`
                    <b>Image URL</b>: ${src}
                `);
            }

            $('.image-delete-btn').attr('href', deletepath);

            imageDetailsModal.show();
        });

        newUploadForm.on('click', function() {
            imageUploadModal.show();
        })

        // Get a reference to the modal element
    </script>

    @if ($errors->has('file'))
        <script>
            imageUploadModal.show();
        </script>
    @endif
@endsection