@extends('front.inner-layout.app')
@section('content')
<style> 
      .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
      margin: 0px 15px;
      }
  
      .switch input { 
      opacity: 0;
      width: 0;
      height: 0;
      }
  
      .switch .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s;
      }
  
      .switch .slider:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
      }
      .switch .slider:before {
        height: 11px;
        width: 11px;
      }
      .switch {
        width: 37px;
        height: 19px;
      }
  
      .switch input:checked + .slider {
        background-color: #67aeb5   !important;
      }
  
      .switch input:focus + .slider {
      box-shadow: 0 0 1px #67aeb5 !important;
      }
  
      .switch input:checked + .slider:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
      }
      .switch input:checked + .slider:before {
      -webkit-transform: translateX(18px);
      -ms-transform: translateX(18px);
      transform: translateX(18px);
      }
  

      .swal2-icon.swal2-success [class^=swal2-success-line][class$=tip] {
        top: 2.5em;
        left: 0.2em;
        width: 1.4em;
    }

    .swal2-icon.swal2-success [class^=swal2-success-line][class$=long] {
        top: 2em !important;
        right: 0.2em !important;
    }

      /* Rounded sliders */
      .slider.round {
      border-radius: 34px;
      }
  
      .slider.round:before {
      border-radius: 50%;
      }
      .switch-btn-outer {
          display: flex;
          align-items: center;
      }

      .switch-btn-outer span {
          color: #898989;
      }
      
      .blue-t-color {color:#68afb5 !important;}
    .input-box {
        /* border: 1px solid #ccc;
        padding: 5px;
        margin-bottom: 10px;
        border-radius: 5px; */
    }

    .input-box label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }

    .input-box input {
        width: 100%;
        padding: 5px;
        box-sizing: border-box;
        border: none;
        border-radius: 3px;
    }
    .input-container {
        display: flex;
        align-items: center;
    }

    .input-container label {
        margin-right: 10px;
    }

    .input-container input {
        flex: 1;
    }

    h5, h6, strong {
        color: black;
    }

    .booking-confirmation .confirm-bttn {
        width: 100%;
    }

    .swal2-close {
        color: black;   
    }

    .selected-image {
        max-width: 100%;
        max-height: 300px;
        margin-top: 10px;
    }

</style>


<input type="hidden" id="practitioner_details" name="practitioner_details" value="{{$practitioner}}" >
<input type="hidden" id="bank_details" name="bank_details" @if(isset($bank_details)) value="{{$bank_details}}" @else value="null" @endif >
<input type="hidden" id="show_frequency" name="show_frequency" value="{{$show_frequency}}" />
<div class="page-content dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper">
    <div class="row align-items-center">
        <nav class="navbar w-100">
            <nav class="navbar navbar-light invoice-page-menu notes-menu w-100">
                <a href="{{ url()->previous() }}"><img src="{{asset('assets/images/My Appointments back icon.svg')}}" alt="" class="img-flude" style="min-width: 40px"></a>
                <h1 class="page-title eagle-font font-400 pl-2"><span class="arca-font">My</span> Deposits</h1>
                <ul class="list-inline icons-listing mr-auto my-auto"></ul>
            </nav>
        </nav>
    </div>
    <div class="brdr-bttm"></div>
    <input type="hidden" class="form-control" id="acct_name_old" placeholder="Number" name="acct_name_old" @if(isset($bank_details)) value="{{$bank_details->account_name}}" @endif >
    <input type="hidden" class="form-control" id="bsb_old" placeholder="Number" name="bsb_old" @if(isset($bank_details)) value="{{$bank_details->bsb}}" @endif >
    <input type="hidden" class="form-control" id="acc_old" placeholder="Number" name="acc_old" @if(isset($bank_details)) value="{{$bank_details->account_number}}" @endif >
    <input type="hidden" name="deposit_frequency_old" id ="deposit_frequency_old" @if(isset($bank_details)) value="{{$bank_details->deposit_funds_frequency}}" @endif>
    
    <div class="container">
        <div class="row">
           <div class="invoice-contain deposit-main boxwhite p-0 booking-confirmation tap-to-pay-outer">
                <div div class="clientintakeModal clientintakecontain">
                    <div class="deposit-info">
                        <h5 class="">
                            <strong>
                                Deposit Information
                            </strong>
                        </h5>
    
                        <p>In order for us to settle your payments, we require your bank account details and proof of identity.</p>
                        @if(!isset($bank_details))
                            <p class="">Settlements are deposited into the nominated bank account weekly on Friday. Please allow up to 72 hours for this information to be processed by our payment partners.</p>
                        @else
                            <p class="">Settlements are deposited into the nominated bank account. Any changes made on this page can take up to 72 hours to be actioned.</p>
                            {{-- <p class="">Settlements are deposited into the nominated bank account at the frequency detailed below. Any changes made on this page can take up to 72 hours to be actioned.</p> --}}
                        @endif
    
                        <h5 class="">
                            <strong>
                                Bank Account
                            </strong>
                        </h5>

                        <div class="deposit-form-inner">
                            <div class="input-box input-container row">
                                <div class="col-sm-12 col-md-4">
                                    <label for="name">Bank account name</label>
                                </div>
                                <div class="col-sm-12 col-md-8">
                                    <input type="text" class="form-control" id="acct_name" placeholder="Name on bank account" name="acct_name" @if(isset($bank_details->account_name)) value="{{$bank_details->account_name}}" @endif >
                                </div>
                            </div>
                            <span id="account_name_error" class="invalid-feedback d-block"></span>

                            <div class="input-box input-container row">
                                <div class="col-sm-12 col-md-4">
                                    <label for="name">BSB </label>
                                </div>
                                <div class="col-sm-12 col-md-8">                                    
                                    <input type="text" class="form-control" id="bsb" placeholder="BSB number" name="bsb" @if(isset($bank_details->bsb)) value="{{$bank_details->bsb}}" @endif >
                                </div>
                            </div>
                            <span id="bsb_error" class="invalid-feedback d-block"></span>
                   
        
                            <div class="input-box input-container row">
                                <div class="col-sm-12 col-md-4">
                                    <label for="name">Account number</label>
                                </div>
                                <div class="col-sm-12 col-md-8">
                                    
                                    <input type="text" class="form-control" id="acc" placeholder="Account number" name="acc" @if(isset($bank_details->account_number)) value="{{$bank_details->account_number}}" @endif >
                                </div>
                            </div>
                            <span id="acc_error" class="invalid-feedback d-block"></span>

                    
                            @if(!isset($bank_details->bsb) && !isset($bank_details->account_number) && !isset($bank_details->account_name))
                                <h5 class="pt-5">
                                    <strong>
                                        Driver's license
                                    </strong>
                                </h5>
        
                                <div class="row justify-content-between">
                                    <div class="col-md-6">
                                        <div class="label-input">
                                            <div class="file-upload5">
                                                <div class="image-upload-wrap1">
                                                    <input class="file-upload-input1" type='file' onchange="license_front1(this);" id="license_front" name="image[]" accept="image/*" />
                                                    <div class="drag-text">
                                                        <img src="{{asset('assets/images/upload-icon-g.png')}}" alt="" class="img-fluid browsebox">
                                                        <h3>Drag and drop license front
                                                            here
                                                        </h3>
                                                        <span class="d-block textor">-
                                                            or -</span>
                                                    </div>
                                                    <button class="file-upload-btn btn-transp" type="button" onclick="$('.file-upload-input1').trigger( 'click' )">Browse
                                                        files
                                                    </button>
                                                </div>
                                                <span id="license_front_error" class="invalid-feedback d-block"></span>
                                                <span class="invalid-feedback d-block" id="testResult_error" style="margin-left: -42px; position: fixed;margin-top:0px;" id="image_validation"></span>
                                                <div id="file-upload-content1" class="file-upload-content5">
                                                    {{-- <h2 id="file-uploaded-preview" style="color:#457379;text-align:center;margin-left:auto;margin-right: auto;margin-bottom: 30px;font-size: 25px;">
                                                        Uploaded</h2> --}}
                                                        <img src="" class="selected-image" alt="Selected Image" id="selected-image1" style="display: none;">
                                                    <div class="image-title-wrap5">
                                                        <button type="button" onclick="removeUploadLicenseFront()" class="remove-image5 remove-pic-text">Remove</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="file-upload5">
                                            <div class="image-upload-wrap2">
                                                <input class="file-upload-input5" type='file' onchange="license_back2(this);" id="license_back" name="image[]" accept="image/*" />
                                                <div class="drag-text">
                                                    <img src="{{asset('assets/images/upload-icon-g.png')}}" alt="" class="img-fluid browsebox">
                                                    <h3>Drag and drop license back
                                                        here
                                                    </h3>
                                                    <span class="d-block textor">-
                                                        or -</span>
                                                </div>
                                                <button class="file-upload-btn btn-transp" type="button" onclick="$('.file-upload-input5').trigger( 'click' )">Browse
                                                    files</button>
                                            </div>
                                            <span id="license_back_error" class="invalid-feedback d-block"></span>
        
                                            <span class="invalid-feedback d-block" id="testResult_error" style="margin-left: -42px; position: fixed;margin-top:0px;" id="image_validation"></span>
                                            <div id="file-upload-content2" class="file-upload-content5">
                                                {{-- <h2 id="file-uploaded-preview" style="color:#457379;text-align:center;margin-left:auto;margin-right: auto;margin-bottom: 30px;font-size: 25px;">
                                                    Uploaded</h2> --}}
                                                <img src="" class="selected-image" alt="Selected Image" id="selected-image2" style="display: none;">
                            
                                                <div class="image-title-wrap5">
                                                    <button type="button" onclick="removeUploadLicenseBack()" class="remove-image5 remove-pic-text">Remove</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
       
                    @if($show_frequency)
                        <h5 class="">
                            <strong>
                                Deposit Frequency
                            </strong>
                        </h5>   
                    
                        <div class="switch-btn-outer">
                            <h6><span id="daily" @if(isset($bank_details->deposit_funds_frequency) && $bank_details->deposit_funds_frequency == "Daily") class="monthly-span blue-t-color" @else class="monthly-span" @endif >Daily</span></h6>
                            <label class="switch" id="frequency_switch">
                                <input type="checkbox" name="deposit_frequency" id ="deposit_frequency" @if(isset($bank_details->deposit_funds_frequency)) value="{{$bank_details->deposit_funds_frequency}}" @if($bank_details->deposit_funds_frequency == 'Weekly') checked @endif @else checked value="Weekly" @endif>
                                <span class="slider round"></span>
                            </label>
                            <h6><span id="weekly" @if(isset($bank_details->deposit_funds_frequency) && $bank_details->deposit_funds_frequency == "Weekly") class="annually-span blue-t-color" @elseif(!isset($bank_details->deposit_funds_frequency)) class="annually-span blue-t-color" @else class="annually-span" @endif >Weekly</span></h6>
                        </div>
                    @endif 
                           
                        
                    </div>
                    <hr />
                    <div class="footer-btn">
                        <button type="submit" id="updateAndSave" class="cursor-pointer save-btn save-btn-bg confirm-bttn">Update and save</button>  
                     </div>
                     <div class="loading" style="z-index: 1066 !important;display: none !important;">Loading&#8230;</div>

                </div>
            </div>
        </div>
    </div>
</div>
@include('front.practitioner.import.include.js')
<script type="text/javascript">


    var license_front = null;
    var license_back = null;

    $(document).on('keyup','#bsb', function(event) {
        if (/\D/g.test(this.value)) {
            this.value = this.value.replace(/\D/g, '');
        }
    })

    $(document).on('keyup','#acc', function(event) {
        if (/\D/g.test(this.value)) {
            this.value = this.value.replace(/\D/g, '');
        }
    })

    $(document).on('change', '#deposit_frequency', function(e) {
        if(this.value === "Daily") {
            $('#deposit_frequency').val('Weekly');
            $('#weekly').addClass('blue-t-color');
            $('#daily').removeClass('blue-t-color');

        } else {
            $('#deposit_frequency').val('Daily');
            $('#daily').addClass('blue-t-color');
            $('#weekly').removeClass('blue-t-color');
        }
    });

    function license_front1(input) {
        console.log("files", input.files[0]);
        if (input.files && input.files[0]) {
            const file = input.files[0];

            const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/bmp', 'image/webp'];
            
            if (allowedTypes.includes(file.type)) {
                // Valid image type, continue with form submission
                const selectedImage = document.getElementById('selected-image1');
                selectedImage.src = URL.createObjectURL(file);
                selectedImage.style.display = 'block';

                license_front = input.files[0];
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('.image-upload-wrap1').hide();
                    $('#file-upload-content1').show();
                    $('.image-title1').html(input.files[0].name);
                };
                reader.readAsDataURL(input.files[0]);
                $('#license_front_error').text('')
            } else {
                $('#license_front_error').text('Please select a valid image file (JPEG, PNG, JPG, WEBP).')
            }


        }
        $('#testResult_error').text('');
    }

    function removeUploadLicenseFront() {
        $('#license_front').replaceWith($('.file-upload-input1').clone());
        $('#file-upload-content1').hide();
        $('.image-upload-wrap1').show();
        $('#license_front').val(""); 
    }

    function license_back2(input) {
        if (input.files && input.files[0]) {
            const file = input.files[0];

            const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/bmp', 'image/webp'];
            
            if (allowedTypes.includes(file.type)) {
                const selectedImage = document.getElementById('selected-image2');
                selectedImage.src = URL.createObjectURL(file);
                selectedImage.style.display = 'block';
    
                license_back = input.files[0];
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('.image-upload-wrap2').hide();
                    $('#file-upload-content2').show();
                    $('.image-title2').html(input.files[0].name);
                };
                reader.readAsDataURL(input.files[0]);
                $('#license_back_error').text('')

            } else {
            const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/bmp', 'image/webp'];

                $('#license_back_error').text('Please select a valid image file (JPEG, PNG, JPG, WEBP).')
            }
        }
        $('#testResult_error').text('');
    }

    function removeUploadLicenseBack() {
        $('#license_back').replaceWith($('.file-upload-input5').clone());
        $('#file-upload-content2').hide();
        $('.image-upload-wrap2').show();
        $('.#license_back').val("");   
    }

    $(document).on('click', '#updateAndSave', function () {
        let bank_details = JSON.parse($('#bank_details').val());
        let practitioner_details = JSON.parse($('#practitioner_details').val());

        let id = bank_details?.id;
        let acct_name = $('#acct_name').val();
        let bsb = $('#bsb').val();
        let acc = $('#acc').val();
        let deposit_frequency = "Weekly";
        let show_frequency = $('#show_frequency').val();

        if($('#deposit_frequency').val()) {
            deposit_frequency = $('#deposit_frequency').val();
        }

        if(!bank_details?.bsb && !bank_details?.account_number && !bank_details?.account_name && !bank_details?.deposit_funds_frequency) {
            if(!acct_name && !bsb && !acc && !license_front && !license_back) {
                $('#account_name_error').text('This field is required.')
                $('#bsb_error').text('This field is required.')
                $('#acc_error').text('This field is required.')
                $('#license_front_error').text('This field is required.')
                $('#license_back_error').text('This field is required.')
    
            } else if (!acct_name) {
                $('#account_name_error').text('This field is required.')
            } else if (!bsb) {
                $('#bsb_error').text('This field is required.')
            } else if (!acc) {
                $('#acc_error').text('This field is required.')
            } else if (!license_front) {
                $('#license_front_error').text('This field is required.')
            } else if (!license_back) {
                $('#license_back_error').text('This field is required.')
            } else {
                $('#account_name_error').text('');
                $('#bsb_error').text('')
                $('#acc_error').text('')
                $('#license_front_error').text('')
                $('#license_back_error').text('')
    
                var form_data = new FormData();
                if(id) {
                    form_data.append('id', id);
                }
                form_data.append('bsb', bsb);
                form_data.append('acc', acc);
                form_data.append('acct_name', acct_name);
                form_data.append('deposit_frequency', deposit_frequency);
                form_data.append('practitioner_id', practitioner_details.id);
                form_data.append('license_front', license_front);
                form_data.append('license_back', license_back);
    
                let details = "daily to weekly";
                if(deposit_frequency === 'Daily') {
                    details = "weekly to daily";
                }

                let text = `Changes can take up to 74 hours to reflect.`;
                let title = `Change bank details?`;

                if((bsb !== $('#bsb_old').val() || acc !== $('#acc_old').val() || acct_name !== $('#acct_name_old').val()) && deposit_frequency !== $('#deposit_frequency_old').val()) {
                    title = 'Change bank settlements?';
                } else if(bsb !== $('#bsb_old').val() || acc !== $('#acc_old').val() || acct_name !== $('#acct_name_old').val()) {
                    title = "Change bank details?"
                    text = 'Changes can take up to 72 hours to reflect.'
                }

                if(!show_frequency) {
                    title = "Change bank details?"
                    text = 'Changes can take up to 72 hours to reflect.'
                }

                // swal.fire({
                //     icon: 'warning',
                //     title: title,
                //     text: text,
                //     confirmButtonText: 'Confirm',
                //     customClass: "deposit-swal-modal",
                //     focusConfirm: false,
                //     showCloseButton: true,
                //     showCancelButton: true
                // }).then((result) => {
                //     if (result.value) {
                        $.ajax({
                            url: "{{ route('practitioner.update.my_deposits') }}",
                            contentType: false,
                            processData: false,
                            data: form_data,
                            type: "POST",
                            beforeSend: function(msg) {
                                $(".loading").addClass("d-block");
                            },
                            }).done(function (response) {
                                $(".loading").removeClass("d-block");
                                if(response.status == 'success'){
                                    swal.fire({
                                        icon: 'success',
                                        title: 'Thank you',
                                        text: 'Your account details have been updated',
                                        focusConfirm: false,
                                        iconColor: '#f7bb85',
                                    });
                                    window.location.href = "{{ route('practitioner.income') }}";
                                } else {
                                    Swal.fire({
                                        icon: "error",
                                        title: 'Something went wrong',
                                        showClass: {
                                          popup: 'animate__animated animate__fadeInDown'
                                        },
                                        hideClass: {
                                          popup: 'animate__animated animate__fadeOutUp'
                                        }
                                    });
                                }
                        });
                   // }
                //});
            }
        } else {
            if(!bsb && !acc && !acct_name ) {
                $('#account_name_error').text('This field is required.')
                $('#bsb_error').text('This field is required.')
                $('#acc_error').text('This field is required.')
            } else if (!acct_name) {
                $('#account_name_error').text('This field is required.')
            } else if (!bsb) {
                $('#bsb_error').text('This field is required.')
            } else if (!acc) {
                $('#acc_error').text('This field is required.')
            } else {
                $('#account_name_error').text('');
                $('#bsb_error').text('')
                $('#acc_error').text('')

                  
                let details = "daily to weekly";
                if(deposit_frequency === 'Daily') {
                    details = "weekly to daily";
                }

                let text = `Changes can take up to 74 hours to reflect.`;
                let title = `Change bank details?`;

                if((bsb !== $('#bsb_old').val() || acc !== $('#acc_old').val() || acct_name !== $('#acct_name_old').val()) && deposit_frequency !== $('#deposit_frequency_old').val()) {
                    title = 'Change bank settlements?';
                } else if(bsb !== $('#bsb_old').val() || acc !== $('#acc_old').val() || acct_name !== $('#acct_name_old').val()) {
                    title = "Change bank details?"
                    text = 'Changes can take up to 72 hours to reflect.';
                }

                if(!show_frequency) {
                    title = "Change bank details?"
                    text = 'Changes can take up to 72 hours to reflect.'
                }
                
                swal.fire({
                    icon: 'warning',
                    title: title,
                    text: text,
                    confirmButtonText: 'Confirm',
                    customClass: "deposit-swal-modal",
                    focusConfirm: false,
                    showCloseButton: true,
                    showCancelButton: true
                }).then((result) => {
                    if (result.value) {
                        $.ajax({
                            url: "{{ route('practitioner.update.my_deposits') }}",
                            dataType: "JSON",
                            data: { id, bsb, acc, acct_name, deposit_frequency, practitioner_id: practitioner_details.id, _token: "{{ csrf_token() }}"},
                            type: "POST",
                            beforeSend: function(msg) {
                                $(".loading").addClass("d-block");
                            },
                        }).done(function (response) {
                                $(".loading").removeClass("d-block");
                                if(response.status == 'success'){
                                            swal.fire({
                                                icon: 'success',
                                                title: 'Settlement details updated',
                                                focusConfirm: false,
                                                iconColor: '#f7bb85',
                                            });
                                        
                                            window.location.href = "{{ route('practitioner.income') }}";
                                        
                                        } else {
                                            Swal.fire({
                                                icon: "error",
                                                title: 'Something went wrong',
                                                showClass: {
                                                  popup: 'animate__animated animate__fadeInDown'
                                                },
                                                hideClass: {
                                                  popup: 'animate__animated animate__fadeOutUp'
                                                }
                                            });
                                        }
                        });
                    }
                });
            }
            
        }
    });

    $('#sort-area').click(function () {
        	if ($(window).width() >= 992) {
        	  $('.sidebar-menu-blue').toggleClass('sidebarcollapse');
        	  $('.dash-space').toggleClass('dashspace-area');
        	}
        	$.ajax({
        	    url: "{{route('store.sidebar.open&close.status')}}",
        	    type: 'GET',
        	}).done(function(response) {});
    	});

</script>
@endsection