@extends('main')
@section('css')
    <link rel="stylesheet"
          href="{{ url('/') }}/assets/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
@endsection
@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
        </h1>
        <ol class="breadcrumb">

        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-md-4">
                <div class="card card-outline card-success">
                    <div class="card-header with-border">
                        <h3 class="card-title">Add Owner</h3>
                    </div>
                    <!-- /.card-header -->
                    <!-- form start -->
                    <form class="prevent-resubmit-form" id="create_user_form" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="entered_by_id" value="{{auth()->user()->id}}" required>
                        <div class="card-body">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Name:</label>
                                <input type="text" name="name" class="form-control" placeholder="Name.." required>
                            </div>

                            <div class="form-group">
                                <label for="exampleInputEmail1">Email:</label>
                                @if($errors->has('email') )
                                    <strong class="text-danger">{{ $errors->first('email') }}</strong>
                                @endif
                                <input type="text" name="email" class="form-control" placeholder="Email..">
                            </div>

                            <div class="form-group">
                                <label for="exampleInputEmail1">Phone:</label>
                                @if($errors->has('phone') )
                                    <strong class="text-danger">{{ $errors->first('phone') }}</strong>
                                @endif
                                <input type="text" name="phone" class="form-control" placeholder="Phone.." required>
                            </div>


                            <div class="form-group ">
                                <label for="exampleInputParameter">ID Number</label>
                                <input type="text" name="id_number" value="{{ old('id_number') }}" class="form-control"
                                       placeholder="Identification Number..">
                            </div>

                            <div class="form-group ">
                                <label for="exampleInputParameter">Address:</label>
                                <input type="text" value="{{ old('address') }}" name="address" class="form-control"
                                       placeholder="Address..">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">Registration Number:</label>
                                <input type="text" name="registration_number" class="form-control" placeholder="Registration Number..">
                            </div>

                            <div class="form-group ">
                                <label for="exampleInputParameter">Image:</label>
                                <input type="file" name="img" class="form-control" placeholder="Picture Of the Personel..">
                            </div>

                            <div class="form-group ">
                                <label for="exampleInputParameter">File:</label>
                                <input type="file" name="file" class="form-control" placeholder="Document ..">
                            </div>



                        </div>
                        <!-- /.card-body -->
                        <div class="card-footer">
                            <button type="submit" class="btn bg-gradient-orange float-right prevent-resubmit-button">
                                Submit
                            </button>
                        </div>
                    </form>
                </div>
                <!-- /.card -->
            </div>

            <div class="col-md-8">
                <div class="card card-outline card-success">
                    <div class="card-header">
                        <h3 class="card-title">Owners List</h3>
                    </div>
                    <div class="card-body ">
                        <table class="table table-striped data-table" id="user_table">
                            <thead>
                            <tr>
                                <th>Name</th>
                                <th>Registration</th>
                                <th>Id</th>
                                <th>Phone</th>
                                <th class="noExport">Action</th>
                            </tr>
                            </thead>
                            <tbody>

                            @foreach($vars['owners'] as  $row)

                                <tr class="{{$row->uuid}}">
                                    <td>{{ucfirst($row->name)}}</td>
                                    <td>{{ucfirst($row->registration_number)   }}</td>
                                    <td>{{$row->id_number   }}</td>
                                    <td>{{$row->phone }}</td>
                                    <td>
                                    {{--    <a href="{{ url('owners/'.$row->uuid ) }}" class="btn-default " type="button"
                                           data-toggle="tooltip" title="View Owner" data-original-title="View"><i
                                                    class="fa fa-eye" style="color:#00a65a"></i></a> &nbsp; | &nbsp;
                                        --}}{{-- @if( Auth::user()->hasRole('admin') ||Auth::user()->hasRole('management') ||Auth::user()->hasRole('headmaster')) --}}{{--
--}}
                                        <a href="javascript:void(0)"  data-row="{{$row}}" class="btn-default edit_owner"
                                           data-id="{{$row->uuid}}" type="button" data-toggle="tooltip"
                                           title="Edit Owner" data-original-title="Edit"><i class="fa fa-pencil-alt"
                                                                                           style="color:yellowgreen"></i></a>
                                        &nbsp; | &nbsp;


                                        <a href="#" class="btn-default deleteTr" data-address="owners"
                                           data-id="{{$row->uuid}}" type="button" data-toggle="tooltip"
                                           title="Delete Owner" data-original-title="View"><i class="fa fa-trash"
                                                                                             style="color:red"></i></a>

                                        {{-- @endif --}}


                                    </td>
                                </tr>
                            @endforeach

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
    @include('owners/_edit');

@endsection



@section('js')
    <script src="{{ url('/') }}/assets/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript">


        $(function () {
            //Date picker
            $('.datepicker').datepicker({
                autoclose: true,
                format: 'yyyy/mm/dd'
            })
        })
        //CREATE USER AJAX SCRIPT

        $(document).on('submit', '#create_user_form', function (e) {
            e.preventDefault();

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var formdata = new FormData(this);

            $.ajax({
                type: "POST",
                url: '/owners',
                processData: false,
                contentType: false,
                data: formdata,
                success: function (data) {
                    $('#user_table').prepend(data);
                    document.getElementById("create_user_form").reset();
                    $('.prevent-resubmit-button').prop("disabled", false);
                    $('.prevent-resubmit-button').html('Submit');
                    close_modal('guardian_create_model');
                    // show_alert('warning', 'Owner created successful, use your latest four digits of your phone number as initial password');
                    swal({
                        title: 'Owner created Succesfully',
                        text: "Keep safe the password for security maintainances",
                        type: 'success',
                        confirmButtonText: 'Ok',
                        confirmButtonClass: 'btn btn-success',
                        buttonsStyling: false
                    })
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    $('.prevent-resubmit-button').prop("disabled", false);
                    $('.prevent-resubmit-button').html('Submit');
                    close_modal('guardian_create_model');
                    show_alert('danger', xhr.responseText);
                }
            });
        });
        //END CREATE USER


        //EDIT USER SCRIPT
        $(document).on('click', '.edit_owner', function () {
            var id = $(this).data("id");
            var row = $(this).data("row");
            url = "/owners/" + id;
            $("#edit_owner_form input[name=name]").val(row.name);
            $("#edit_owner_form input[name=registration_number]").val(row.registration_number);
            $("#edit_owner_form input[name=phone]").val(row.phone);
            $("#edit_owner_form input[name=email]").val(row.email);

            $("#edit_owner_form select[name=id_type]").val(row.id_type).trigger('change');

            $("#edit_owner_form input[name=id_number]").val(row.id_number);
            $("#edit_owner_form input[name=address]").val(row.address);

            $("#edit_owner_form input[name=uuid]").val(row.uuid);
            $("#edit_owner_form ").attr("action", url);
            $('#owner_modal_edit').modal('show');
        });



        $(document).on('submit', '#edit_owner_form', function(e){
            e.preventDefault();

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var formdata = new FormData(this);
            let uuid = $("#edit_owner_form input[name=uuid]").val();

            $.ajax({
                type: "POST",
                url: '/owners/'+uuid,
                processData: false,
                cache: false,
                contentType: false,
                data: formdata,
                beforeSend: function () {
                    run_waitMe('ios', 'edit_owner_form', 'saving');
                },
                complete: function () {
                    $('#edit_owner_form').waitMe("hide");
                },
                success: function (data) {
                    $(`.${uuid}`).replaceWith(data);
                    $('#owner_modal_edit').modal('hide')
                    $('.prevent-resubmit-button').prop("disabled", false);
                    $('.prevent-resubmit-button').html('Submit');
                },
                error: function (xhr, ajaxOptions, thrownError){
                    $('.prevent-resubmit-button').prop("disabled", false);
                    $('.prevent-resubmit-button').html('Submit');
                    show_alert('danger', xhr.responseText);
                }
            });
        });


    </script>

@endsection