@extends('admin.layouts.main')

@section('content')
<div class="page-wrapper">
    <!-- ============================================================== -->
    <!-- Container fluid  -->
    <!-- ============================================================== -->
    <div class="container-fluid">
        <!-- ============================================================== -->
        <!-- Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <div class="row page-titles">
            <div class="col-md-5 align-self-center">
                <h4 class="text-themecolor font-bold">My Profile</h4>
            </div>
            <div class="col-md-7 align-self-center text-right">
                <div class="d-flex justify-content-end align-items-center">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ url('dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item active">My Profile</li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- End Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <!-- <a href="{{ redirect()->back()->getTargetUrl() }}" class="btn btn-dribbble m-2">
            <i class="fa fa-arrow-left" aria-hidden="true"></i> Back</a> -->

        <div class="card">
            <div class="card-header font-20 font-bold">
                Edit Profile
                <div class="card-actions">
                    <!-- <a class="" data-action="collapse"><i class="ti-minus"></i></a> -->
                    <a class="btn-minimize" data-action="expand"><i class="mdi mdi-arrow-expand"></i></a>
                    <!-- <a class="btn-close" data-action="close"><i class="ti-close"></i></a> -->
                    <button data-toggle="tooltip" title="" data-original-title="Edit Profile" class="btn btn-dropbox btn-sm btn-flat edit">
                        <i class="icon-pencil" aria-hidden="true"></i>
                    </button>
                </div>
            </div>
            <div class="card-body collapse show">
                <div class="text-right">    
                </div>

                <div class="row">
                    <div class='col-sm-12 col-md-4 py-2'>
                        <form class="usr_pro" autocomplete="off">
                            @csrf
                            @method('PATCH')

                            <p><b>Full Name:</b><input type="text" name="name" id="name" class="form-control" 
                                                disabled value="{{ $data->name }}"></p>
                            <!-- <p><b>Last Name:</b><input type="text" name="last_name" id="last_name" class="form-control" 
                                                disabled value="{{ $data->last_name }}"></p> -->
                            <p><b>Email:</b><input type="text" name="email" id="email" class="form-control" 
                                                disabled value="{{ $data->email }}"></p>
                            <p><b>Support Number:</b><input type="text" name="phone" id="phone" class="form-control"
                                                disabled value="{{ $data->phone }}"></p>
                            <!-- <p><b>Address:</b><input type="text" name="address" id="address" class="form-control" 
                                                disabled value="{{ $data->address }}"></p> -->

                            
                            <button class="btn btn-cyan save_form" type="submit">Save</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- End PAge Content -->
        <!-- ============================================================== -->
    </div>
    <!-- ============================================================== -->
    <!-- End Container fluid  -->
    <!-- ============================================================== -->
</div>
@endsection

@push('script')
<script>
    $('.edit').click(function() {
        $('#name').prop('disabled', false);
        // $('#last_name').prop('disabled', false);
        $('#email').prop('disabled', false);
        $('#phone').prop('disabled', false);
        $('.save_form').prop('disabled', false);
    });

    $('body').on('submit', '.usr_pro', function(e) {
        e.preventDefault();
        var elm = $(this);
        $('.save_form').append("<li class='fa fa-spin fa-spinner'></li>");
        $.ajax({
            url: "{{ url('user/profile/update') }}",
            method: "PATCH",
            dataType: "json",
            data: elm.serialize(),
            success: function(data) {
                if (data.success == true) {
                    swal(data.msg, '', 'success');
                    $('#name').prop('disabled', false);
                    // $('#last_name').prop('disabled', false);
                    $('#email').prop('disabled', true);
                    $('#phone').prop('disabled', true);
                    $('.save_form').prop('disabled', true);
                }
                $('.save_form').empty();
                $('.save_form').html('save');
            }
        });
    });
</script>
@endpush