@extends('layouts.admin')
@section('title', 'Add PBT')
@section('pbt', 'active')
@section('pbt_add', 'active')

@section('headerScripts')
    <link rel="stylesheet" href="{{ asset('adminlte/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css') }}">
@endsection


@section('css')
<style>
    .modal-hr {
        margin-top: 2rem;
        margin-bottom: 2rem;
        border-top: 1px dashed rgba(0, 0, 0, .3);
    }
    #container {
        border: 1px dotted grey;
        cursor: pointer;
        padding: 0px;
        text-align: center;
        height: 50px;
        margin: 2px;
    }
    #container:hover #logo_kolej {
        opacity: 1;
        cursor: pointer;
    }
    #container:hover #logo_text{
        opacity: 1;
        cursor: pointer;
    }
    #logo_text {
        text-align: center;
        width: 100%;
        background: transparent;
        color: black;
        font-size: 10px;
        opacity: .5;
        position: absolute;
        top: 20%;
    }
</style>
@endsection


@section('content')

    <section class="content-header">
        <h1>Create New PBT</h1>
    </section>

    <section class="content">
        <form action="{{url('superadmin/pbt/add')}}" enctype="multipart/form-data" method="POST">
            <div class="row">
                <div class="col-md-8">
                    <div class="box box-default">
                        <div class="box-header with-border">
                            <h3 class="box-title">PBT Form</h3>
                        </div>
                        <div class="box-body">
                            @csrf
                            <div id="container" class="col-1">
                                    <label>Logo</label>
                                    <img id="logo_pbt" src="{{ asset('img/logo_ssipr2020.png') }}" alt="..." class="img-responsive" style="height:50px;cursor:pointer;" onclick="document.getElementById('images').click()">
                                    <input type="file" class="custom-file-input" id="images" name="image" style="display: none !important;" onchange="updateImg(this)">
                                    <small><span style="color:red;">(Sila klik logo untuk kemaskini)</span></small>
                            </div>
                            <div class="form-group">
                                <label>Kod</label>
                                <input type="text" class="form-control" name="kod" value="{{old('kod')}}" placeholder="e.g. kod_pbt" required>
                            </div>
                            <div class="form-group">
                                <label>Nama</label>
                                <input type="text" class="form-control" name="nama" value="{{old('nama')}}" placeholder="e.g. Sample PBT" required>
                            </div>
                            <div>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> Save</button>
                </div>
            </div>
        </form>
    </section>

@endsection

<script>
    function updateImg(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#logo_pbt').attr('src', e.target.result);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
@section('js')
<script>
    function submitForm() {
        if($('#nama').val() == '' || $('#kod').val() == '') {
            error();
        } else  ($('#images').val() == '') {
            $.confirm({
                title: 'Maklumat logo kolej tidak lengkap. ',
                content: 'Sila semak borang anda dahulu.',
                icon: 'fa fa-warning',
                type: 'red',
                buttons: { ok: { btnClass: 'btn-red' } }
            });
        } 

            $.confirm({
                title: 'Tambah Senarai?',
                content: 'Anda pasti untuk teruskan?',
                icon: 'fa fa-spinner fa-spin',
                type: 'green',
                buttons: {
                    tambah: {
                        btnClass: 'btn-green',
                        action: function() {
                            $('#senarai_form').submit();
                        }
                    },
                    kembali: {
                        btnClass: 'btn-red',
                        action: function() {
                        }
                    }
                }
            });
        }
        function error() {
            $.confirm({
                title: 'Maklumat tidak lengkap?',
                content: 'Sila semak borang anda dahulu.',
                icon: 'fa fa-warning',
                type: 'red',
                buttons: { ok: { btnClass: 'btn-red' } }
            });
        }
    }

</script>
@endsection