@extends('layouts.backend')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <h4 class="page-title">Surat Masuk</h4>
            <ol class="breadcrumb">
                <li>
                    <a href="{{route('home')}}">Home</a>
                </li>
                <li>
                    <a href="{{ route('surat-masuk') }}">Surat Masuk</a>
                </li>
                <li class="active">
                    Detail
                </li>
                <li class="active">
                                    </li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="card-box product-detail-box">
                <div class="row">
                    <div class="col-sm-4 graphicdesign illustrator photography">
                       <div class="gal-detail thumb">
                            <a href="{{url(Storage::url($model->img))}}" class="image-popup" title="">
                                <img src="{{url(Storage::url($model->img))}}" class="thumb-img" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <div class="product-right-info">
                            <form class="form-horizontal" action="{{route('update-profil')}}" method="POST" enctype="multipart/form-data">
                                {{csrf_field()}}
                                <hr />
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="noInduk">Nama : </label>
                                    <div class="col-md-4">
                                        <ul class="list-group">
                                            <input type="text" name="name" class="form-control form-control @error('name') parsley-error @enderror" value="">
                                            @error('name')
                                                <ul class="parsley-errors-list filled" id="parsley-id-7"><li class="parsley-required">{{ $message }}</li></ul>
                                            @enderror
                                        </ul>
                                    </div>
                                </div>
                                <hr />
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="noInduk">Email : </label>
                                    <div class="col-md-4">
                                        <ul class="list-group">
                                            <li class="list-group-item ttl1">
                                                                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <hr />
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="noInduk">Password Baru : </label>
                                    <div class="col-md-6">
                                        <ul class="list-group">
                                            <input type="password" name="password" class="form-control form-control @error('password') parsley-error @enderror">
                                            @error('password')
                                                <ul class="parsley-errors-list filled" id="parsley-id-7"><li class="parsley-required">{{ $message }}</li></ul>
                                            @enderror
                                        </ul>
                                    </div>
                                </div>
                                <hr />
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="noInduk">Foto User : </label>
                                    <div class="col-md-6">
                                        <ul class="list-group">
                                            <input type="file" name="image" class="form-control form-control @error('image') parsley-error @enderror">
                                            @error('image')
                                                <ul class="parsley-errors-list filled" id="parsley-id-7"><li class="parsley-required">{{ $message }}</li></ul>
                                            @enderror
                                        </ul>
                                    </div>
                                </div>
                                <hr />
                                <div class="m-t-30">
                                    <a href="{{route('akun')}}" class="btn btn-success waves-effect waves-light m-l-10">
                                        <span class="btn-label"><i class="fa fa-back"></i></span>Kembali   
                                    </a>
                                    <button type="submit" class="btn btn-primary waves-effect waves-light m-l-10">
                                        Update 
                                    </button>

                            </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(window).load(function() {
                var $container = $('.portfolioContainer');
                $container.isotope({
                    filter: '*',
                    animationOptions: {
                        duration: 750,
                        easing: 'linear',
                        queue: false
                    }
                });
                $('.portfolioFilter a').click(function(){
                    $('.portfolioFilter .current').removeClass('current');
                    $(this).addClass('current');

                    var selector = $(this).attr('data-filter');
                    $container.isotope({
                        filter: selector,
                        animationOptions: {
                            duration: 750,
                            easing: 'linear',
                            queue: false
                        }
                    });
                    return false;
                });
            });
        $(document).ready(function() {
                $('.image-popup').magnificPopup({
                    type: 'image',
                    closeOnContentClick: true,
                    mainClass: 'mfp-fade',
                    gallery: {
                        enabled: true,
                        navigateByImgClick: true,
                        preload: [0,1] // Will preload 0 - before current, and 1 after the current image
                    }
                });
            });
    </script>
        
</div> 
@endsection