@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</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">Create Photo Gallery</h3>                    
                </div>
                <div class="card-body">
                <form class="needs-validation" novalidate method="post" action="{{ route('super.photo.save') }}" enctype="multipart/form-data">
                @csrf               
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <div class="form-group">
                                <label for="photgallery" class="form-label text-muted">Create Photo Gallery For?: <font style="font-weight: bold; color: red;">**</font></label>
                                <select class="form-control select2-show-search form-select" data-placeholder="Create Photo Gallery For?" id="photgallery" name="photgallery" required>
                                    <option value="">Select Option</option>
                                    <option value="Department" {{ $photgallery == "Department" ? 'selected' : '' }}>Department</option>
                                    <option value="Society" {{ $photgallery == "Society" ? 'selected' : '' }}>Society</option>
                                </select>
                                <div class="invalid-feedback">Please select option.</div>
                            </div>
                        </div>                        
                        <div class="col-md-3 mb-3">
                            <div class="form-group">
                                <label for="sessionid" class="form-label text-muted">Select Year: <font style="font-weight: bold; color: red;">**</font></label>
                                <select class="form-control select2-show-search form-select" id="sessionid" name="sessionid" data-placeholder="Select Year..." required>
                                    <option value="">Select Year</option>
                                    @foreach($actsession as $sessnm)
                                        @if($sessnm->sessaction == "Current")
                                            <option value="{{ $sessnm->sessionid }}" selected>{{ $sessnm->sessionid }}</option>
                                        @else
                                            <option value="{{ $sessnm->sessionid }}">{{ $sessnm->sessionid }}</option>
                                        @endif
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">Please select session.</div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="form-group">
                                <label for="depaid" class="form-label text-muted">Select Department: <font style="font-weight: bold; color: red;">**</font></label>
                                <select class="form-control select2-show-search form-select" data-placeholder="Select Department" id="depaid" name="depaid" disabled required>
                                    @if($user_log_id == "1")
                                        <option value="NA">Not Applicable</option>
                                        <option value="College">College Photo Gallery</option>
                                    @endif
                                    @foreach($depamaster as $depanm)
                                        <option value={{ $depanm->id }} {{ $depanm->id == $depaid ? 'selected' : '' }}>{{ $depanm->department }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">Please select deartment.</div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="form-group">
                                <label for="societyid" class="form-label text-muted">Select Society: <font style="font-weight: bold; color: red;">**</font></label>
                                <select class="form-control select2-show-search form-select" data-placeholder="Select Society" id="societyid" name="societyid" disabled required>
                                    <option value="NA">Not Applicable</option>
                                    @foreach($societymaster as $socname)
                                        <option value={{ $socname->id }} {{ $socname->id == $societyid ? 'selected' : '' }}>{{ $socname->societyname }} - {{ $socname->subsocietynm }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">Please select society.</div>
                            </div>
                        </div>
                        <div class="col-md-8 mb-3">
                            <div class="form-group">
                                <label for="eventnewname" class="form-label text-muted">Enter Event Name:</label>
                                <input id="eventnewname" name="eventnewname" type="text" class="form-control text-dark" value="" required>
                                <div class="invalid-feedback">Please enter event name.</div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="form-group">
                                <label for="eventdt" class="form-label text-muted">Event Date: <font style="font-weight: bold; color: red;">**</font></label>
                                <div class="input-group">
                                    <div id="ps-datepicker" class="input-group date" data-date-format="dd-mm-yyyy">
                                        <span class="input-group-addon input-group-text bg-primary-transparent"><i class="fe fe-calendar text-primary-dark"></i></span>
                                        <input id="project-start-date" name="eventdt" class="form-control" type="text" placeholder="Select Event Date"/>
                                    </div>
                                </div>
                            </div>
                        </div>                        
                        <div class="col-md-12 mb-3">
                            <div class="form-group">
                                <label for="homelink" class="form-label text-muted">Connected Home Page Link: <font style="font-weight: bold; color: red;">**</font></label>
                                <select class="form-control select2-show-search form-select" data-placeholder="Connected Home Page Link" id="homelink" name="homelink" required>
                                    <option value="NA">Not Applicable</option>
                                    @foreach($linkmasterdata as $subvalue)
                                        <option value={{ $subvalue->id }} {{ $subvalue->id == $homelink ? 'selected' : '' }}>{{ $subvalue->mainlinkname }} - {{ $subvalue->sublink }} - {{ $subvalue->subsublink }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">Please select connected home page link.</div>
                            </div>
                        </div>
                        <div class="col-md-12 mb-3">
                            <div class="form-group">
                                <label for="remarks" class="form-label text-muted">Picture Description (If any):</label>
                                <textarea class="form-control" maxlength="5000" id="remarks" name="remarks" rows="3">Not Applicable</textarea>
                            </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>
                                <!--input id="demo" type="file" name="demo" accept=" image/jpeg, image/png, text/html, application/zip, text/css, text/js" multiple-->
                            </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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $("#photgallery").change(function () {
                $('#depaid').attr("disabled", "disabled");
                $('#societyid').attr("disabled", "disabled");
                $('#societyid').val("NA");
                if ($(this).val() == "Department") {
                    $("#depaid").removeAttr("disabled");
                    $('#societyid').attr("disabled", "disabled");
                    $('#societyid').val("NA");
                    $("#depaid").focus();
                } else if ($(this).val() == "Society") {
                    $("#societyid").removeAttr("disabled");
                    $('#depaid').attr("disabled", "disabled");
                    $('#depaid').val("NA");
                    $("#societyid").focus();
                }
            });
        });
    </script>
    
    <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