@extends('admin/layout')
@section('page_title','Manage School Data')
@section('marketing_schools_select','active')
@section('container')
@if($id>0)
   @php
      $image_required="";
   @endphp
   @else
   @php
      $image_required="required";
   @endphp
@endif
<style>
        .container {
            max-width: 500px;
        }
        dl, ol, ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .imgPreview img {
            padding: 8px;
            max-width: 100px;
        } 
    </style>

    <h1 class="mb10">Manage School Visit</h1>
    <a href="{{url('admin/schools_visit')}}">
        <button type="button" class="btn btn-success">Back</button>
    </a>
    <div class="row m-t-30">
        <div class="col-md-12">
            <form action="{{route('schools_visit.manage_schools_visit_process')}}" method="post" enctype="multipart/form-data" id="manageVisit">
<div class="row">
<div class="col-lg-12">
<div class="card">
    <div class="card-body">
    @csrf
    @if ($message = Session::get('success'))
                <div class="alert alert-success">
                    <strong>{{ $message }}</strong>
                </div>
            @endif
            @if (count($errors) > 0)
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
    <div class="form-group">
    <div class="row">
        <div class="col-md-4">
            <label for="images" class="control-label mb-1">Image</label>
            <input name="video_image[]" type="file" id="images" multiple="multiple" class="form-control" {{$image_required}}>
             @error('video_image')        
             <div class="alert alert-danger" role="alert">
                {{$message}}
            </div>
            @enderror
        </div>
        <div class="user-image mb-3 text-center">
            <div class="imgPreview"> </div>
        </div>
    </div>
    </div>
    <div class="form-group">
    <div class="row">
    <!-- <div class="col-md-12">
     <label class="checkbox-inline control-label">Visit Wise</label>
     <br>
        @foreach($checkVisits as $key3=>$clist)
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" id="probCheck{{$key3}}" name="visit_wise[]" value="{{$clist->id}}" >
          <label class="custom-control-label" for="probCheck{{$key3}}">{{$clist->check_name}}</label>
        </div>
         @endforeach 
    
    </div> -->
    <div class="col-md-12">
     <label class="checkbox-inline control-label">Principal Demo</label>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="form-control" name="principal_demo" value="" >
        </div>
         
         <label class="checkbox-inline control-label">School Demo</label>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="form-control" name="school_demo" value="" >
        </div>
    </div>
    </div>
    </div>

     <div class="form-group">
    <div class="row">
    <div class="col-md-12">
     <label class="checkbox-inline control-label">Remarks</label>
     <br>
        <div class="custom-control custom-checkbox custom-control-inline">
        <textarea name="visit_remarks" id="visit_remarks" rows="4" cols="100" class="form-control"></textarea>
        </div>    
    </div>
    </div>
    </div>

      <div class="form-group">
    <div class="row">
    <div class="col-md-4">
     <label class="checkbox-inline control-label">Latitude</label>
     <br>
        <div class="custom-control custom-checkbox custom-control-inline">
        <input class="form-control" type="text" name="latitude" id="latitude">
        </div>    
    </div>
    <div class="col-md-4">
     <label class="checkbox-inline control-label">Longitude</label>
     <br>
        <div class="custom-control custom-checkbox custom-control-inline">
        <input class="form-control" type="text" name="longitude" id="longitude">
        </div>    
    </div>

    <div class="col-md-4">
     <label class="checkbox-inline control-label">School Coordinator Name</label>
     <br>
        <div class="custom-control custom-checkbox custom-control-inline">
        <input class="form-control" type="text" name="school_coordinate_name" id="school_coordinate_name">
        </div>    
    </div>

    <div class="col-md-4">
     <label class="checkbox-inline control-label">School Coordinator Number</label>
     <br>
        <div class="custom-control custom-checkbox custom-control-inline">
        <input class="form-control" type="text" name="school_coordinate_number" id="school_coordinate_number">
        </div>    
    </div>

    <div class="col-md-4">
     <label class="checkbox-inline control-label">Name Confirmation Of the ME</label>
     <br>
        <div class="custom-control custom-checkbox custom-control-inline">
        <input class="form-control" type="text" name="confirm_me" id="confirm_me">
        </div>    
    </div>

    </div>
    </div>
    </div>
</div>
</div>
</div>     
    <div class="position-relative form-check">
        <button id="content-upload-button" type="submit" name="submit" class="mt-2 btn btn-primary pull-left">
            Submit
        </button>
    </div>             
<input type="hidden" name="id" value="{{$id}}">
</form>
</div>
</div>

 <div class="row m-t-30">
        <div class="col-md-12">
            <!-- DATA TABLE-->
            <div class="table-responsive m-b-40">
                <table class="table table-borderless table-data3 school-visit-remarks-data-table">
                    <thead>
                        <tr>
                            <th>Images</th>
                            <th>Visit Wise</th>
                            <th>Remarks</th>
                            <th>Latitude</th>
                            <th>Longitude</th>
                            <th>Name Of ME</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($schoolRemarks as $sRemarks)
                        <tr>
                            <td><a href="{{url('admin/schools_visit/visit_images/'.$sRemarks->id)}}">School Images</a></td>
                            <td>{{ $sRemarks->visit_wise }}</td>
                            <td>{{ $sRemarks->remarks }}</td>
                            <td>{{ $sRemarks->latitude }}</td>
                            <td>{{ $sRemarks->longitude }}</td>
                            <td>{{ $sRemarks->name_me }}</td>                            
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <!-- END DATA TABLE-->
        </div>
    </div>
                        
@endsection

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script>
        $(function() {
        // Multiple images preview with JavaScript
        var multiImgPreview = function(input, imgPreviewPlaceholder) {
            if (input.files) {
                var filesAmount = input.files.length;
                for (i = 0; i < filesAmount; i++) {
                    var reader = new FileReader();
                    reader.onload = function(event) {
                        $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(imgPreviewPlaceholder);
                    }
                    reader.readAsDataURL(input.files[i]);
                }
            }
        };
        $('#images').on('change', function() {
            multiImgPreview(this, 'div.imgPreview');
        });
        });    
    </script>