@extends("layouts.master")

@section("title")
Document edit
@endsection

@section("content")
<div class="page-wrapper">
    <div class="page-content">

        <!--breadcrumb-->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
        <div class="breadcrumb-title pe-3"> <a href="{{ url('dashboard')}}">Home</a> </div>

            <div class="ps-3">
            <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item " aria-current="page"><a href="{{url('dashboard')}}">Document list</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Document edit</li>
                    </ol>
                </nav>
            </div>
        </div>

        <div class="row ">
            <div class="col">
                <div class="card radius-10 border-start border-0 border-3 border-success">
                    <div class="card-body">
                        <div class="card-title d-flex align-items-center">
                            <div><i class=" me-1 font-22 text-primary"></i>
                            </div>
                            <h5 class="mb-0 text-primary">Edit Document</h5>
                        </div>
                        <hr>
                        <form class="row g-3">
                            <div class="col-lg-4">
                                <label for="inputState" class="form-label">Employee : <span class="text-danger">*</span></label>
                                <select id="inputState" class="form-select" required>
                                    <option selected>Choose employee</option>
                                    <option>...</option>
                                </select>
                            </div>
                            <div class="col-lg-8">
                                <label for="" class="form-label">Name : <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" required name="name" id="">
                            </div>
                            <div class="col-lg-4">
                                <label for="" class="form-label">File name : <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" required name="file_name" id="">
                            </div>
                            <div class="col-lg-4">
                                <label for="" class="form-label">File size : <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" required name="file_size" id="">
                            </div>
                            <div class="col-lg-4">
                                <label for="" class="form-label">File ext : <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" required name="file_ext" id="">
                            </div>
                            <div class="col-12">
                                <label for="" class="form-label">Note: <span class="fst-italic">( Optional)</span></label>
                                <textarea class="form-control" id="" placeholder="short description..."
                                    rows="3"></textarea>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn button-allens px-5" id="btnSubmit">Edit document</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section("script")
<script>
    $(document).ready(function (e) {
        $(document).on('change', '.imageChange', function (e) {
            photoError = 0;
            if (e.target.files && e.target.files[0]) {
                // console.log(e.target.files[0].name.strtolower())
                if (e.target.files[0].name.match(/\.(jpg|jpeg|JPG|png|gif|PNG)$/)) {
                    $("#photo-error").empty();
                    photoError = 0;
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        $('#user_photo_selected').attr('src', e.target.result);
                    }
                    reader.readAsDataURL(e.target.files[0]);

                } else {
                    photoError = 1;
                    $("#photo-error").empty();
                    $("#btnSubmit").prop('disabled', true);

                    $("#photo-error").append(
                        '<p class="text-danger">Please upload only jpg, png format!</p>');
                }
            } else {
                $('#user_photo_selected').attr('src', '');
            }

            if (photoError == 0) {
                $(".btn-change-photo").prop('disabled', false);
                $("#btnSubmit").attr('disabled', false);
            } else {
                $(".btn-change-photo").prop('disabled', true);
            }
        });
    });

</script>
@endsection