@extends('layouts.app')
@section('titlePage', 'Manage Page')
@section('content')
<script>
    document.getElementById("kts-1").classList.add("is-expanded");
    document.getElementById("ktss-1").classList.add("active","is-expanded");
    document.getElementById("create").classList.add("active");
</script>
<div class="page-wrapper">
	<!-- [ breadcrumb ] start -->
	<div class="breadcrumb-header justify-content-between">
				<div class="left-content">
					<div class="card-header">
                    <div class="card-title">Bulk Upload</div>
					</div>
                </div>
                <div class="justify-content-center mt-2">
					<ol class="breadcrumb breadcrumb-style3">
						<li class="breadcrumb-item tx-15"><a href="{{ _route('client.students.bulk-upload') }}"><i class="feather icon-home"></i></a></li>
						<li class="breadcrumb-item active" aria-current="page"><a href="#!">Bulk Upload Staff</a></li>
					</ol>
				</div>
			</div>
	<!-- [ breadcrumb ] end -->
	<!-- [ Main Content ] start -->
	<div class="row">
		<div class="col-sm-12">
			<div class="card">
				<div class="card-body">
                    @include('common.alert')
					<form id="formImport" method="POST" action="{{ _route('client.students.import-process') }}" enctype="multipart/form-data">
                    	@csrf
						<div class="row">
                            <div class="col-md-12">
                                <input type="hidden" name="csv_data_file_id" value="{{ $csv_data_file->id }}" />
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        @if (isset($csv_header_fields))
                                        <tr>
                                            @foreach ($csv_header_fields as $csv_header_field)
                                                <th>{{ $csv_header_field }}</th>
                                            @endforeach
                                        </tr>
                                        @endif
                                        @foreach ($csv_data as $row)
                                            <tr>
                                            @foreach ($row as $key => $value)
                                                <td>{{ $value }}</td>
                                            @endforeach
                                            </tr>
                                        @endforeach
                                        <tr>
                                            @foreach ($csv_data[0] as $key => $value)
                                                <td>
                                                    <select name="fields[{{ $key }}]" class="form-control fields" style="width: 150px">
                                                        <option value="">-- Select Column --</option>
                                                        @foreach ($fillable as $db_field)
                                                            <option value="{{ (\Request::has('header')) ? $db_field : $loop->index }}"
                                                                @if ($value === $db_field) selected @endif>{{ $db_field }}</option>
                                                        @endforeach
                                                    </select>
                                                </td>
                                            @endforeach
                                        </tr>
                                    </table>
                                </div>
                                <hr/>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">Select DOB format <span class="text-danger">*</span></label>
                                    <select name="format" class="form-control">
                                        <option value="d/m/Y">d/m/Y</option>
                                        <option value="d-m-Y">d-m-Y</option>
                                     
                                        
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h4>Note</h4>
                                <ul class="list-group">
                                    <li>Password will be created by default according to <b>ddmmyyyy</b> (DOB).</li>
                                    <li>If the gender is not selected, it will be created by default according to Male.</li>
                                    <li>Email is unique</li>
                                    <li class="required_fields">Required fields: fullname, email, dob, registration_number, phone_number</li>
                                </ul>
                            </div>
                            <div class="col-md-12">
                                <hr/>
                                <button type="submit" class="btn btn-primary">Import Data</button>
                            </div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<!-- [ Main Content ] end -->
</div>
@endsection

@push('script')
<script>
    $('form#formImport').submit(function (e) {
        var required = ['fullname', 'email', 'dob', 'registration_number', 'phone_number'];
        var okay = 0;
        $('select.fields').each(function(i, obj){
            var selected = $(obj).find('option:selected').text();
            console.log(required.includes(selected), obj, selected)
            if (required.includes(selected)) {
                okay = okay + 1
            }
        });
        // Check if empty of not
        if (okay !== required.length) {
            $('.required_fields').addClass('text-danger');
            alert('Required fields: fullname, email, dob, registration_number, phone_number');
            return false;
        }
        $('.required_fields').removeClass('text-danger');
    });
</script>
@endpush