@extends('layouts.admin')

@section('content')
<!--App-Content-->
<div class="app-content my-3 my-md-5">
    <div class="side-app">
        <x-page.header>Boards</x-page.header>
        @include('admin.errors.form-errors')
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Add New Board</h3>
                    </div>

                    <div class="card-body">
                        <p>Create a Brand new Board</p>
                        <form enctype="multipart/form-data" method="POST" action="{{route('regulation.board.post')}}"
                            class="form-horizontal" id="create_form">
                            @csrf
                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="education_system_name_create">Education System <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">

                                        <select id="education_system_name_create" name="esid" class="form-control select2-show-search" required>
                                            @foreach ($educationSystems as $item)

                                            <option value="{{$item->esid}}">{{$item->esname}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="board_name_create">Name <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" name="bname" value="{{ old('bname') }}" class="form-control" id="board_name_create" placeholder=""
                                            required>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="board_description_create">Description</label>
                                    </div>
                                    <div class="col-md-9">

                                        <textarea class="form-control"  name="bdescription"  id="board_description_create"
                                            rows="3">{{ old('bdescription')}}</textarea>
                                    </div>
                                </div>
                            </div>

                            {{-- <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="board_url_create">Website</label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="url" name="burl" id="board_url_create" {{ old('burl')}} onchange="return validURL('board_url_create')" class="form-control" placeholder="">
                                    </div>
                                </div>
                            </div>


                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2">Image <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">
                                        <div class="control-group form-group">
                                            <div class="input-group file-browser">
                                                <input type="text"
                                                    class="form-control border-end-0 browse-file bg-transparent"
                                                    placeholder="Upload Image" readonly="">
                                                <label class="input-group-btn">
                                                    <span class="btn btn-primary br-bs-0 br-ts-0">
                                                        Browse <input type="file" name="bimage"  style="display: none;"
                                                        accept="image/*" onchange="return fileValidation('board_image_create')" id="board_image_create"   >
                                                    </span>
                                                </label>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div> --}}
                            <div class="form-group mb-0 row justify-content-end">
                                <div class="col-md-3">
                                    <button type="submit" class="btn btn-primary waves-effect waves-light">Add New
                                        Board</button>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Boards List</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table
                                class="table table-striped table-bordered table-vcenter text-nowrap" id="board_table">
                                <thead>
                                    <tr>

                                        <th style="text-align: center;">Id</th>
                                        {{-- <th style="text-align: center;">Image</th> --}}
                                        <th>Education System</th>
                                        <th>Name</th>
                                        <th style="text-align: center;">Description</th>

                                        {{-- <th style="text-align: center;">Website</th> --}}

                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>

                                    @php
                                    $count=0
                                    @endphp
                                    @foreach ($boards as $bd )


                                    <tr>
                                        <td style="text-align: center;">{{++$count}}</td>


                                        <td>{{$educationSystems->firstWhere('esid',$bd->esid)->esname}}</td>
                                        <td>{{$bd->bname}}</td>

                                        <td style="text-align: center;">
                                            <i class="mdi mdi-information-outline leading-loose"
                                                data-bs-toggle="tooltip" data-bs-placement="bottom" title=""
                                                data-bs-original-title="{{$bd->bdescription}}"></i>
                                        </td>


                                        {{-- <td style="text-align: center;"><a href="{{$bd->burl}}" target="_blank"><i
                                                    class="fa fa-globe text-secondary"></i></a></td> --}}
                                        <td style="text-align: center;">
										<div data-bs-toggle="tooltip"  data-bs-original-title="Edit">
                                            <button type="button"
											    value="{{$bd->bid}}"
                                                class="modal-effect btn btn-outline-light btn-sm waves-effect waves-light edit"
                                                data-bs-effect="effect-sign" data-bs-toggle="modal" data-bs-original-title="Edit" data-bs-target="#edit"><i
                                                    class="fa fa-edit fs-16"></i></button>
		                            	</div>
                                        {{-- <a href="javascript:void(0)" onClick="confirmDelete(event,{{$bd->bid}})" class="btn btn-outline-light btn-sm waves-effect waves-light"
                                                    data-bs-toggle="tooltip" data-bs-original-title="Delete"
                                                    title='Delete'>
                                                    <i class="fa fa-trash fs-16"></i>
                                            <form method="POST" action="{{ route('regulation.board.destroy', $bd->bid) }}" id="delete-form-{{$bd->bid}}">
                                                @csrf
                                                <input name="_method" type="hidden" value="DELETE">

                                            </form>
                                        </a> --}}

                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Edit form modal -->
<div class="modal  fade effect-sign show" id="edit" tabdocumentation="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="example-Modal3">Edit</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="POST" action="" id="board_form_update" name="boardform"  enctype="multipart/form-data">
                    @csrf
				<div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="education_system_name_update">Education System <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">

                                        <select id="education_system_name_update" name="esid" class="form-control select2-show-search" required>
                                            @foreach ($educationSystems as $item)

                                            <option value="{{$item->esid}}">{{$item->esname}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="board_name_update">Name <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" name="bname" class="form-control" id="board_name_update" placeholder=""
                                            required>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="board_description_update">Description</label>
                                    </div>
                                    <div class="col-md-9">

                                        <textarea class="form-control" name="bdescription" id="board_description_update"
                                            rows="3"></textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="board_url_update">Website</label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="url" name="burl" onchange="return validURL('board_url_create')" id="board_url_update" class="form-control" placeholder="">
                                    </div>
                                </div>
                            </div>


                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="board_image_update">Image</label>
                                    </div>
                                    <div class="col-md-9">
                                        <div class="control-group form-group">
                                            <div class="input-group file-browser">
                                                <input type="text"
                                                    class="form-control border-end-0 browse-file bg-transparent"
                                                    placeholder="Upload Image" readonly="">
                                                <label class="input-group-btn">
                                                    <span class="btn btn-primary br-bs-0 br-ts-0">
                                                        Browse <input type="file" id="board_image_update" name="bimage" style="display: none;" accept="image/*" onchange="return fileValidation('board_image_update')">
                                                    </span>
                                                </label>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" id="submit" class="btn btn-primary" value="">Submit</button>
                <input type="hidden" id="board_id" name="bid" value="0">
            </div>
            </form>
        </div>
    </div>
</div>
@endsection
@section('admin-js')

<script>

	$(document).ready(function(){
        // Check if the image is inserted
        // $( "#create_form" ).submit(function(event){
        //     validate_image(event)
        // })
        // Get Record data using it's id
        jQuery('body').on('click', '.edit', function () {
            var board_id = $(this).val();
            $.get('/staff/regulation/board/' + board_id, function (data) {
                jQuery('#board_id').val(data.bid);
                jQuery('#education_system_name_update').val(data.esid).change();
                jQuery('#board_name_update').val(data.bname);
                jQuery('#board_description_update').val(data.bdescription);
                // jQuery('#board_url_update').val(data.burl);
                jQuery('#submit').val("update");
                jQuery('#board_form_update').attr('action','/staff/regulation/board/' + board_id)
            })
        });

	})
</script>
{{-- draw all data tables --}}
<script>
    $(document).ready(function(){
        $('#board_table').dataTable( {
            "drawCallback": function( settings ) {
            }
        })
    })
    </script>
@endsection