@extends('layouts.page')

@section('title', 'Doctor Potential')

@section('custom-css')
    <link rel="stylesheet" href="{{ asset('css/dataTables.bootstrap5.min.css') }}">
@endsection

@section('content')
    <div class="content-wrapper">
        <div class="content-header ">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">Doctor DPM Copy</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                            <li class="breadcrumb-item active">Doctor DPM Copy</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                @include('layouts.error')
                                <div class="row mb-3">
                                    <div class="col-lg-auto col-md-auto mt-auto my-1 ">
                                        <button class="btn btn-danger js-usr-import" onclick="showDoctorModal()">Doctor DPM
                                            Copy <i class="fa fa-upload ml-2"></i></button>
                                    </div>

                                    <div class="col-lg-auto col-md-auto mt-auto my-1 ">
                                        <button class="btn btn-danger js-usr-import" onclick="showDoctorDeleteModal()">
                                            Doctor DPM Delete <i class="fa fa-upload ml-2"></i></button>
                                    </div>
                                </div>

                                <div class="col-md-12 mt-1 card py-2 table-main-wrap">
                                    <div class="col-md-12 mt-1 card py-2 table-main-wrap">
                                        <table id="datatable" class="table  table-striped">
                                            <thead>
                                                <tr>
                                                    <th>No</th>
                                                    <th>Activity</th>
                                                    <th>Status</th>
                                                    <th>Date And Time</th>

                                                </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </section>
    </div>

    <div class="modal fade" id="add_doctor_potential_support" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content bg-light">
                <div class="modal-header">
                    <h4 class="modal-title" id="ImportModalTitle">Doctor Potential/Support Copy</h4>
                    <button type="button" class="close" onclick="hideDoctorModal()">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form enctype="multipart/form-data" 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="1">Quarter One</option>
                                        <option value="2">April</option>
                                        <option value="3">May</option>
                                        <option value="4">June</option>
                                        <option value="5">Quarter Two</option>
                                        <option value="6">July</option>
                                        <option value="7">August</option>
                                        <option value="8">September</option>
                                        <option value="9">Quarter Three</option>
                                        <option value="10">October</option>
                                        <option value="11">November</option>
                                        <option value="12">December</option>
                                        <option value="13">Quarter Four</option>
                                        <option value="14">January</option>
                                        <option value="15">Febuary</option>
                                        <option value="16">March</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="1">Quarter One</option>
                                        <option value="2">April</option>
                                        <option value="3">May</option>
                                        <option value="4">June</option>
                                        <option value="5">Quarter Two</option>
                                        <option value="6">July</option>
                                        <option value="7">August</option>
                                        <option value="8">September</option>
                                        <option value="9">Quarter Three</option>
                                        <option value="10">October</option>
                                        <option value="11">November</option>
                                        <option value="12">December</option>
                                        <option value="13">Quarter Four</option>
                                        <option value="14">January</option>
                                        <option value="15">Febuary</option>
                                        <option value="16">March</option>
                                    </select>
                                </div>
                            </div>

                        </div>
                    </div>
                    <input type="hidden" name="importType" id="importType">
                    <div class="modal-footer">
                        <button type="submit" id="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Delete Modal --}}
    <div class="modal fade" id="delete_doctor_potential_support" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content bg-light">
                <div class="modal-header">
                    <h4 class="modal-title" id="ImportModalTitle">Doctor DPM Data Delete</h4>
                    <button type="button" class="close" onclick="hideDoctorDeleteModal()">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form enctype="multipart/form-data" action="javascript:;" id="frm_doctor_delete">
                    @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">
                                <label class="col-sm-12 control-label">Delete from<b style="color: red;">*</b></label>
                                <div class="col-sm-12">
                                    <select name="delete_from" id="delete_from" class="form-control">
                                        <option value="" selected disabled>Select delete month</option>
                                        <option value="1">Quarter One</option>
                                        <option value="2">April</option>
                                        <option value="3">May</option>
                                        <option value="4">June</option>
                                        <option value="5">Quarter Two</option>
                                        <option value="6">July</option>
                                        <option value="7">August</option>
                                        <option value="8">September</option>
                                        <option value="9">Quarter Three</option>
                                        <option value="10">October</option>
                                        <option value="11">November</option>
                                        <option value="12">December</option>
                                        <option value="13">Quarter Four</option>
                                        <option value="14">January</option>
                                        <option value="15">Febuary</option>
                                        <option value="16">March</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" id="deleteSubmit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection


@section('custom-js')
    <script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.bootstrap5.min.js') }}"></script>
    <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() {
            var i = 1;
            var table = $('#datatable').DataTable({
                lengthMenu: [
                    [50, 100, 500, 1000],
                    [50, 100, 500, 1000, "All"]
                ],
                pageLength: 50,
                searching: true,
                scrollX: true,
                destroy: true,
                processing: true,
                serverSide: true,
                responsive: false,
                autoWidth: false,
                ajax: {
                    url: "{{ route('activityAnalytic') }}",
                    data: function(d) {
                        d._token = "{{ csrf_token() }}"
                    },
                },
                "drawCallback": function(settings) {

                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'activity_name',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'status',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'created_at',
                        searchable: true,
                        orderable: false
                    }
                ],
                columnDefs: [{
                    "aTargets": [1, 2, 3], // Column to target
                    "mRender": function(data, type, full) {
                        if (data != null) {
                            return data;
                        } else {
                            return '-';
                        }
                    }
                }, ],
            });


            $('#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('doctorPotentialSupportAdd') }}",
                        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('hide');
                                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
                }
            });

            $('#delete_doctor_potential_support').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;
                    $("#deleteSubmit").html('<span> Processing...</span>');
                    $("#deleteSubmit").attr('disabled', true);

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

                                $("#deleteSubmit").html('Submit');
                                $("#deleteSubmit").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) {

                                $("#deleteSubmit").html('Submit');
                                $("#deleteSubmit").attr('disabled', false);
                                $.notify(response.message, "error");
                            } else {
                                $.notify(response.message, "success");
                                $("#deleteSubmit").html('Submit');
                                $("#deleteSubmit").attr('disabled', true);
                                $("#delete_doctor_potential_support").modal('hide');
                                setTimeout(function() {
                                    location.reload();
                                }, 2000);
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            if (jqXHR.status == 419 || jqXHR.status == 422) {
                                var flag = 0;
                                $("#deleteSubmit").html('Submit');
                                $("#deleteSubmit").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 {
                                $("#deleteSubmit").html('Submit');
                                $("#deleteSubmit").attr('disabled', false);
                                $.notify(jqXHR.responseJSON.message, "error");
                            }
                        }
                    }); //ajax
                }
            });

            $('#copy_from').on('change', function() {
                var selectedValue = $(this).val();

                var quarters = ["1", "5", "9", "13"];
                var months = ["2", "3", "4", "6", "7", "8", "10", "11", "12", "14", "15", "16"];

                var isQuarterSelected = quarters.includes(selectedValue);

                $('#copy_to option').each(function() {
                    if (isQuarterSelected) {
                        $(this).prop('disabled', !quarters.includes($(this).val()));
                    } else {
                        $(this).prop('disabled', !months.includes($(this).val()));
                    }
                });

                $('#copy_to').val(null);
            });
        });
    </script>
    <script>
        function showDoctorModal() {
            $("#ImportModalTitle").html("Doctor Potential/Support Copy");
            $("#add_doctor_potential_support").modal('show');
        }

        function showDoctorDeleteModal() {
            $("#ImportModalTitle").html("Doctor DPM Data Delete");
            $("#delete_doctor_potential_support").modal('show');
        }

        function hideDoctorModal() {
            $("#add_doctor_potential_support").modal('hide');
            $("#import").val("");
            $("#frm_doctor").trigger("reset");
            $("#frm_doctor")[0].reset();
            $("#frm_doctor").validate().resetForm();
            window.location.reload();
        }

        function hideDoctorDeleteModal() {
            $("#delete_doctor_potential_support").modal('hide');
            $("#import").val("");
            $("#frm_doctor_delete").trigger("reset");
            $("#frm_doctor_delete")[0].reset();
            $("#frm_doctor_delete").validate().resetForm();
            window.location.reload();
        }
    </script>
@endsection