@extends('layouts/home/logined_new')



@section('title')

    {{trans('common.title_user')}}

@endsection
<style>
    @media screen and (max-width: 1200px) {
        #sj {
            width:500px;
            margin-left:350px;
            margin-top:40px
        }
    }
</style>


@section('content')

    <div style="min-height: 800px;min-width:1200px;background:#fff;min-height:800px;margin: 0 auto">
        <div id="main" style="width:1000px;margin: 0 auto;margin-bottom:20px;">
            <div id="sj">
                <p style="font-size:20px;font-weight:bold;margin-top:10px;padding-top:30px">{{$info['pro_address']}} </p>
                @if($info['qr_status']== 5)
                    <p style="color:red;font-size:20px;margin-top:10px;padding-top:30px"> This Project is canceled </p>
                @endif
                <form id="frm" style="padding-top:10px;font-size:12px">
                    {!! csrf_field() !!}
                    <input type="hidden" name="id" value="{{$info['id']}}" id="cid">
                    <table >
                        <tr>
                            <td style="font-weight:bold;text-align: right;height:30px;font-size:12px">Property Address :</td>
                            <td style="width:500px;font-size:12px">&nbsp;&nbsp;&nbsp;{{$info['pro_address']}}</td>
                        </tr>
                        <tr>
                            <td style="font-weight:bold;text-align: right;height:30px;font-size:12px">Appointment Time :</td>
                            <td style="width:300px;color:red;font-size:12px">&nbsp;&nbsp;&nbsp;{{$info['app_time']}}</td>
                        </tr>
                        <tr>
                            <td style="font-weight:bold;text-align: right;height:30px;font-size:12px">Full Name :</td><td style="font-size:12px">&nbsp;&nbsp;&nbsp;{{$info['real_name']}}</td>
                        </tr>
                        <tr><td style="font-weight:bold;text-align: right;height:30px;font-size:12px">Mobile Phone Numbe :</td><td style="font-size:12px">&nbsp;&nbsp;&nbsp;{{$info['mobile']}}</td></tr>
                        <tr><td style="font-weight:bold;text-align: right;height:30px;font-size:12px">Email Address :</td><td style="font-size:12px">&nbsp;&nbsp;&nbsp;{{$info['email']}}</td></tr>
                        <!-- <tr><td style="font-weight:bold;text-align: right;height:30px;font-size:12px">Status:</td><td style="font-size:12px">&nbsp;&nbsp;&nbsp;{!! $info['qr_status'] !!}</td></tr> -->
                        <tr>
                            <td style="font-weight:bold;text-align: right;height:30px;font-size:12px">Remark :</td>
                            <td style="font-size:12px">&nbsp;&nbsp;&nbsp;{{$info['remark']}}</td>
                        </tr>
                    </table>


                    <div style="margin-top:45px;">



                        <p style="font-size:14px;font-weight:bold;margin-bottom:20px"> You have Selected:</p>
                        @foreach($services as $k=>$v)
                           *&nbsp;&nbsp;{{$v['item']}}<br>

                        @endforeach
                    </div>


                    <div style="margin-top:30px">
                        <span id="back"  style="cursor:pointer;background:black;padding:8px 38px;color:#fff;font-size:16px">Back</span>
                        &nbsp; &nbsp; &nbsp; &nbsp;
                    
                        <span id="edit"  style="cursor:pointer;background:blue;padding:8px 38px;color:#fff;font-size:16px">Edit</span>
                        &nbsp; &nbsp; &nbsp; &nbsp;
                        @if($info['qr_status'] != 5)
                        <span id="cancel"  style="cursor:pointer;background:red;padding:8px 38px;color:#fff;font-size:16px">Cancel</span>
                        @endif
                    </div>
                </form>
                <div style="height:20px"></div>
            <p>To cancel or reschedule this booking, please send a message to 0424 912 598.</p>
            <p style="font-size:12px">- No cancellation & reschedule fee if it is made12 hours before the appointment.</p>
            <p style="font-size:12px">- $50.00 cancellation & reschedule fee applies if it is made within 12 hours before the appointment.</p>
            </div>
           
        </div>


    </div>

    <script>
        layui.use(['layer'], function(){
            var layer = layui.layer;

            $("#sub").click(function(){
                if($("#email").val() == '') {
                    layer.alert('Oops, incomplete information.');
                    return false;
                }

                if($("#email").val()  != $("#rep_email").val() ) {
                    layer.alert('Oops, email addresses don\'t match');
                    return false;
                }
                if($("#real_name").val() == '') {
                    layer.alert('Oops, incomplete information.');
                    return false;
                }
                if($("#mobile").val() == '') {
                    layer.alert('Oops, incomplete information.');
                    return false;
                }
                var data = $("#frm").serialize();
                var loading = layer.load(); // Show loading layer
                $.ajax({
                    url : '/table/dosend',
                    type : 'post',
                    data : data,
                    dataType : "JSON",
                    success : function(data){
                        layer.close(loading); // Close loading layer
                        layer.alert("Your request has been sent successfully.")
                    },
                    error: function() {
                        layer.close(loading); // Close loading layer on error
                        layer.alert("An error occurred.");
                    }
                });
            });

            $("#back").click(function(){
                window.location.href="/users/calculator/all";
            });

            // Show edit confirmation using Layui
            $("#edit").click(function(){
            
                layer.confirm('Are you sure you want to edit this information?', {
                    btn: ['Confirm', 'Cancel'],
                    title: 'Edit Confirmation',
                    area: ['320px', '200px'], // Width and height of the modal
                    offset: 'auto', // Automatically center the modal
                }, function(){
                    var data = $("#frm").serialize();
                    var loading = layer.load(); // Show loading layer
                    $.ajax({
                        url : '/calculator/order/edit',
                        type : 'post',
                        data : data,
                        dataType : "JSON",
                        success : function(data){
                            layer.close(loading); // Close loading layer
                            if(data.code == 200){
                                 layer.msg("Edit action confirmed.", {
                                    time: 2000,
                                    end: function() {
                                        window.location.href = "/users/calculator/all";
                                    }
                                });
                            }else{
                                layer.alert("Edit action failed.");
                                //  window.location.href="/users/calculator/all";
                            }
                        },
                        error: function() {
                            layer.close(loading); // Close loading layer on error
                            layer.alert("An error occurred.");
                        }
                    });
                });
            });

            // Show cancel confirmation using Layui
            $("#cancel").click(function(){
                var data = $("#frm").serialize(); // Get the ID from the hidden input
                layer.confirm('Are you sure you want to cancel this action?', {
                    btn: ['Confirm', 'Cancel'],
                    title: 'Cancel Confirmation',
                    area: ['320px', '200px'], // Width and height of the modal
                    offset: 'auto', // Automatically center the modal
                }, function(){
                    var loading = layer.load(); // Show loading layer
                    $.ajax({
                        url : '/calculator/order/cancel',
                        type : 'post',
                        data : data,
                        dataType : "JSON",
                        success : function(data){
                            layer.close(loading); // Close loading layer
                            if(data.code == 200){
                                layer.msg("Cancel action confirmed.", {
                                    time: 2000,
                                    end: function() {
                                        window.location.href = "/users/calculator/all";
                                    }
                                });
                            }else{
                                layer.alert("Cancel action failed.");
                            }
                        },
                        error: function() {
                            layer.close(loading); // Close loading layer on error
                            layer.alert("An error occurred.");
                        }
                    });
                });
            });
        });
    </script>
@endsection