@extends('layouts.master')

@section('main')

@if (session('success'))
<script>
alert('{{ session('success') }}');
</script>
@endif

<style>
    .logo-box {
                min-height: 162px;
            }

            .logo-box img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

            .bootstrap-select .dropdown-menu {
                min-width: 100% !important;
                max-width: 100% !important;
            }

            .bootstrap-select .dropdown-menu > li > a, .bootstrap-select .dropdown-item {
                white-space: normal;
            }
</style>

        <div id="content" class="content ">

            <!-- begin page-header -->
            <div class="page-header-wrap">
                <div class="heading-nav">
                    <h1 class="page-header">School Management</h1>
                </div>
            </div>
            <!-- end page-header -->

						<div class="b-1 bg-grey-transparent-1 m-b-20">
								<ul class="nav nav-pills primary m-10">
										<li class="nav-items">
												<a href="/schools/{{ $school_uid }}/edit" class="nav-link">
														<span class="d-sm-block d-none">Detail Information</span>
												</a>
										</li>
										<li class="nav-items">
												<a href="/courses/{{ $school_uid }}" class="nav-link ">
														<span class="d-sm-block d-none">Courses &amp; Accommodations</span>
												</a>
										</li>
										<li class="nav-items">
												<a href="/pictures/{{ $school_uid }}" class="nav-link active">
														<span class="d-sm-block d-none">School &amp; Pictures</span>
												</a>
										</li>
								</ul>
						</div>

    <div class="tab-content width-full">

		<form id="form-create" method="POST" action="/pictures/{{ $school_uid }}" enctype="multipart/form-data" class="m-0">
			@csrf
			@method('put')
			<input type="hidden" name="mode" id="mode" value="visible" />

        <table class="table table-bordered m-0">
            <thead>
				<tr>
					<th width="" class="text-nowrap text-center">sc_id</th>
					<th width="" class="text-nowrap text-center">file_id</th>
					<th width="" class="text-nowrap text-center">name</th>
					<th width="" class="text-nowrap text-center">url</th>
					<th width="50" class="text-nowrap text-center">sort</th>
					<th width="" class="text-nowrap text-center">visible</th>
				</tr>
            </thead>
            <tbody>
								@foreach ($images as $img)
                <tr class="resource">
                    <td class="text-center align-middle">{{ $img->si_id }}</td>
                    <td class="text-nowrap text-center align-middle">{{ $img->file_id }}</td>
                    <td class="text-center align-middle">{{ $img->name }}</td>
                    <td class="align-middle"><img src="{{ $img->url }}" width="100" height="100" />{{ $img->url }}</td>
										<td class="p-5 align-middle text-center">
											<input type="hidden" name="image_uid[]" value="{{ $img->si_id }}"/>
											<input type="text" class="form-control text-center p-l-5 p-r-5" name="image_sort[]" value="{{ $img->sort }}"/>
										</td>
										<td class="text-center align-middle"><input type="checkbox" name="si_id[]" value="{{ $img->si_id }}" {{ $img->visible == 'Y' ? 'checked' : '' }} ></td>
                </tr>
								@endforeach
            </tbody>
        </table>
		

				<div class="row m-t-10">
						<div class="col-md-6">

							<div class="position-relative m-b-10 text-right">
								<label class="align-bottom form-label m-l-5 m-r-10">edm_uid
								<input type="text" class="d-inline-block form-control width-60" name="edm_school_uid" id="edm_school_uid" value="{{ $edm_school_uid }}" readonly>
								school pictures</label>
		            <button type="button" class="d-inline-block align-bottom btn btn-info" onclick="on_submit('get')">Get</button>
					    </div>

						</div>
						<div class="col-md-6">

							<div class="position-relative m-b-10 text-right">
								<label class="align-bottom form-label m-l-5 m-r-10">Visible</label>
		            <button type="button" class="d-inline-block align-bottom btn btn-info" onclick="on_submit('visible')">Apply</button>
					    </div>

						</div>
				</div>


		</form>
    </div>
    <!-- end tab-content -->
</div>
@endsection

@section('js')
<script type="text/javascript">
    $(function () {
        $('#form-school-search').input();
    });
</script>

<script type="text/javascript">
function on_submit(mode)
{
	$('#mode').val(mode);
	$("form").submit();
}
</script>

@endsection