@extends('adminlte::page')
@section('title', $title)
@section('content_header')
    <h1 class="page-title">{{ @$title }}</h1>
@stop

@section('content')
    @include('admin.includes.notification')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="card-tools">
                        {{-- <button>Add Doctor Potential/Support</button> --}}
                        <button data-toggle="modal" data-target="#add_doctor_potential_support">Add Doctor
                            Potential/Support</button>
                    </div>
                </div>
                <!-- /.card-header -->
                <div class="card-body table-responsive p-0">

                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
    </div>

    <div class="modal fade" id="add_doctor_potential_support">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content bg-light">
                <div class="modal-header">
                    <h4 class="modal-title">Edit Employee</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="js-box-body">
                    <form class="" action="javascript:;" id="frm_doctor">
                        @csrf
                        <div class="modal-body">
                            <div class="box-body row justify-content-center">
                                <div class="form-group col-lg-6 col-md-6">
                                    <label class="col-sm-12 control-label">Pos Code<b style="color: red;">*</b></label>
                                    <div class="col-sm-12">
                                        <input type="text" name="pos_code" id="pos_code" class="form-control">
                                    </div>
                                </div>

                                <div class="form-group col-lg-6 col-md-6">
                                    <label class="col-sm-12 control-label">MSL Number<b style="color: red;">*</b></label>
                                    <div class="col-sm-12">
                                        <input type="text" name="msl_no" id="msl_no" class="form-control">
                                    </div>
                                </div>

                                <div class="form-group col-lg-6 col-md-6" id="typeDiv">
                                    <label class="col-sm-12 control-label">Type<b style="color: red;">*</b></label>
                                    <div class="col-sm-12">
                                        <select name="type" id="type" class="form-control">
                                            <option value="" selected disabled>Select type</option>
                                            <option value="support">Support</option>
                                            <option value="potential">Potential</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group col-lg-6 col-md-6">
                                    <label class="col-sm-12 control-label">Copy from<b style="color: red;">*</b></label>
                                    <div class="col-sm-12">
                                        <select name="copy_from" id="copy_from" class="form-control">
                                            <option value="" selected disabled>Select copy month</option>
                                            <option value="jan">January</option>
                                            <option value="feb">Febuary</option>
                                            <option value="mar">March</option>
                                            <option value="apr">April</option>
                                            <option value="may">May</option>
                                            <option value="jun">June</option>
                                            <option value="jul">July</option>
                                            <option value="aug">August</option>
                                            <option value="sep">September</option>
                                            <option value="oct">October</option>
                                            <option value="nov">November</option>
                                            <option value="dec">December</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group col-lg-6 col-md-6" id="copyToDiv">
                                    <label class="col-sm-12 control-label">Copy To<b style="color: red;">*</b></label>
                                    <div class="col-sm-12">
                                        <select name="copy_to[]" id="copy_to" class="form-control" multiple>
                                            <option value="" disabled>Select copy month</option>
                                            <option value="jan">January</option>
                                            <option value="feb">February</option>
                                            <option value="mar">March</option>
                                            <option value="apr">April</option>
                                            <option value="may">May</option>
                                            <option value="jun">June</option>
                                            <option value="jul">July</option>
                                            <option value="aug">August</option>
                                            <option value="sep">September</option>
                                            <option value="oct">October</option>
                                            <option value="nov">November</option>
                                            <option value="dec">December</option>
                                        </select>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="tbl" value="{{ @$tbl }}" />
@stop

@section('css')
    <style>
        .help-block {
            color: red !important;
            font-size: 14px !important;
            padding-top: 2px !important;
        }
    </style>
@endsection

@section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/notify/0.4.2/notify.min.js"
        integrity="sha512-efUTj3HdSPwWJ9gjfGR71X9cvsrthIA78/Fvd/IN+fttQVy7XWkOAXb295j8B3cmm/kFKVxjiNYzKw9IQJHIuQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script>
        $(document).ready(function() {

            $('#frm_doctor').validate({
                ignore: ".ignore",
                rules: {
                    pos_code: {
                        required: true
                    },
                    msl_no: {
                        // required: true
                    },
                    type: {
                        required: true
                    },
                    copy_from: {
                        required: true
                    },
                    "copy_to[]": {
                        required: true
                    }
                },
                messages: {},
                submitHandler: function(form) {
                    // return false;
                    $("#submit").html('<span> Processing...</span>');
                    $("#submit").attr('disabled', true);

                    var formData = new FormData($("#frm_doctor")[0]);
                    $.ajax({
                        url: "{{ route('doctor.potential.support.add') }}",
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function(response) {
                            var flag = 0;
                            if (response.status == 2) {

                                $("#submit").html('Submit');
                                $("#submit").attr('disabled', false);
                                $.each(response.errors, function(index, data) {
                                    if (flag == 0) {
                                        $('input[name="' + index + '"]')
                                            .focus();
                                        flag = 1;
                                    }
                                    if (document.getElementsByName(index)[0]
                                        .tagName == "INPUT" && document
                                        .getElementsByName(index)[0].type !=
                                        'radio'
                                    ) {
                                        $('input[name="' + index + '"]').after(
                                            '<label id="' + index +
                                            '-error" class="error" for="' +
                                            index + '">' + data + '</label>'
                                        );
                                    } else if (document.getElementsByName(
                                            index)[0]
                                        .tagName == "SELECT") {
                                        $('select[name="' + index + '"]').after(
                                            '<label id="' + index +
                                            '-error" class="error" for="' +
                                            index + '">' + data + '</label>'
                                        );
                                    } else if (document.getElementsByName(
                                            index)[0]
                                        .tagName == "TEXTAREA") {
                                        $('textarea[name="' + index + '"]')
                                            .after(
                                                '<label id="' + index +
                                                '-error" class="error" for="' +
                                                index + '">' + data + '</label>'
                                            );
                                    } else if (document.getElementsByName(
                                            index)[0]
                                        .tagName == "INPUT" && document
                                        .getElementsByName(index)[0].type ==
                                        'radio'
                                    ) {
                                        $('div .' + index).after('<label id="' +
                                            index +
                                            '-error" class="error" for="' +
                                            index + '">' + data + '</label>'
                                        );
                                    }
                                });
                            } else if (response.status == 0) {

                                $("#submit").html('Submit');
                                $("#submit").attr('disabled', false);
                                $.notify(response.message, "error");
                            } else {
                                $.notify(response.message, "success");
                                $("#submit").html('Submit');
                                $("#submit").attr('disabled', true);
                                $("#add_doctor_potential_support").modal('show');
                                setTimeout(function() {
                                    location.reload();
                                }, 2000);
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            if (jqXHR.status == 419 || jqXHR.status == 422) {
                                var flag = 0;
                                $("#submit").html('Submit');
                                $("#submit").attr('disabled', false);
                                $.each(jqXHR.responseJSON.errors, function(index,
                                    data) {
                                    if (flag == 0) {
                                        $('input[name="' + index + '"]')
                                            .focus();
                                        flag = 1;
                                    }
                                    if ($('#' + index + '-error').length != 0) {
                                        $('#' + index + '-error').html(data)
                                            .show();
                                    } else {
                                        if (document.getElementsByName(index)[0]
                                            .tagName == "INPUT" && document
                                            .getElementsByName(index)[0].type !=
                                            'radio'
                                        ) {
                                            $('input[name="' + index + '"]')
                                                .after(
                                                    '<label id="' + index +
                                                    '-error" class="error" for="' +
                                                    index + '">' + data +
                                                    '</label>');
                                        } else if (document.getElementsByName(
                                                index)[0].tagName == "SELECT") {
                                            $('select[name="' + index + '"]')
                                                .after(
                                                    '<label id="' + index +
                                                    '-error" class="error" for="' +
                                                    index + '">' + data +
                                                    '</label>');
                                        } else if (document.getElementsByName(
                                                index)[0].tagName ==
                                            "TEXTAREA") {
                                            $('textarea[name="' + index + '"]')
                                                .after('<label id="' + index +
                                                    '-error" class="error" for="' +
                                                    index + '">' + data +
                                                    '</label>');
                                        } else if (document.getElementsByName(
                                                index)[0].tagName == "INPUT" &&
                                            document.getElementsByName(index)[0]
                                            .type == 'radio'
                                        ) {
                                            $('input[name="' + index + '"]')
                                                .after(
                                                    '<label id="' + index +
                                                    '-error" class="error" for="' +
                                                    index + '">' + data +
                                                    '</label>');
                                        }
                                    }
                                });
                            } else {
                                $("#submit").html('Submit');
                                $("#submit").attr('disabled', false);
                                $.notify(jqXHR.responseJSON.message, "error");
                            }
                        }
                    }); //ajax
                }
            });

            $('#type').change(function() {
                const type = $(this).val();

                if (type === 'potential') {
                    $('#copy_from').val('apr');
                    $('#copy_from option').each(function() {
                        if ($(this).val() !== 'apr') {
                            $(this).prop('disabled', true);
                        } else {
                            $(this).prop('disabled', false);
                        }
                    });
                    $("[name='copy_to[]']").rules("remove");
                    $('#copyToDiv').hide();
                } else {
                    $('#copy_from').val('');
                    $('#copy_from option').each(function() {
                        $(this).prop('disabled', false);
                    });
                    $("[name='copy_to[]']").rules("add", {
                        required: true,
                        messages: {
                            required: "This field is required.",
                        },
                    });
                    $('#copyToDiv').show();
                }
            });
        });
    </script>
@endsection