@include('admin.includes.header')
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/css/fileinput.css" media="all"
      rel="stylesheet" type="text/css"/>
<style type="text/css">
    .main-section {
        margin: 0 auto;
        padding: 20px;
        margin-top: 100px;
        background-color: #fff;
        box-shadow: 0px 0px 20px #c1c1c1;
    }

    .fileinput-remove,
    .fileinput-upload {
        display: none;
    }
</style>
@include('admin.includes.top-nav')
@include('admin.includes.side-nav')

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">Manage Products</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    {{--<ol class="breadcrumb float-sm-right">--}}
                    {{--<li class="breadcrumb-item"><a href="#">Home</a></li>--}}
                    {{--<li class="breadcrumb-item active">Starter Page</li>--}}
                    {{--</ol>--}}
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h4>Add gallery images for product</h4>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-widget="remove"><i
                                            class="fa fa-remove"></i></button>
                            </div>
                        </div>
                        <div class="col-md-8 offset-md-2">
                            @if(session('status'))
                                <div class="alert alert-dismissible mt-5 alert-success ">
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                                        &times;
                                    </button>
                                    <h5><i class="icon fa fa-check"></i> Success Message</h5>
                                    <p>{{session('status')}}</p>
                                </div>
                            @endif
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-12 col-sm-12 col-12 main-section">
                                    <h1 class="text-center text-danger"></h1><br>
                                    {!! csrf_field() !!}
                                    <div class="form-group">
                                        <div class="file-loading">
                                            <input id="file-1" type="file" name="file" multiple class="file"
                                                   data-overwrite-initial="false" data-min-file-count="2">
                                        </div>
                                    </div>
                                    <input id="product_id" type="hidden" name="product_id" value="{{$product->id}}">
                                </div>
                                <!-- /.col -->
                            </div>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Existing images</h3>
                            <div class="row mt-4">
                                @foreach($data as $row)
                                    <div class="col-md-4 mb-5">
                                        <a data-toggle="modal" data-target="#{{$row->id}}">
                                            <div class="text-center">
                                                <img src="{{url('uploads/products/gallery/'.$row->file)}}"
                                                     class="img-thumbnail"/>
                                            </div>
                                        </a>
                                    </div>

                                    <div class="modal fade" id="{{$row->id}}" tabindex="-1" role="dialog"
                                         aria-labelledby="exampleModalLabel" aria-hidden="true">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content bg-danger-gradient">
                                                <div class="modal-header">
                                                    <h5 class="modal-title text-center" id="exampleModalLabel">Delete gallery
                                                        image </h5>
                                                    <button type="button" class="close" data-dismiss="modal"
                                                            aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <h5 class="text-center"><i class="fa fa-exclamation-triangle mr-3"></i>Are you sure, you want to delete this image?</h5>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                            data-dismiss="modal">Close
                                                    </button>
                                                    <form action="{{url('admin/product/gallery/destroy/'.$row->id)}}"
                                                          method="post">
                                                        @csrf
                                                        <button type="submit" class="btn btn-danger">Delete image
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                @endforeach
                            </div>

                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">

                        </div>
                        <!-- /.card-body -->
                    </div>
                </div>
            </div>
            <!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->

@include('admin.includes.footer')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/js/fileinput.js"
        type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/themes/fa/theme.js"
        type="text/javascript"></script>
<script type="text/javascript">
    $("#file-1").fileinput({
        theme: 'fa',
        uploadUrl: "/admin/product/gallery",
        uploadExtraData: function () {
            return {
                _token: $("input[name='_token']").val(),
                id: $("input[id='product_id']").val()
            };
        },
        allowedFileExtensions: ['jpg', 'png', 'gif'],
        overwriteInitial: false,
        maxFileSize: 2000,
        maxFilesNum: 10,
        slugCallback: function (filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
    });
</script>