@extends('app')
@section('content')
<title>Create Service</title>

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <!-- <link rel="stylesheet" href="/resources/demos/style.css"> -->
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

{{--  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< / add for Expiray AMC CLIENT ACCOUNT \>>>>>>>>>>>>>>>>>>>>>>>>> --}}
@if (!empty($amc_expiry_messages))
<style>
    #amc-expiry-alert {
        position: relative; /* for positioning the close button */
        max-width: 600px;
        margin: 0.1px auto;
        padding: 15px 20px;
		margin-left: 200px;
        border: 1px solid #ffc107;
        border-radius: 8px;
        font-size: 16px;
        line-height: 1.5;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        background-color: #fff3cd;
        color: #856404;
    }

    #amc-expiry-alert ul {
        margin: 10px 0 0 20px;
        padding-left: 0;
    }

    #amc-expiry-alert li {
        list-style-type: disc;
    }

    /* Close button styles */
    #amc-expiry-alert .close-btn {
        position: absolute;
        top: 8px;
        right: 12px;
        color: red;
        font-weight: bold;
        font-size: 22px;
        cursor: pointer;
        user-select: none;
    }

    #amc-expiry-alert .close-btn:hover {
        color: darkred;
    }
    
</style>

<div class="alert alert-warning" id="amc-expiry-alert">
    <span class="close-btn" onclick="document.getElementById('amc-expiry-alert').style.display='none'">&times;</span>
    <strong>⚠️ Upcoming AMC Expiry:</strong>
    <ul>
        @foreach ($amc_expiry_messages as $msg)
            <li>{{ $msg }}</li>
        @endforeach
    </ul>
</div>
@endif
{{------------------------------------------------------------------------------------------------------}}
 
 
<style type="text/css">
.alert-danger {
	margin-top: 1%;
	padding: 0;
	margin-bottom: 0px !important;
	background-color: transparent !important;
	border: none !important;
	color:#f33a12;
}
#scrollbars {
	scrollbar-base-color: #9999cc;
	scrollbar-arrow-color: white;
	scrollbar-track-color: #ccccff;
	scrollbar-shadow-color: black;
	scrollbar-lightshadow-color: black;
	scrollbar-darkshadow-color: gray;
	scrollbar-highlight-color: white;
	scrollbar-3dlight-color: black;
}

/*added by brijesh on 13-12-2019*/
/**
 * Variables
 */
/**
 * Wrapper
 */
.combo-select {
	position: relative;
	border: 1px solid #ccc;
	border-radius: 2px;
	max-width: 500px;
	line-height: 1.42857143;
	font: 100% Helvetica, Arial, Sans-serif;
	font-size: 14px;
	color: #555;
	
}
.combo-select .combo-input {
	margin-bottom: 0;
}
/**
 * Input field
 */
.combo-input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin-left: 0px;
	text-overflow: ellipsis;
	white-space: nowrap;
	border: none;
	width: 100%;
	box-sizing: border-box;
	padding-left: 15px;
	height: 34px;
	line-height: 34px;
	padding-right: 34px;
	border-radius: 0px;
	font-size: 14px;
}
.combo-input:focus {
	outline: none;
}
/**
 * Arrow
 */
.combo-arrow {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	cursor: pointer;
	text-align: center;
	font-size: 22px;
	width: 40px;
	color: #999999;
}
.combo-arrow:before {
	content: "\f107";
	font-family: 'FontAwesome';
	font-size: 22px;
	top: -25px;
	display: block;
	width: 0;
	height: 0;
	right: 25px;
	bottom: 0;
	position: absolute;
	margin: auto 0;
}
/**
 * When opened
 */
.combo-open .combo-arrow {
	border-color: #51A7E8;
}
.combo-open .combo-arrow:before {
	content: "\f106";
}
/**
 * When focused
 */
.combo-focus {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-color: #51A7E8; 
  }
.combo-focus input {
	border-color: #51A7E8;
}
/**
 * Hide native select
 */
.combo-select select {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	-webkit-appearance: none;
	opacity: 0;
}

@media only screen and (min-width: 960px) {
.combo-select select {
	left: -1px;
	top: -1px;
	width: 0;
	height: 0;
	margin: 0;
}
}
/**
 * Selected option
 */
.option-selected {
	background-color: #eee;
}
/**
 * Hovered option
 */
.option-hover {
	background-color: #dfdfdf;
	color: #454545;
}
/**
 * Option item
 */
.option-item {
	cursor: pointer;
/*border-bottom: 1px #e3e3e3 solid;*/ }
.option-item:hover {
	background-color: #efefef;
	color: #454545;
}
.option-item:last-child {
	border-bottom: none;
}
.option-disabled {
	opacity: 0.5;
}
/**
 * Dropdown
 */
.combo-dropdown {
	position: absolute;
	z-index: 999;
	top: 100%;
	left: 0;
	min-width: 100%;
	max-width: 300px;
	max-height: 270px;
	margin: 0;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	/*display: none;*/
	overflow-y: auto;
	background: #fff;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
	-webkit-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	border-radius: 0;
	box-sizing: border-box;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	-webkit-transform-origin: top left;
	-ms-transform-origin: top left;
	transform-origin: top left;
}
.combo-dropdown li {
	list-style: none;
	padding: 10px 15px;
	margin: 0 !important;
}
/**
 * On Active
 */
.combo-open .combo-dropdown {
	/*display: block; */
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
	visibility: visible;
}
/**
 * Search marker
 */
.combo-marker {
	text-decoration: underline;
}

.form-control{
	padding: 4px;
}

/*end added by brijesh*/
</style>
<script type="text/javascript">
// Added by gaurav on 27-feb-20
function showamc(option)
{ 
	if(option=='AMC Service')
	{
		$("#Amcoptions").show(); return false;
	}
	else
	{ 
		var pm = document.getElementById("Amcpm");
		var cm = document.getElementById("Amccm");
		pm.checked = false;
		cm.checked = false;
		$("#Amcoptions").hide();
		return false;
	}
}// Ended here

  // added by brijesh on 25-07-2020

  function showhiderma(selval)
{ 
	if(selval=='1')
	{
		$("#ctktrmarefpnl").show(); return false;
	}
	else
	{
		$("#ctktrmarefpnl").hide();
		$("#rmarefticketno").val(""); return false;
	}
}
// end brijesh
</script>
<script type="text/javascript">
    var warrantyMessages = null;

    $(document).ready(function() {

        function setSubmitDisabled(state) {
            var $btn = $('#service_submit');
            if ($btn.length) {
                $btn.prop('disabled', state);
                if (state) { 
                    $btn.addClass('is-disabled'); 
                } else { 
                    $btn.removeClass('is-disabled'); 
                }
            }
        }

        function isExpired(yyyyMmDd) {
            var parts = String(yyyyMmDd).split('-');
            var end = new Date(parseInt(parts[0],10), parseInt(parts[1],10)-1, parseInt(parts[2],10));
            var today = new Date(); today.setHours(0,0,0,0);
            return end < today;
        }

        function checkWarranty(showPopup) {
            var selectedProductId = $('#product_id').val();

            var messageData = warrantyMessages.find(function(item) {
                return String(item.product_id) === String(selectedProductId);
            });

            if (messageData) {
                if (showPopup) { alert(messageData.message); }
                setSubmitDisabled(isExpired(messageData.warranty_end_date));
            } else {
                setSubmitDisabled(false);
            }
        }

        $('#amc_warranty').on('click', function() {
            checkWarranty(true);
        });

        $('#product_id').on('change', function() {
            if ($('#amc_warranty').is(':checked')) {
                checkWarranty(true);
            } else {
                setSubmitDisabled(false);
            }
        });

        $('input[name="service_type"]').on('click', function() {
            if (this.value !== 'warranty') {
                setSubmitDisabled(false);
            } else {
                checkWarranty(false);
            }
        });

        // Block clicks completely when disabled
        $(document).on('click', '#service_submit.is-disabled', function(e) {
            e.preventDefault();
            e.stopImmediatePropagation();
            return false;
        });
    });
</script>

<style>
#service_submit.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
</style>
<div class="content-wrapper">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="page-head-line">CREATE SERVICE</h1>
                </div>
           	</div>

           	<div class="row">
            	<div class="col-md-12">
            		<div class="panel panel-default">
                        <div class="panel-body">
							@if(Session::has('flash_message'))
					    		<div class="alert alert-success">
					        		{{ Session::get('flash_message') }}
					    		</div>
							@endif	
							<!-- if basic plan user used 50 services of limit error -->
							@if(Session::has('unable_create_serv_mesg'))
					    		<div class="alert alert-success" style="text-align: center;">
					        		{{ Session::get('unable_create_serv_mesg') }}
					    		</div>
							@endif


							<input type="hidden" name="activetab" id="activetab" value="tab1" />
                        	<div class="col-md-12" id="tabs" style="padding-right: 0px;padding-left: 0px;">
                            {{-- Tabs --}}
                            @if (!$isAdmin)
                            	<ul class="nav nav-tabs ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-corner-all">
                                {{-- Create Service Tab --}}
									<li id="tab_li1" class="ui-state-default ui-corner-top" role="tab"
										tabindex="-1" aria-selected="false" aria-expanded="false">
										<a data-toggle="tab" href="#createservice"
											onclick="changetabval('tab1','tab_li1');">
											Create Service
										</a>
									</li>

									{{-- Request Service Tab --}}
									@if (Session::get('custid') != '')
										<li id="tab_li2" class="ui-state-default ui-corner-top" role="tab"
											tabindex="-1" aria-selected="false" aria-expanded="false">
											<a data-toggle="tab" href="#requestservice"
												onclick="changetabval('tab2','tab_li2');">
												Request Service
											</a>
										</li>
									@endif
								</ul>
                            	<br>

								@if (session('error') && request()->old('form_id') == 'tab1')
								<script>
									alert("{{ session('error') }}");
								</script>
								@endif

								@if (session('error') && request()->old('form_id') == 'tab2')
								<script>
									alert("{{ session('error') }}");
								</script>
								@endif
								@if (session('success'))
								<div class="alert alert-success">
									{{ session('success') }}
								</div>
								@endif

								<div class="tab-content" style="margin-top: 15px;">
									{{-- Create Service Tab --}}
									<div id="createservice" class="tab-pane fade in active">
										<br>

										<form name="form1" class="form-horizontal" id="submit" role="form" method="POST" action="/service/store"  enctype="multipart/form-data" autocomplete="off" >
                                        <input type="hidden" name="form_id" value="tab1">
										<input type="hidden" name="_token" value="{{ csrf_token() }}" />
                                        <input type="hidden" name="service_requested_id" id="service_requested_id" value="">

										<div class="col-md-12">
											<div class="form-group">
												<div class="col-md-12">
													<div class="form-group">
														<label class="control-label1 col-md-2 col-sm-3 col-xs-12">Client Ticket No
														</label>
														<div class="col-md-5 col-sm-6 col-xs-12">
															<input type="text" name="clientticketno" id="clientticketno" class="form-control" maxlength="10" value="{{ old('clientticketno', $clientticketno) }}" readonly>
															@if($errors->first('clientticketno')) <div class="error alert alert-danger">{{ $errors->first('clientticketno') }}</div>	@endif
														</div>
													</div>
												</div>
												@if(Session::get('custid'))
													<div class="col-md-5 col-sm-6 col-xs-12">
														<input type="hidden" name="vendor_id" value="