@extends('layouts.app')

@section('content')
    <div class="main-container container">
        <!-- profile information -->
        <div class="row mb-3">
            <div class="col">
                <h3>Edit Doctor</h3>
            </div>
        </div>

        {!! Form::open([
            'url' => action('App\Http\Controllers\DoctorController@update', $doctor->id),
            'method' => 'PUT',
            'files' => true,
            'id' => 'company_add_form',
            'enctype' => 'multipart/form-data',
        ]) !!}

        {!! Form::hidden('empid', Auth::user()->email) !!}
        {!! Form::hidden('doctor_id', $doctor->id) !!}

        <div class="row h-100 mb-4">
            <!-- Doctor Photo -->


            <div class="col-12 col-md-6 col-lg-4 mb-3">
                <div class="form-group form-floating  ">
                    {!! Form::text('doctorname', $doctor->doctorname, [
                        'class' => 'form-control',
                        'maxlength' => '100',
                        'placeholder' => 'Enter Doctor Name',
                        'disabled',
                    ]) !!}
                    <label for="doctorname">Doctor Name *</label>
                </div>
                <span id="doctorname_error" class="red"></span>
            </div>
            <div class="col-12 col-md-6 col-lg-4 mb-3">
                <div class="form-group form-floating  ">
                    {!! Form::text('degree', $doctor->degree, [
                        'class' => 'form-control',
                        'maxlength' => '100',
                        'placeholder' => 'Enter Doctor Degree',
                        'Required',
                    ]) !!}
                    <label for="names">Degree *</label>
                </div>
                <span id="degree_error" class="red"></span>
            </div>
          
            <div class="col-12 col-md-6 col-lg-4 mb-3">
                <div class="form-group form-floating  ">
                    {!! Form::text('city', $doctor->city, [
                        'class' => 'form-control',
                        'maxlength' => '100',
                        'placeholder' => 'Enter Doctor city',
                        'Required',
                    ]) !!}
                    <label for="names">Doctor city *</label>
                </div>

                <span id="city_error" class="red"></span>
            </div>
            <div class="col-12 col-md-6 col-lg-4 mb-3">
                <div class="form-group form-floating  ">
                    {!! Form::text('hospital', $doctor->hospital, [
                        'class' => 'form-control',
                        'maxlength' => '100',
                        'placeholder' => 'Enter Doctor Hospital',
                        'Required',
                    ]) !!}
                    <label for="names">Doctor Hospital *</label>
                </div>

                <span id="hospital_error" class="red"></span>
            </div>

           
            <div class="col-12 col-md-6 col-lg-4 mb-3">
                <div class="form-group form-floating ">
                    <input type="file" name="photo" class="form-control" id="upload_image1">
                    <label class="input-label">Doctor Photo</label>

                </div>
                <div id="uploaded_image">
                    @if ($doctor->photo)
                        <img src="{{ asset('/uploads/doctor/' . $doctor->photo) }}" class="img-thumbnail" width="150" />
                    @endif
                </div>
                <span id="photo_error" class="red"></span>

            </div>
           
            <!-- Submit Button -->
            <div class="col-12 mb-4">
                <input type="submit" name="submit" class="btn btn-primary btn-lg w-100" value="Update">
            </div>
        </div>

        {!! Form::close() !!}

    </div>
@endsection

@section('footer')
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('input[name=csrf-token]').attr('content')
                }
            });

            //Submit Category

          


            $(document).on('click', 'button.edit_form', function() {
                var container = $(this).data("container");
                $.ajax({
                    url: $(this).data("href"),
                    dataType: "html",
                    success: function(result) {
                        $(container).html(result).modal('show');
                    }
                });
            });


            $(document).on('submit', '#edit_form', function(e) {
                e.preventDefault();
                var data = new FormData($('#edit_form')[0]);
                //if(photo.files[0]){
                //    data.append('photo', photo.files[0]);
                // }
                data.append('_token', '{{ csrf_token() }}');
                $.ajax({
                    method: "POST",
                    url: $(this).attr("action"),
                    dataType: "json",
                    data: data,
                    processData: false,
                    contentType: false,
                    beforeSend: function() {
                        // Show the loader before sending the request
                        $(".loader-wrap").show();
                    },
                    success: function(result) {
                        if (result.success == true) {
                            $('div.brands_modal').modal('hide');
                            Toastify({
                                text: result.msg,
                                duration: 3000,
                                backgroundColor: '#088f7d'
                            }).showToast();
                            $(".loader-wrap").hide();
                            // $.notify({message: result.msg},{type: 'success'});
                            setTimeout(function() {
                                location.reload();
                            }, 1000);
                        } else {
                            $.each(result.data, function(key, val) {
                                $("#" + key + "_error").text(val[0]);
                            })

                            Toastify({
                                text: result.msg,
                                duration: 3000,
                                backgroundColor: 'red'
                            }).showToast();
                            $(".loader-wrap").hide();
                        }
                    }
                });
            });

        });
    </script>
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('input[name=csrf-token]').attr('content')
                }
            });


            $image_crop = $('#image_demo').croppie({
                enableExif: true,
                viewport: {
                    width: 300,
                    height: 300,
                    type: 'rectangle' //circle
                },
                boundary: {
                    width: 300,
                    height: 300
                }
            });

            $('#upload_image').on('change', function() {
                var fileName = document.getElementById("upload_image").value;
                var idxDot = fileName.lastIndexOf(".") + 1;
                var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
                if (extFile == "jpg" || extFile == "jpeg") {
                    var reader = new FileReader();
                    reader.onload = function(event) {
                        $image_crop.croppie('bind', {
                            url: event.target.result
                        }).then(function() {
                            console.log('jQuery bind complete');
                        });
                    }
                    reader.readAsDataURL(this.files[0]);
                    $('#uploadimageModal').modal('show');
                } else {
                    $('#upload_image').val("");
                    alert("Only jpg/jpeg files are allowed!");
                }

            });

            $('.crop_image').click(function(event) {
                $image_crop.croppie('result', {
                    type: 'canvas',
                    size: {
                        width: 1000,
                        height: 1000
                    }
                }).then(function(response) {
                    $.ajax({
                        url: "{{ url('/image_upload') }}",
                        type: "POST",
                        data: {
                            "image": response,
                            "_token": '{{ csrf_token() }}'
                        },
                        success: function(data) {
                            $('#uploadimageModal').modal('hide');
                            $('#uploaded_image').html(data);
                        }
                    });
                })
            });
        });
    </script>
@endsection