@extends('dashboard::layouts.app')


@section('title')
    <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">
        Carousel
    </h5>
@endsection

@section('content')
    <style>
        .img-thumbs {
            background: #eee;
            border: 1px solid #ccc;
            border-radius: 0.25rem;
            margin: 1.5rem 0;
            padding: 0.75rem;
        }

        .img-thumbs-hidden {
            display: none;
        }

        .wrapper-thumb {
            position: relative;
            display: inline-block;
            margin: 1rem 0;
            justify-content: space-around;
        }

        .img-preview-thumb {
            background: #fff;
            border: 1px solid none;
            border-radius: 0.25rem;
            box-shadow: 0.125rem 0.125rem 0.0625rem rgba(0, 0, 0, 0.12);
            margin-right: 1rem;
            max-width: 140px;
            padding: 0.25rem;
        }

        .remove-btn {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: .7rem;
            top: -5px;
            right: 10px;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 10px;
            font-weight: bold;
            cursor: pointer;
        }

        .remove-btn:hover {
            box-shadow: 0px 0px 3px grey;
            transition: all .3s ease-in-out;
        }
    </style>


    <!--begin::Card-->
    <div class="card card-custom gutter-b example example-compact card-collapsed" data-card="true" id="kt_card_4">
        <div class="card-header">
            <h3 class="card-title">
                Add New Carousel
            </h3>
            <div class="card-toolbar">
                <a href="#" class="btn btn-icon btn-sm btn-light-primary mr-1" data-card-tool="toggle">
                    <i class="ki ki-arrow-down icon-nm"></i>
                </a>
            </div>
        </div>

        <form class="form" action="{{ route('carousel.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="card-body">

                <div class="row form-group">
                    <label class="col-lg-3 col-form-label text-right"> Carousel Title:</label>
                    <div class="col-lg-8">
                        <input type="text" name="title" class="form-control mb-2" placeholder="Enter carousel title here" value="{{ old('title') }}" required />
                        @error('title')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <div class="row form-group">
                    <label class="col-lg-3 col-form-label text-right"> Carousel Image:</label>
                    <div class="col-lg-8">
                        <input type="file" name="main_image" class="form-control mb-2" placeholder="Choose carousel main image here" value="{{ old('main_image') }}" />
                        @error('main_image')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
            </div>


            <div class="card-footer">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <button type="submit" class="btn btn-success mr-2">Add New Carousel</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!--end::Card-->

    <!--begin::Card-->
    <div class="card card-custom gutter-b">
        <div class="card-header flex-wrap py-3">
            <div class="card-title">
                <h3 class="card-label">
                    Carousel List
                </h3>
            </div>
        </div>
        <div class="card-body">
            <!--begin: Datatable-->
            <div class="tab-pane" id="tab_1_1">
                <div class="portlet-body">
                    <div class="text-right">
                        <form action="{{ route('carousel.view') }}" method="GET">
                            <input type="text" name="search" required />
                            <button type="submit">Search</button>
                        </form>
                    </div>
                    <table class="table zero-configuration ordertable">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Carousel Name</th>
                                <th>Actions</th>
                            </tr>
                        </thead>

                        <tbody>
                            @if (count($carousels) > 0)
                                @foreach ($carousels as $carousel)
                                    <tr>
                                        <td>{{ $carousels->firstItem() + $loop->index }}</td>
                                        <td>{{ $carousel->title }}</td>
                                        <td>
                                            <span style="display: inline-block;">
                                                <a href="{{ route('carousel.edit', ['id' => $carousel->id]) }}" class="btn btn-sm btn-clean btn-icon btn-icon-md" title="Edit"><i class="la la-edit"></i></a>
                                            </span>

                                            <span style="display: inline-block;">
                                                <form action="{{ route('carousel.delete', ['id' => $carousel->id]) }}" method="POST">
                                                    @csrf
                                                    <input type="hidden" name="id" value="{{ $carousel->id }}">
                                                    <button class="btn btn-sm btn-clean btn-icon btn-icon-md" title="Delete" onClick="return confirm('Are you sure want to delete?')"><i class="la la-trash"></i></button>
                                                </form>
                                            </span>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="4">No Carousel Found</td>
                                </tr>
                            @endif
                        </tbody>

                    </table>
                </div>
            </div>


            <div class='dataTables_paginate paging_simple_numbers float-right card-body'>

                {{ $carousels->appends(Request::except('page'))->links('pagination::bootstrap-4') }}

            </div>
            <!--end: Datatable-->
        </div>
    </div>
    <!--end::Card-->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        var imgUpload = document.getElementById('upload-img'),
            imgPreview = document.getElementById('img-preview'),
            imgUploadForm = document.getElementById('form-upload'),
            totalFiles, previewTitle, previewTitleText, img;

        imgUpload.addEventListener('change', previewImgs, true);

        function previewImgs(event) {
            totalFiles = imgUpload.files.length;

            if (!!totalFiles) {
                imgPreview.classList.remove('img-thumbs-hidden');
            }

            for (var i = 0; i < totalFiles; i++) {
                wrapper = document.createElement('div');
                wrapper.classList.add('wrapper-thumb');
                removeBtn = document.createElement("span");
                nodeRemove = document.createTextNode('x');
                removeBtn.classList.add('remove-btn');
                removeBtn.appendChild(nodeRemove);
                img = document.createElement('img');
                img.src = URL.createObjectURL(event.target.files[i]);
                img.classList.add('img-preview-thumb');
                wrapper.appendChild(img);
                wrapper.appendChild(removeBtn);
                imgPreview.appendChild(wrapper);

                $('.remove-btn').click(function() {
                    $(this).parent('.wrapper-thumb').remove();
                });

            }


        }
    </script>
@endsection