@extends('dashboard_connect.dash_master')
@section('pagescontents')
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0/dist/chartjs-plugin-datalabels.min.js"></script>
	<!-- PAGE-HEADER -->
	<div class="page-header">
		<div>
			<h1 class="page-title">Photo Gallery</h1>
		</div>
		<div class="ms-auto pageheader-btn">
			<ol class="breadcrumb">
				<li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
				<li class="breadcrumb-item active" aria-current="page">Photo Gallery - Add More Pics</li>
			</ol>
		</div>
	</div>
	<!-- PAGE-HEADER END -->
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header border-bottom">
                    <h3 class="card-title">Add Pics in Photo Gallery</h3>                    
                </div>
                <div class="card-body">
                <form class="needs-validation" novalidate method="post" action="{{ route('gallery.bulk.save') }}" enctype="multipart/form-data">
                @csrf               
                    <div class="row">                       
                        <div class="col-md-12 mb-3">
                            <div class="form-group">
                                <label for="pictures" class="form-label text-muted">Picture Group Id: <font style="font-weight: bold; color: red;">**</font></label>
                                <input class="form-control file-input form-control-sm" id="groupid" name="groupid" type="text" readonly required value="{{ $groupid }}">
                                <input id="depaid" name="depaid" type="hidden" value="{{ $depaid }}">
                            </div>
                        </div>
                        <div class="col-md-12 mb-3">
                            <div class="form-group">
                                <label for="pictures" class="form-label text-muted">Browse Pictures (Only JPG : File Size less than 500KB): <font style="font-weight: bold; color: red;">**</font></label>
                                <input class="form-control file-input form-control-sm" id="galleryfile" name="galleryfile[]" type="file" accept="image/jpeg" multiple required>
                            </div>
                        </div>                        
                    </div>
                    <div class="row p-5">
                        <div class="btn-list text-end">
                            <button class="btn btn-secondary" type="submit"><i class="fe fe-upload-cloud me-2"></i> Create Photo Gallery</button>
                        </div>
                    </div>                    
                    @if(Session::has('status'))
                        <div class="row">
                            <div class="col-12">
                                <div class="alert alert-success" role="alert">
                                    <span class="alert-inner--icon me-2"><i class="fe fe-user-check"></i></span>
                                    <span class="alert-inner--text" style="font-weight: bold;">{{ session('status') }}</span>
                                </div>
                            </div>
                        </div>
                    @endif
                    @if(Session::has('wrong'))
                        <div class="row">
                            <div class="col-12">
                                <div class="alert alert-danger" role="alert">
                                    <span class="alert-inner--icon me-2"><i class="fe fe-user-x"></i></span>
                                    <span class="alert-inner--text" style="font-weight: bold;">{{ session('wrong') }}</span>
                                </div>
                            </div>
                        </div>
                    @endif                                                        
                </form>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function(){
            $('#galleryfile').change(function(){
                var fp = $("#galleryfile");
                var lg = fp[0].files.length; 
                var items = fp[0].files;
                var fileSize = 0;
                var fileType = "";
                if (lg > 0) {
                    for (var i = 0; i < lg; i++) {
                        fileSize = fileSize+items[i].size;
                        fileType = fileType+items[i].type;
                    }
                    if(fileSize > 500000) {
                            alert('Hi User! File size should be less than 500 KB');
                            $('#galleryfile').val('');
                    }
                    /*if(fileType !== "image/jpeg" || fileType !== "image/jpg") {
                            alert('Hi User! File type should be JPEG/JPG only');
                            $('#galleryfile').val('');
                    }*/                    
                }
            });
        });
    </script>

@endsection