@extends('backend.layouts.app')

@section('title', app_name() . ' | ' . __('strings.backend.dashboard.title'))

@section('content')
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    <strong>Programs</strong>
                </div><!--card-header-->
                <div class="card-body">
                    <button class="btn btn-success float-right mb-3" id="addNew">Add New</button>
                    <table class="table table-striped table-hover" id="table">
                        <thead>
                            <tr>
                                <th>ID.</th>
                                <th>Code</th>
                                <th>Name</th>
                                <th>Description</th>
                                <th data-formatter="editOption">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($programs as $program)
                            <tr>
                                <td>{{ $program->id }}</td>
                                <td>{{ $program->code }}</td>
                                <td>{{ $program->program }}</td>
                                <td>{{ $program->description }}</td>
                                <td></td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div><!--card-body-->
            </div><!--card-->
        </div><!--col-->
    </div><!--row-->
    <div class="modal fade" id="programForm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Program</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form class="form" id="form" method="post" action="">
                <div class="form-group row">
                    @csrf
                    <input type="hidden" name="program_id" id="program_id">
                    <label for="program_code" class="col-4 col-form-label">Code</label>
                    <div class="col-6">
                        <input type="text" name="program_code" id="program_code"  class="form-control" placeholder="Please enter program code">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="program_name" class="col-4 col-form-label">Name</label>
                    <div class="col-6">
                        <input type="text" name="program_name" id="program_name"  class="form-control" placeholder="Please enter program name">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="program_description" class="col-4 col-form-label">Description</label>
                    <div class="col-6">
                        <textarea name="program_description" id="program_description"  class="form-control"></textarea>
                    </div>
                </div>
            </form>
            <div class="row" id="view">
                <div class="col col-10 mx-auto order-1 order-sm-2 mb-4">
                    <dl class="row">
                        <dt class="col-sm-4">Program ID</dt>
                        <dd class="col-sm-8" id="program_id_view"></dd>
                        <dt class="col-sm-4">Program Code</dt>
                        <dd class="col-sm-8" id="program_code_view"></dd>
                        <dt class="col-sm-4">Program Name</dt>
                        <dd class="col-sm-8" id="program_name_view"></dd>
                        <dt class="col-sm-4">Description</dt>
                        <dd class="col-sm-8" id="program_desc_view"></dd>
                    </dl>
                </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="saveBtn">Save</button>
          </div>
        </div>
      </div>
    </div>
@endsection

@push('after-scripts')
<script type="text/javascript">
     var programs = {!! $programs !!};
     var storeURL = "{{ route('admin.programs.store') }}";
     var deleteURL = "{{ route('admin.programs.delete') }}";
    $("#table").bootstrapTable();
    function editOption(value, row, index) {
        return [
          '<button data-id="'+row[0]+'" class="btn btn-default mr-1 programView"><i class="fa fa-search"></i></button>',
          '<button data-id="'+row[0]+'" class="btn btn-primary programEdit mr-1"><i class="fa fa-pencil"></i></button>',
          '<button data-id="'+row[0]+'" class="btn btn-danger mr-1 programDelete"><i class="fa fa-trash"></i></button>'
        ].join('')
    }

    $("#addNew").on('click', function() {
        $("#view").hide();
        $('#form')[0].reset();
        $("#form, #saveBtn").show();
        $("#programForm").modal("show");
        $("#form").attr('action',storeURL);
    });

    $("#saveBtn").on('click', function() {
        $("#form").submit();
    });

    $(document).on('click', '.programView',function() {
        var id = $(this).data('id');
        var row = {};
        $.each(programs, function(i, v) {
            if (v.id == id) {
                row = v;
            }
        });
        $("#view").show();
        $("#program_id_view").html(row.id);
        $("#program_code_view").html(row.code);
        $("#program_desc_view").html(row.description);
        $("#program_name_view").html(row.program);
        $("#form, #saveBtn").hide();
        $("#programForm").modal("show");
    });
    $(document).on('click', '.programEdit',function() {
        if (confirm('Are you sure you want to edit program?')) {
            $("#view").hide();
            $("#form, #saveBtn").show();
            $("#programForm").modal("show");
            var id = $(this).data('id');
            var row = {};
            $.each(programs, function(i, v) {
                if (v.id == id) {
                    row = v;
                }
            });
            var updateURL = "{{ route('admin.programs.update') }}";
            $("#form").attr('action',updateURL);
            $("#program_id").val(row.id);
            $("#program_code").val(row.code);
            $("#program_description").val(row.description);
            $("#program_name").val(row.program);
        }
    });

    $(document).on('click', '.programDelete',function() {
        if (confirm('Are you sure you want to edit program?')) {
            $("#form").attr('action',deleteURL);
            var id = $(this).data('id');
            $("#program_id").val(id);
            $("#form").submit();
        }
    });
</script>
@endpush