@extends('layouts.header')
@section('content')
<div class="ob-mian-content">
    <div class="ob-mian-container">
                <div class="ob-mian-container-inner">

                    <div class="myInfoWrapper">
                        <h1>My Info</h1>
                        <div class="myInfoGird">
                            <h2>{{$client->name}}</h2>
                            <div class="row">
                                <div class="col-md-12 col-12">
                                    <div class="myInfoFlex">
                                        <div class="myInfoLeft">
                                            <div class="applicationToggleIcon"><img src="{{ asset('images/info-arrow.svg') }}"
                                                    width="6" height="12" alt="info arrow"></div>
                                            <h3>NEXT APPOINTMENT</h3>
                                            <div id="cloneContainer"></div>
                                        </div>
                                        <div class="myInfoRight">
                                            <div class="myInfoNav">
                                                <ul class="nav nav-tabs form-tabs" id="myTab" role="tablist">
                                                    <li class="nav-item" role="presentation">
                                                        <a class="nav-link" id="nextAppointment-tab"
                                                            data-bs-toggle="tab" data-bs-target="#nextAppointment"
                                                            type="button" role="tab" aria-controls="nextAppointment"
                                                            aria-selected="true">Next Appointment</a>
                                                    </li>
                                                    <li class="nav-item" role="presentation">
                                                        <a class="nav-link active" id="profile-tab" data-bs-toggle="tab"
                                                            data-bs-target="#profile" type="button" role="tab"
                                                            aria-controls="profile" aria-selected="false">Profile</a>
                                                    </li>
                                                    <li class="nav-item" role="presentation">
                                                        <a onclick="return showScheduledata()" class="nav-link" id="schedule-tab" data-bs-toggle="tab"
                                                            data-bs-target="#schedule" type="button" role="tab"
                                                            aria-controls="schedule" aria-selected="false">Schedule</a>
                                                    </li>
                                                    <li class="nav-item" role="presentation">
                                                        <a onclick="return showpastVisits()" class="nav-link" id="pastVisits-tab" data-bs-toggle="tab"
                                                            data-bs-target="#pastVisits" type="button" role="tab"
                                                            aria-controls="pastVisits" aria-selected="false">Past
                                                            Visits</a>
                                                    </li>
                                                    <li class="nav-item" role="presentation">
                                                        <a onclick="return showHistory()"  class="nav-link" id="sessionPurchase-tab"
                                                            data-bs-toggle="tab" data-bs-target="#sessionPurchase"
                                                            type="button" role="tab" aria-controls="sessionPurchase"
                                                            aria-selected="false">Session
                                                            Purchase History</a>
                                                    </li>
                                                </ul>

                                                <select class="mb10 form-control mobileNabs" id="tab_selector">
                                                    <option value="0">Next Appointment</option>
                                                    <option value="1">Profile</option>
                                                    <option value="2">Schedule</option>
                                                    <option value="3">Past Visits</option>
                                                    <option value="4">Session Purchase History</option>
                                                </select>

                                            </div>

                                            <div class="tab-content" id="myTabContent">
                                                <div class="tab-pane fade" id="nextAppointment" role="tabpanel"
                                                    aria-labelledby="nextAppointment-tab">
                                                    <div class="nextAppointCont apt_info_tab">
                                                    </div>
                                                    
                                                </div>
                                                <div class="tab-pane fade show active" id="profile" role="tabpanel"
                                                    aria-labelledby="profile-tab">

                                                </div>
                                                <div class="tab-pane fade" id="schedule" role="tabpanel"
                                                    aria-labelledby="schedule-tab">
                                                    <div class="scheduleGird">
                                                        <div class="scheduleNextAppointment d-none" id="no-schedule-appt-msg">
                                                            <h3>It’s time to schedule your<br>
                                                                next appointment</h3>
                                                            <a href="{{route('home.categories',$businessslug)}}" class="btn btn-info py-1 line-height-1">Schedule
                                                                Now</a>
                                                        </div>
                                                        <div class="scheduleTable">
                                                            <table class="table" id="Scheduledata" style="width:100%">
                                                                <thead>
                                                                    <tr>
                                                                        @if ($agent->isMobile())
                                                                         <th style="width: 186px; max-width: 186px;"
                                                                            scope="col">Studio</th>
                                                                        @endif
                                                                        <th style="width: 186px; max-width: 186px;"
                                                                            scope="col">DAY</th>
                                                                        <th style="width: 99px; max-width: 99px;"
                                                                            scope="col">TIME</th>
                                                                        <th style="width: 120px; max-width: 120px;"
                                                                            scope="col">SERVICE</th>
                                                                        <th style="width: 121px; max-width: 121px;"
                                                                            scope="col">ADD-ON</th>
                                                                        <th scope="col">PROVIDER</th>
                                                                        <th style="width: 132px; text-align: center; max-width: 132px;"
                                                                            scope="col">@if ($agent->isDesktop()) ACTIONS @endif</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    
                                                                </tbody>
                                                            </table>

                                                        </div>
                                                        <div class="alert alert-success" id="sc_cancel_sucess" style="display:none;"></div>
                                                        <div class="alert alert-danger" id="sc_cancel_error" style="display:none;"></div>
                                                        <div class="scheduleCancellation">
                                                            <h4>Cancellation Policy</h4>
                                                            <p>{!! $policies['cancellation_policy'] !!} </p>
                                                        </div>
                                                        <div class="reviewGird infoPagination">
                                                            <nav aria-label="...">
                                                                <ul class="pagination">
                                                                    <li class="page-item">
                                                                        <a class="page-link" href="#" tabindex="-1"
                                                                            aria-disabled="true"><img
                                                                                src="{{ asset('images/reviewArrow.svg') }}" width="7.4"
                                                                                height="11.87" alt="arrow icon"></a>
                                                                    </li>
                                                                    <li class="page-item active" aria-current="page">
                                                                        <a class="page-link" href="#">1</a>
                                                                    </li>
                                                                    <li class="page-item">
                                                                        <a class="page-link" href="#"><img
                                                                                src="{{ asset('images/reviewArrow.svg') }}" width="7.4"
                                                                                height="11.87" alt="arrow icon"></a>
                                                                    </li>
                                                                </ul>
                                                            </nav>
                                                        </div>
                                                    </div>

                                                </div>
                                                <div class="tab-pane fade" id="pastVisits" role="tabpanel"
                                                    aria-labelledby="pastVisits-tab">

                                                    <div class="scheduleGird pastVisitsGird">
                                                        <div class="scheduleNextAppointment pb-2 d-none" id="no-pastvisits-appt-msg">
                                                            <h3>You do not have a visit history. Schedule an appointment now!</h3>
                                                            <a href="{{ route('home.categories',$businessslug) }}" class="btn btn-info py-1 line-height-1">Schedule
                                                                Now</a>
                                                        </div>
                                                        <div class="scheduleTable">
                                                            <table class="table" id="pastappointments" style="width:100%">
                                                                <thead>
                                                                    <tr>
                                                                         @if ($agent->isMobile())
                                                                         <th style="width: 186px; max-width: 186px;"scope="col">Studio</th>
                                                                        @endif
                                                                        <th style="width: 186px; max-width: 186px;"
                                                                            scope="col">DATE</th>
                                                                        <th scope="col">TIME</th>
                                                                        <th scope="col">PROVIDER</th>
                                                                        <th scope="col">SERVICES</th>
                                                                        <th scope="col">ADD-ONS</th>
                                                                        <th style="width: 110px; max-width: 110px; text-align: left;"
                                                                            scope="col">STATUS</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    
                                                                </tbody>
                                                            </table>
                                                            <div class="reviewGird infoPagination">
                                                                <nav aria-label="...">
                                                                    <ul class="pagination">
                                                                        <li class="page-item">
                                                                            <a class="page-link" href="#" tabindex="-1"
                                                                                aria-disabled="true"><img
                                                                                    src="{{ asset('images/reviewArrow.svg') }}"
                                                                                    width="7.4" height="11.87"
                                                                                    alt="arrow icon"></a>
                                                                        </li>
                                                                        <li class="page-item active"
                                                                            aria-current="page">
                                                                            <a class="page-link" href="#">1</a>
                                                                        </li>
                                                                        <li class="page-item">
                                                                            <a class="page-link" href="#"><img
                                                                                    src="{{ asset('images/reviewArrow.svg') }}"
                                                                                    width="7.4" height="11.87"
                                                                                    alt="arrow icon"></a>
                                                                        </li>
                                                                    </ul>
                                                                </nav>
                                                            </div>
                                                        </div>

                                                    </div>

                                                </div>
                                                <div class="tab-pane fade" id="sessionPurchase" role="tabpanel"
                                                    aria-labelledby="sessionPurchase-tab">

                                                    <div class="scheduleGird sessionGird">
                                                        <div class="scheduleNextAppointment pb-2 d-none"  id="no-purchasehistory-msg">
                                                            <h3>You do not have a purchase history.</h3><a href="{{ route('home.categories',$businessslug) }}" class="btn btn-info py-1 line-height-1">SCHEDULE AN APPOINTMENT NOW</a>
                                                        </div>
                                                        <div class="scheduleTable">
                                                            <table id="history-table" class="table">
                                                                <thead>
                                                                    <tr>
                                                                        <th style="max-width: 123px; width: 123px;"
                                                                            scope="col">PAID</th>
                                                                        <th style="max-width: 100px; width: 100px;"
                                                                            scope="col">AMOUNT</th>
                                                                        <th scope="col">DESCRIPTION</th>
                                                                        <th scope="col">AVAILABLE</th>
                                                                        <th style="max-width: 131px; width: 131px;"
                                                                            scope="col">EXPIRATION DATE</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>

                                                                    <!-- <tr>
                                                                        <td data-label="PAID" scope="row">
                                                                            <div class="infodate">2/19/2024</div>
                                                                        </td>
                                                                        <td data-label="AMOUNT">$124.99</td>
                                                                        <td data-label="DESCRIPTION">Lash Refill + 3D
                                                                            Volume</td>
                                                                        <td data-label="AVAILABLE">1</td>
                                                                        <td data-label="EXPIRATION DATE">2/19/2025</td>
                                                                    </tr> -->
                                                                    
                                                                </tbody>
                                                            </table>
                                                            <div class="reviewGird infoPagination">
                                                                <nav aria-label="...">
                                                                    <ul class="pagination">
                                                                        <li class="page-item">
                                                                            <a class="page-link" href="#" tabindex="-1"
                                                                                aria-disabled="true"><img
                                                                                    src="{{ asset('images/reviewArrow.svg') }}"
                                                                                    width="7.4" height="11.87"
                                                                                    alt="arrow icon"></a>
                                                                        </li>
                                                                        <li class="page-item active"
                                                                            aria-current="page">
                                                                            <a class="page-link" href="#">1</a>
                                                                        </li>
                                                                        <li class="page-item">
                                                                            <a class="page-link" href="#"><img
                                                                                    src="{{ asset('images/reviewArrow.svg') }}"
                                                                                    width="7.4" height="11.87"
                                                                                    alt="arrow icon"></a>
                                                                        </li>
                                                                    </ul>
                                                                </nav>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
</div>


<!-- Modal -->
    <div class="modal fade" id="minorPolicy" tabindex="-1" aria-labelledby="minorPolicyModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width: 306px; margin: 0 auto;">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <button type="button" class="btn-close pt-4 pe-4 z-2" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="minor-caps">
                        <img class="mx-2" src="{{ asset('images/resetIcon.svg') }} " width="24" height="24" alt="icon" />
                        <img class="mx-2" src="{{ asset('images/resetIcon.svg') }}" width="24" height="24" alt="icon" />
                        <img class="mx-2" src="{{ asset('images/resetIcon.svg') }}" width="24" height="24" alt="icon" />
                    </div>
                    <div class="minor-cont">
                        <h2>Password Reset</h2>
                        <p class="text-center" style="min-height: 160px;"> Please check the email associated with this account. Your password reset link will arrive shortly.</p>
                    </div>


                </div>

            </div>
        </div>
    </div>
@endsection
@section('customJs')
 <link href="{{ asset('css/jquery.dataTables.css') }}" rel="stylesheet">
<script src="{{ asset('js/jquery.dataTables.js') }}"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<link href="{{ asset('css/mobiscroll.jquery.min.css') }}" rel="stylesheet" media="all" />
<script src="{{ asset('js/mobiscroll.jquery.min.js') }}"></script>
<script type="text/javascript">

 
            function cancel_appt(){
                if (confirm('Are you sure you want to cancel appointment ?')) {
                    $('.loader').show();
                    $('#cancel_btn').attr("disabled","disabled");
                    var appointment_id=$('#appointment_id').val();
                    var loc_salon_id=$('#loc_salon_id').val();
                    if(appointment_id!=''){
                        $.ajax({
                          url: "{{ route('cancel-appointment', $businessslug) }}",
                          data: {"_token": "{{ csrf_token() }}",appointment_id:appointment_id,"loc_salon_id":loc_salon_id},
                          type: "POST",
                          success: function(data1){
                           // console.log(data1);
                            $('.loader').hide();
                            if(data1=="Appointment cancelled successfully"){
                                 $('#error_cancel_success').css("display","block");
                                 $('#error_cancel_success').html(data1);
                                 setTimeout(function() {
                                    $('#error_cancel_success').css("display","none");
                                   get_appt_data();
                                   showScheduledata();
                                   
                                 }, 1000);
                                
                            }else{
                               // $('.loader').hide();
                                $('#error_cancel').html(data1);
                                setTimeout(function() {
                                 $('#error_cancel').css("display","none");
                             }, 1000);

                            }
                          }
                    });
                }
                }

            }
        function sc_cancel_appt(loc_salon_id,appointment_id){
             if (confirm('Are you sure you want to cancel appointment ?')) {
                $('#sc_cancel_btn_'+appointment_id).attr("disabled","disabled");
                $('#sc_cancel_btn_'+appointment_id).text("Loading..");
                $('.loader').show();
                if(appointment_id!='' && loc_salon_id!=''){
                    $.ajax({
                      url: "{{ route('cancel-appointment', $businessslug) }}",
                      data: {"_token": "{{ csrf_token() }}",appointment_id:appointment_id,"loc_salon_id":loc_salon_id},
                      type: "POST",
                      success: function(data1){
                        $('.loader').hide();
                       // console.log(data1);
                        //$('#sc_cancel_btn_'+appointment_id).text("Cancel");
                        if(data1=="Appointment cancelled successfully"){
                             $('#sc_cancel_sucess').css("display","block");
                             $('#sc_cancel_sucess').html(data1);
                              $('.alert-sucess').delay(5000).fadeOut('slow');
                             setTimeout(function() {
                                $('#sc_cancel_sucess').css("display","none");
                                get_appt_data();
                                showScheduledata();
                                 
                             }, 1000);
                            
                        }else{
                            $('#sc_cancel_btn_'+appointment_id).text("Cancel");
                            $('#sc_cancel_error').css("display","block");
                            $('#sc_cancel_error').html(data1);
                            $('.alert-danger').delay(5000).fadeOut('slow');
                            setTimeout(function() {
                                 $('#sc_cancel_error').css("display","none");
                             }, 2000);

                        }
                      }
                });
                }
            }

            }
       
        function get_client_data(){
             //$('#profile').html("Loading...");
             $('.loader').show();
             $.ajax({
                  url: "{{ route('get-client-info', $businessslug) }}",
                  type: "GET",
                  success: function(data1){
                   // console.log(data1);
                    if(data1!=""){
                         $('.loader').hide();
                        $('#profile').html(data1);
                    }
                  }
                });
        }
         function get_appt_data(){
             $('.apt_info_tab').html("Loading...");
             $.ajax({
                  url: "{{ route('get-appt-info', $businessslug) }}",
                  type: "GET",
                  success: function(data1){
                   // console.log(data1);
                    if(data1!=""){
                        $('.apt_info_tab').html(data1);
                    }
                  }
                });
        }
        $(document).ready(function () {
          $('.alert-success').delay(5000).fadeOut('slow');
          $('.alert-danger').delay(5000).fadeOut('slow');
           get_client_data();
           get_appt_data();
        });
    function showScheduledata(){
        //alert("here");
        //$('.loader').show();
         $('.loader').show();
        $(function() {
            var table = $('#Scheduledata').DataTable({
                "ordering": true,
                 responsive: true,
                ordering: false,
                processing: true,
                serverSide: true,
                lengthChange: false,
                searching:false,
                bDestroy: true,
                ajax: "{{ route('get-schedule-info',$businessslug) }}",
                columns: [
                    @if ($agent->isMobile())
                    {data: 'studio', name: 'studio'},
                    @endif
                    {data: 'infodate', name: 'infodate'},
                    {data: 'time', name: 'time'},
                    {data: 'service_name', name: 'service_name'},
                    {data: 'addons', name: 'addons'},
                    {data: 'staff_name', name: 'staff_name'},
                    {data: 'action', name: 'action', orderable: false, searchable: false}
                ],
                order: [[0, 'desc']],
                 createdRow: function(row, data, dataIndex) {
                    $(row).find('td').each(function(index, td) {
                        // Add data-label attribute to each <td>
                        var columnName = table.column(index).header().innerText.trim();
                        $(td).attr('data-label', columnName);
                    });
                },
                fnInitComplete : function() {
                   
                    $('.loader').hide();
                  if ($(this).find('tbody tr td').length<=1) {
                     $(this).parent().hide();
                     $('#no-schedule-appt-msg').removeClass("d-none");
                  }
               }
                
            });
        });
        

    }

        function showpastVisits(){
            $('.loader').show();
            $(function() { 
                var table = $('#pastappointments').DataTable({
                    "ordering": false,
                    processing: true,
                    serverSide: true,
                    lengthChange: false,
                    searching:false,
                    bDestroy: true,
                    ajax: "{{ route('get-past-visits',$businessslug) }}",
                    columns: [
                        @if ($agent->isMobile())
                        {data: 'studio', name: 'studio'},
                        @endif
                        {data: 'infodate', name: 'infodate'},
                        {data: 'time', name: 'time'},
                        {data: 'staff_name', name: 'staff_name'},
                        {data: 'service_name', name: 'service_name'},
                        {data: 'addons', name: 'addons'},
                        {data: 'appt_status', name: 'appt_status', orderable: false, searchable: false}
                    ],
                    createdRow: function(row, data, dataIndex) {
                        $(row).find('td').each(function(index, td) {
                            // Add data-label attribute to each <td>
                            var columnName = table.column(index).header().innerText.trim();
                            $(td).attr('data-label', columnName);
                        });
                    },
                    fnDrawCallback : function() {
                        $('.loader').hide();
                      if ($(this).find('tbody tr td').length<=1) {
                         $(this).parent().hide();
                         $('#no-pastvisits-appt-msg').removeClass("d-none");
                      }
                    }
                    
                });
            });
        }
       
    </script>
    
    <script type="text/javascript">
        $(document).ready(function () {
            var clonedDiv = $(".nextAppointCont").clone(); // Clone the div

            clonedDiv.appendTo("#cloneContainer"); // Append the cloned div to the container
           //clonedDiv.find('#cancel_btn').addClass('d-block');

        });

        // $('.studioName').clone().appendTo('.infoName');
        $('.mobileNabs').selectpicker();

        $('.applicationToggleIcon').on('click', function () {
            $('.myInfoFlex').toggleClass('active');
        });

        $('#tab_selector').on('change', function (e) {
            $('.form-tabs li a').eq($(this).val()).tab('show');
             var selValue = $("#tab_selector").val();
                if($(this).val() == 2 ){
                    showScheduledata();
                }else if($(this).val() == 3 ){
                    showpastVisits();
                }else if($(this).val() == 4 ){
                    showHistory();
                }
        });

  
        $(document).ready(function () {
            function toggleTabs() {
                if (window.innerWidth > 992) {
                    $('#profile-tab').tab('show');
                } else {
                    $('#nextAppointment-tab').tab('show');
                }
            }
            
            toggleTabs();  // Initial call

            /*$(window).resize(function () {
                toggleTabs();  // Call on window resize
            });*/
        });

        const phoneInput = document.getElementById('mobile_phone');
        phoneInput.addEventListener('input', function(e) {
            let input = e.target.value;
            // Remove all non-digit characters
            input = input.replace(/\D/g, '');
            // Format input as (123) 456-7890
            if (input.length > 0) {
                input = '(' + input;
            }
            if (input.length > 4) {
                input = input.slice(0, 4) + ') ' + input.slice(4);
            }
            if (input.length > 9) {
                input = input.slice(0, 9) + '-' + input.slice(9);
            }
            // Limit input to 14 characters (including formatting)
            e.target.value = input.slice(0, 14);
        });

        const cvvInput = document.getElementById('cvv');
        // Restrict input to numbers only
        cvvInput.addEventListener('input', function(e) {
            // Remove any non-numeric characters
            e.target.value = e.target.value.replace(/\D/g, '');
            // Once 3 digits are entered, change the input type to password
            e.target.type = 'password';
             
        });
        // Handle cases where the user deletes digits, switch back to text input
        cvvInput.addEventListener('keydown', function(e) {
            if (e.key === 'Backspace' && e.target.value.length <= 3) {
                e.target.type = 'text';
            }
        });


        
        const expDateInput = document.getElementById('exp_date');
        expDateInput.addEventListener('input', function(e) {
            let input = e.target.value;
            // Remove non-numeric characters except "/"
            input = input.replace(/[^0-9\/]/g, '');
            // Add slash after the second digit (MM part) if it's not already present
            if (input.length > 2 && input.indexOf('/') === -1) {
                input = input.slice(0, 2) + '/' + input.slice(2);
            }
            // Limit the input length to 5 characters (MM/YY)
            e.target.value = input.slice(0, 5);
        });

        $(document).ready(function() {
            if ($('.myInfoWrapper').length) {
                $('.ob-mian-content').css('min-height', 'calc(100vh - 173px)');
                $('.ob-footer').css('display', 'block');
            }
        });

        function showHistory(){
            $('.loader').show();
            $(function() {  
            var table = $('#history-table').DataTable({
                responsive:true,
                processing: true,
                serverSide: true,
                "lengthChange": false,
                searching: false,
                bDestroy: true,
                //pageLength: 2,
                ajax: {
                    url: "{{ route('history', $businessslug) }}",
                    
                },
                columns: [
                    {
                        data: 'paid',
                        name: 'paid'
                    },
                    {
                        data: 'AmountPaid',
                        name: 'AMOUNT'
                    },
                    {
                        data: 'Name',
                        name: 'DESCRIPTION'
                    },
                    {
                        data: 'Remaining',
                        name: 'AVAILABLE'
                    },
                    {
                        data: 'ExpirationDate',
                        name: 'EXPIRATION DATE'
                    }
                ],
                createdRow: function(row, data, dataIndex) {
                    $(row).find('td').each(function(index, td) {
                        // Add data-label attribute to each <td>
                        var columnName = table.column(index).header().innerText.trim();
                        $(td).attr('data-label', columnName);
                    });
                },
                fnInitComplete : function() {
                    $('.loader').hide();
                      if ($(this).find('tbody tr td').length<=1) {
                         $(this).parent().hide();
                         $('#no-purchasehistory-msg').removeClass("d-none");
                      }
                    }
            });

            });
            


           


        
        }
 
    </script>
@endsection