@extends ('backend.layouts.app')

@section('title', 'Image Upload On GS')

@section('page-header')
    <h1>
        {{ trans('labels.backend.menus.management') }}
        <small>{{ trans('labels.backend.menus.create') }}</small>
    </h1>
@endsection

@section('content')

    <div class="box box-info">
        @if (Session::has('success'))
            <div class="alert alert-success">{{ Session::get('success') }}</div>
        @endif
        @if (Session::has('error'))
            <div class="alert alert-danger">{{ Session::get('error') }}</div>
        @endif
        <div class="box-header with-border">
            <h3 class="box-title">Upload Image on Google Cloud</h3>
        </div><!-- /.box-header -->

        {{-- Add - Including Form blade file --}}
        <div class="box-body">
            <div class="form-group">
                <div class="edit-form-btn">
                    <form method="POST" action="{{ route('admin.upload_image_server') }}" accept-charset="UTF-8"
                        enctype="multipart/form-data" class="form-horizontal" role="form" id="form">
                        @csrf()
                        <div class="form-group">
                            <label for="icon" class="col-lg-3 col-md-3 col-sm-3 control-label required"
                                title="Font Awesome Class. eg. fa-edit">Image Name</label>
                            <div class="col-lg-4 col-md-4 col-sm-4">
                                <input type="text" name="name" pattern="^[A-Za-z1-9 _-]+$" class="form-control"
                                    required>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="name" class="col-lg-3 col-md-3 col-sm-3 control-label required">Folder
                                Name</label>
                            <div class="col-lg-4 col-md-4 col-sm-4">
                                <select name="folder_type" id="" class="form-control" required>
                                    <option value="">--Select--</option>
                                    <option value="news-photo">News Photo</option>
                                    <option value="album">Album</option>
                                    <option value="mastervideothumb">Video Thumb</option>
                                    <option value="rss">RSS</option>
                                    <option value="newsletter">Newsletter</option>
                                    <option value="epaper">Epaper</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="icon" class="col-lg-3 col-md-3 col-sm-3 control-label required"
                                title="Font Awesome Class. eg. fa-edit">Select Image</label>
                            <div class="col-lg-4 col-md-4 col-sm-4">
                                <input type="file" name="file" class="form-control" required>
                            </div>
                        </div>
                        <div class="box-body">
                            <div class="form-group">
                                <div class="edit-form-btn">
                                    <a class="btn btn-default btn-md" href="{{ url('admin/upload-images') }}">Cancel</a>
                                    <input class="btn btn-primary btn-md" type="submit" value="Upload">
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div><!--box-->
    </div>
    <!-- view data -->
    <div class="box box-info">
        <div class="box-body">
            <div class="box-header">
                <h3 class="box-title">All Images List</h3>
            </div>
            <table class="table table-bordered" id="table">
                <thead>
                    <tr>
                        <th>Sno</th>
                        <th>Name</th>
                        <th>Folder Type</th>
                        <th>Storage Url</th>
                        <th>Admin</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @php $i=1; @endphp
                    @foreach ($all_data as $val)
                        @php
                            if ($val->admin_id == 1) {
                                $admin_name = 'Admin';
                            }
                        @endphp
                        <tr>
                            <td>{{ $i }}</td>
                            <td>{{ $val->image_name }}</td>
                            <td>{{ $val->folder_type }}</td>
                            <td><a href="{{ $val->storage_url }}" target="_blank">View Image</a></td>
                            <td>{{ $admin_name }}</td>
                            <td style="display:inline-flex;"> &nbsp; <a
                                    onclick="return confirm('Are you sure you want to delete this image?');"
                                    href="{{ url('admin/delete-upload-images/' . $val->id) }}" id="delete"
                                    title="Trash" style="padding: 3px 7px;font-size: 13px;"
                                    class="btn btn-flat btn-default"><i data-toggle="tooltip" data-placement="top"
                                        title="" class="fa fa-trash" data-original-title="Trash"></i></a></td>
                        </tr>
                        @php $i++; @endphp
                    @endforeach
                </tbody>
            </table>
            {{ $all_data->links() }}
        </div>
    </div>

    @include('backend.menus.partials.modal')


@endsection
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
<script>
    $(document).ready(function() {
        $('#table').DataTable();
    });
</script>