{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
    {{ $page_title }}
@endsection

@section('content')
    @php
        $readOnly = $is_read_only ?? false;
        $followUpRequired = old('follow_up_required', $data['follow_up_required'] ?? 0);
        $setReminder = old('set_reminder', $data['set_reminder'] ?? 0);
        $statusValue = old('status', $data['status'] ?? 0);
        $communicationType = old('communication_type', $data['communication_type'] ?? '');
        $otherCommunicationType = old('other_communication_type', $data['other_communication_type'] ?? '');
    @endphp

    <form class="form" method="post" action="{{ $action }}" id="manage_form" enctype="multipart/form-data">
        @if (!empty($data['id']))
            @method('PUT')
        @endif
        @csrf

        <div class="card shadow-sm">
            <div class="card-header card-header-tabs-line nav-tabs-line-3x">
                <div class="card-toolbar">
                    <ul class="nav nav-tabs nav-line-tabs nav-stretch fs-6 border-0">
                        <li class="nav-item me-3">
                            <a class="nav-link active" data-bs-toggle="tab" href="#kt_user_edit_tab_1">
                                <span class="nav-text font-size-lg">{{ $page_title }}</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="card-body">
                @include('backend.errors')

                @if ($readOnly)
                    <div class="alert alert-info mb-6">
                        This record is finalized and can only be viewed.
                    </div>
                @endif

                <div class="tab-content">
                    <div class="tab-pane show active px-7" id="kt_user_edit_tab_1" role="tabpanel">
                        <div class="row g-4">
                            <div class="col-12">
                                <div class="form-group row mb-3 required">
                                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                        <label class="col-form-label text-lg-right text-left">Date</label>
                                        <div class="input-group input-group-lg input-group-solid">
                                            <span class="input-group-text">
                                                <i class="la la-calendar"></i>
                                            </span>
                                            <input class="form-control form-control-lg form-control-solid age-datepicker datepicker_past required" type="text" name="date" id="date" value="{{ old('date', $data['date'] ?? '') }}" autocomplete="off" {{ $readOnly ? 'disabled' : '' }} />
                                        </div>
                                    </div>

                                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                        <label class="col-form-label text-lg-right text-left">Time</label>
                                        <input class="form-control form-control-lg form-control-solid required bt_timepicker_3" type="time" name="time" id="time" value="{{ old('time', $data['time'] ?? '') }}" placeholder="hh:mm" {{ $readOnly ? 'disabled' : '' }} />
                                    </div>

                                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                        <label class="col-form-label text-lg-right text-left">Staff (Caller)</label>
                                        <select class="form-control form-control-lg form-control-solid required form-select" name="staff_id" id="staff_id" required {{ $readOnly ? 'disabled' : '' }} data-control="select2">
                                            <option value="">Select</option>
                                            @foreach ($users_list as $key => $val)
                                                <option value="{{ $key }}" {{ old('staff_id', $data['staff_id'] ?? '') == $key ? 'selected' : '' }}>{{ $val }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group row mb-3 required">
                                    <div class="col-xl-4 col-lg-6 col-md-4 col-sm-12 col-xs-12">
                                        <label class="col-form-label text-lg-right text-left">Participant</label>
                                        <select class="form-control form-control-lg form-control-solid required form-select" name="participant_id" id="participant_id" required {{ $readOnly ? 'disabled' : '' }} data-control="select2">
                                            <option value="">Select</option>
                                            @foreach($participant_list ?? [] as $id => $title)
                                            <option value="{{$id}}" data-id="{{$title}}" {{old('participant_id', $data['participant_id'] ?? '') == $id ? "selected" : "" }}>{{$title}}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                        <label class="col-form-label text-lg-right text-left">Duration (Minutes)</label>
                                        <div class="input-group">
                                            <input class="form-control form-control-lg form-control-solid" type="number" min="0" max="60" step="1" name="duration" id="duration" value="{{ old('duration', $data['duration'] ?? 0) }}" {{ $readOnly ? 'disabled' : '' }}>
                                        </div>
                                    </div>

                                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                        <label class="col-form-label text-lg-right text-left">Communication Type</label>
                                        <select class="form-control form-control-solid required form-select" name="communication_type" id="communication_type" required {{ $readOnly ? 'disabled' : '' }}>
                                            <option value="">Select</option>
                                            @foreach (config('constant.communication_types') as $gN => $gV)
                                                <option value="{{ $gN }}" {{ $communicationType == $gN ? 'selected' : '' }}>
                                                    {{ $gV }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group row mb-3 required">
                                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12 {{ $communicationType === 'Other' ? '' : 'd-none' }}" id="other_communication_type_group">
                                        <label class="col-form-label text-lg-right text-left">Specify Communication Type</label>
                                        <input class="form-control form-control-lg form-control-solid" type="text" name="other_communication_type" id="other_communication_type" value="{{ $otherCommunicationType }}" maxlength="255" {{ $readOnly ? 'disabled' : '' }} />
                                    </div>

                                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                        <label class="col-form-label text-lg-right text-left">Communication With</label>
                                        <select class="form-control form-control-lg form-control-solid required form-select" name="communication_with" id="communication_with" required {{ $readOnly ? 'disabled' : '' }}>
                                            <option value="">Select</option>
                                            @foreach ($users_list as $id => $val)
                                                <option value="{{ $id }}" {{ old('communication_with', $data['communication_with'] ?? auth()->id()) == $id ? 'selected' : '' }}>{{ $val }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                        <label class="col-form-label text-lg-right text-left">Description</label>
                                        <textarea class="form-control form-control-lg form-control-solid required" name="description" maxlength="2000" {{ $readOnly ? 'disabled' : '' }}>{{ old('description', $data['description'] ?? '') }}</textarea>
                                    </div>

                                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                        <label class="col-form-label text-lg-right text-left">Actions Taken</label>
                                        <textarea class="form-control form-control-lg form-control-solid required" name="actions_taken" maxlength="2000" {{ $readOnly ? 'disabled' : '' }}>{{ old('actions_taken', $data['actions_taken'] ?? '') }}</textarea>
                                    </div>
                                </div>

                                <div class="form-group row mb-3">
                                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                        <label class="col-form-label text-lg-right text-left no-required">Follow-up required</label>
                                        <div class="radio-inline" id="follow_up_required_group">
                                            @foreach (config('constant.yes_no_list') as $key => $val)
                                                <label class="radio">
                                                    <input class="form-check-input no-required" type="radio" value="{{ $key }}" name="follow_up_required" id="follow_up_required_{{ $key }}"
                                                        {{ $followUpRequired == $key ? 'checked' : '' }} {{ $readOnly ? 'disabled' : '' }} />
                                                    {{ $val }}
                                                </label>
                                            @endforeach
                                        </div>
                                    </div>

                                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                        <label class="col-form-label text-lg-right text-left">Status</label>
                                        <select class="form-control form-control-lg form-control-solid form-select required" name="status" required {{ $readOnly ? 'disabled' : '' }}>
                                            @foreach ($save_list as $id => $title)
                                                <option value="{{ $id }}" {{ (string) $statusValue === (string) $id ? 'selected' : '' }}>{{ $title }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div id="follow_up_section" class="{{ (int) $followUpRequired === 1 ? '' : 'd-none' }}">
                                    <div class="form-group row mb-3">
                                        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                            <label class="col-form-label text-lg-right text-left">Follow-up Date</label>
                                            <div class="input-group input-group-lg input-group-solid">
                                                <span class="input-group-text">
                                                    <i class="la la-calendar"></i>
                                                </span>
                                                <input class="form-control form-control-lg form-control-solid age-datepicker datepicker_future required" type="text" name="follow_up_date" id="follow_up_date" value="{{ old('follow_up_date', $data['follow_up_date'] ?? '') }}" autocomplete="off" {{ $readOnly ? 'disabled' : '' }} />
                                            </div>
                                        </div>

                                        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                            <label class="col-form-label text-lg-right text-left no-required">Do you want to set the reminder?</label>
                                            <div class="radio-inline" id="set_reminder_group">
                                                @foreach (config('constant.yes_no_list') as $key => $val)
                                                    <label class="radio">
                                                        <input class="form-check-input no-required" type="radio" value="{{ $key }}" name="set_reminder" id="set_reminder_{{ $key }}"
                                                            {{ (string) $setReminder === (string) $key ? 'checked' : '' }} {{ $readOnly ? 'disabled' : '' }} />
                                                        {{ $val }}
                                                    </label>
                                                @endforeach
                                            </div>
                                            <div class=""><span class="text-muted">Set Reminder to 'Yes'. When status is finalized, a new event will be added under My Calendar</span></div>
                                        </div>

                                        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                            <label class="col-form-label text-lg-right text-left">Follow-up Notes</label>
                                            <textarea class="form-control form-control-lg form-control-solid required" id="follow_up_notes" name="follow_up_notes" rows="4" {{ $readOnly ? 'disabled' : '' }}>{{ old('follow_up_notes', $data['follow_up_notes'] ?? '') }}</textarea>
                                        </div>
                                    </div>
                                </div>
                                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                        <label class="col-form-label text-lg-right text-left">Upload</label>
                                        <input type="file" class="form-control" id="file_name" name="file_name[]" accept=".jpg,.png,.pdf,.doc,.docx" multiple {{ $readOnly ? 'disabled' : '' }}>
                                        <span class="form-text text-muted">Max file size limit is 10MB and multiple file upload is allowed.</span>
                                    </div>
                                @if (!empty($attachments))
                                <div class="form-group fv-row mb-7">
                                    <div class="col-lg-6 col-md-6 col-sm-12">
                                        <!--begin::Dropzone-->
                                        <div class="dropzone dropzone-queue mb-2" id="kt_dropzonejs_attachments">
                                            <!--begin::Controls-->
                                            <div class="dropzone-panel mb-lg-0 mb-5 d-none">
                                                <a class="dropzone-select btn btn-sm btn-primary me-2">Attach files</a>
                                                <a class="dropzone-remove-all btn btn-sm btn-light-primary">Remove All</a>
                                            </div>
                                            <!--end::Controls-->

                                            <!--begin::Items-->
                                            <div class="dropzone-items wm-200px">
                                                <div class="dropzone-item" style="display:none">
                                                    <!--begin::File-->
                                                    <div class="dropzone-file">
                                                        <div class="dropzone-filename" title="some_image_file_name.jpg" style="width: 85%;word-break: break-all;">
                                                            <span data-dz-name>some_image_file_name.jpg</span>
                                                            <strong>(<span data-dz-size>340kb</span>)</strong>
                                                        </div>

                                                        <div class="dropzone-error" data-dz-errormessage></div>
                                                    </div>
                                                    <!--end::File-->

                                                    <!--begin::Progress-->
                                                    <div class="dropzone-progress">
                                                        <div class="progress">
                                                            <div class="progress-bar bg-primary" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--end::Progress-->

                                                    <!--begin::Toolbar-->
                                                    <div class="dropzone-toolbar">
                                                        <span class="dropzone-delete"><i class="bi bi-x fs-1"></i></span>
                                                    </div>
                                                    <!--end::Toolbar-->
                                                </div>

                                                @foreach ($attachments as $attachId => $attachment)
                                                <div class="dropzone-item" id="{{$attachId}}" data-type="particularFile">
                                                    <!--begin::File-->
                                                    <div class="dropzone-file">
                                                        <div class="dropzone-filename" title="{{$attachment}}" style="width: 85%;word-break: break-all;">
                                                            <span data-dz-name><a target="_blank" href="{{ asset('uploads/on_call_logs/' . $data['id'] . '/' . $attachment) }}"> {{ $attachment }}</a></span>
                                                            <strong><span data-dz-size></span></strong>
                                                        </div>

                                                        <div class="dropzone-error" data-dz-errormessage></div>
                                                    </div>
                                                    <!--end::File-->
                                                    <!--begin::Toolbar-->
                                                    <div class="dropzone-toolbar">
                                                        <span class="dropzone-delete"><i class="bi bi-x fs-1"></i></span>
                                                    </div>
                                                    <!--end::Toolbar-->
                                                </div>
                                                @endforeach
                                                <!--end::Input group-->
                                                

                                            </div>
                                            <!--end::Items-->
                                        </div>
                                    <!--end::Dropzone-->
                                    <br />
                                 </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card-footer text-right">
                @if (! $readOnly)
                    <button type="submit" class="btn btn-primary me-2 btn-hover-rise" id="submit_btn">Submit</button>
                @endif
                <a href="{{ route('on_call_logs.index') }}">
                    <button type="button" class="btn btn-secondary btn-hover-rise">Cancel</button>
                </a>
            </div>
        </div>
    </form>
@endsection

@section('scripts')
    <script type="text/javascript">
        $(document).ready(function() {
            const communicationTypeSelect = $('#communication_type');
            const otherCommunicationTypeGroup = $('#other_communication_type_group');
            const otherCommunicationTypeInput = $('#other_communication_type');

            const toggleOtherCommunicationTypeField = function() {
                const isOther = communicationTypeSelect.val() === 'Other';

                if (isOther) {
                    otherCommunicationTypeGroup.removeClass('d-none');
                    otherCommunicationTypeInput.prop('required', true);
                } else {
                    otherCommunicationTypeGroup.addClass('d-none');
                    otherCommunicationTypeInput.prop('required', false);
                    otherCommunicationTypeInput.val('');
                }
            };

            communicationTypeSelect.on('change', toggleOtherCommunicationTypeField);
            toggleOtherCommunicationTypeField();

            const toggleFollowUpFields = function() {
                const isEnabled = $('input[name="follow_up_required"]:checked').val() === '1';

                if (isEnabled) {
                    $('#follow_up_section').removeClass('d-none');
                } else {
                    $('#follow_up_section').addClass('d-none');
                    $('#follow_up_date').val('');
                    $('#follow_up_notes').val('');
                    $('input[name="set_reminder"][value="0"]').prop('checked', true);
                }
            };

            $('input[name="follow_up_required"]').on('change', toggleFollowUpFields);
            toggleFollowUpFields();

            $('#manage_form').validate({
                ignore: [],
                rules: {
                    date: { required: true },
                    time: { required: true },
                    staff_id: { required: true },
                    participant_id: { required: true },
                    communication_type: { required: true },
                    other_communication_type: {
                        required: function() {
                            return $('#communication_type').val() === 'Other';
                        }
                    },
                    communication_with: { required: true },
                    status: { required: true },
                    follow_up_date: {
                        required: function() {
                            return $('input[name="follow_up_required"]:checked').val() === '1';
                        }
                    },
                    follow_up_notes: {
                        required: function() {
                            return $('input[name="follow_up_required"]:checked').val() === '1';
                        }
                    }
                }
            });

            $("#staff_id").on("change", function(){
            getParticipantList();
            });
            function getParticipantList() {
                var staff_id = $("#staff_id").val();
                    $.ajax({
                        type: 'GET',
                        url: "{!! route('on_call_logs.get_participant_list') !!}",
                        data : {
                            staff_id : staff_id
                        },
                        success: function(response) {
                            if (response.success || response.status) {
                                var participantList = response.participant_list || {};
                                // console.table(participantList);
                                var $select = $('#participant_id');
                                $select.select2('destroy');

                                $select.find('option:not(:first)').remove();

                                $.each(participantList, function(id, name) {
                                    $select.append($('<option>', {
                                        value: id,
                                        text: name
                                    }));
                                });
                                $select.select2({
                                    placeholder: "Select Participant",
                                    allowClear: true
                                })
                            }
                        }
                    });
            }



        var date = new Date();
        $(".datepicker_past").daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            minYear: 1901,
            autoUpdateInput: false,
            "autoApply": true,
            locale: {
                format: 'DD-MM-YYYY',
            },
            maxDate: date
            //maxYear: parseInt(2030)
        }, function (start, end, label) {
            var years = moment().diff(start, "years");
            // alert("You are " + years + " years old!");
        }
        ).on('apply.daterangepicker', function (ev, picker) {
            // `e` here contains the extra attributes
            $(this).val(picker.startDate.format('DD-MM-YYYY'));
            var year = parseInt(picker.startDate.format("YYYY"));
            if (year) {
                var age = currentYear - year;
                $('#age').val(age).trigger('change');
            }
        });

        $('.datepicker_past').on('cancel.daterangepicker', function (ev, picker) {
            $(this).val('');
        });
        $(".datepicker_future").daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            minYear: 1901,
            autoUpdateInput: false,
            "autoApply": true,
            locale: {
                format: 'DD-MM-YYYY',
            },
            minDate: date
            //maxYear: parseInt(2030)
        }, function (start, end, label) {
            var years = moment().diff(start, "years");
            // alert("You are " + years + " years old!");
        }
        ).on('apply.daterangepicker', function (ev, picker) {
            // `e` here contains the extra attributes
            $(this).val(picker.startDate.format('DD-MM-YYYY'));
            var year = parseInt(picker.startDate.format("YYYY"));
            if (year) {
                var age = currentYear - year;
                $('#age').val(age).trigger('change');
            }
        });

        $('.datepicker_future').on('cancel.daterangepicker', function (ev, picker) {
            $(this).val('');
        });
        });

        $(document).on('click', '.dropzone-delete', function() {
        actionDeleteDropZone(this);
        });

        
    function actionDeleteDropZone(ele) {
        var row = $(ele).parents('.dropzone-item:first');
        if (row) {
            var id = row.attr('id');
            let deleteConfirmation = deleteAlert;
            deleteConfirmation['text'] = "Are you sure you want to delete this file?";
            Swal.fire(deleteConfirmation).then(function(result) {
                if (result.value) {
                    let requestData = {
                        "_method": 'DELETE',
                        "_token": "{{ csrf_token() }}",
                        "type": id == "new" ? 'DeleteNewFile' : 'particularFile'
                    };
                    if (id == "new") {
                        requestData["file_name"] = row.attr('file_name');
                        requestData["id"] = "new";
                    } else {
                        requestData["file_id"] = id;
                        requestData['id'] = "{{$data['id']??''}}";
                    }
                    $.ajax({
                        type: 'POST',
                        dataType: 'json',
                        data: requestData,
                        url: "{!! route('on_call_logs.destroy',1) !!}",
                        success: function(data) {
                            if (data.status) {
                                let deleteSuccess = deleteSuccessAlert;
                                deleteSuccess['text'] = "File deleted successfully!";
                                Swal.fire(deleteSuccess);
                                row.remove();
                            }
                        }
                    });
                }
            });
        }
    }
    </script>
@endsection