@extends('layouts.admin')
@section('title', 'Edit 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>
    #container {
        border: 1px dotted grey;
        cursor: pointer;
        padding: 0px;
        text-align: center;
        height: 50px;
        margin: 2px;
    }
    #container:hover #logo_pbt {
        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>Edit PBT</h1>
    </section>

    <section class="content">
        <form action="{{url('superadmin/pbt/'.$pbt->id)}}" method="POST" enctype="multipart/form-data">
            <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/pbt') }}/logo_{{ $pbt->kod }}.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="{{$pbt->kod}}" placeholder="e.g. kod_pbt" required>
                            </div>
                            <div class="form-group">
                                <label>Nama</label>
                                <input type="text" class="form-control" name="nama" value="{{$pbt->nama}}" placeholder="e.g. Sample PBT" required>
                            </div>                          
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> Save</button>
                    <a href="{{url('superadmin/pbt')}}" class="btn btn-default"><i class="fa fa-undo"></i> Back</a>
                </div>
            </div>
        </form>
    </section>

@endsection

<script>
    //update image logo
    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 {
            $.confirm({
                title: 'Kemaskini Senarai?',
                content: 'Anda pasti untuk teruskan?',
                icon: 'fa fa-spinner fa-spin',
                type: 'green',
                buttons: {
                    kemaskini: {
                        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