@extends('admin::layouts.master')
@section('pagetitle','Dashboard')
@section('content')

<style>


/* Label and input start */
.input-wrapper {
  position: relative;
}

.input_label {

  border-radius: 6px;
  position: relative;
  width: 100%;
  margin: 10px;
}

.input_date {

border-radius: 6px;
width: 100%;
margin: 10px;
}

select {

  border-radius: 6px;
  position: relative;
  width: 100%;
  
}

label {
  position: absolute;
  top: 0.2ex;
  z-index: 1;
  left: 1.9em;
  background-color: white;
  font-size: small !important;
  
}
.form-select {
    margin: 10px;
}

/* Label and input End */

/* Currency Start */
.currency-wrap{
		position:relative;
	}
	
	.currency-code{
		position:absolute;
		left:8px;
		top:10px;
	}
	
	.text-currency{
		padding:10px 20px;
		border:solid 1px #ccc;
		border-radius:5px;
	}
/* Currency Stop */

.timeline-label:before {
    left: 70px !important;
}

.timeline-label .timeline-label {
    width: 70px !important;
}
</style>



<div class="tab-pane fade active show  px-10" id="kt_ecommerce_settings_general" role="tabpanel">
    <div class="d-flex align-items-center justify-content-between flex-lg-grow-1">
        <!--begin::Header title-->
        <div class="d-flex align-items-center" id="kt_docs_header_title">
            <!--begin::Page title-->
            <div class="docs-page-title d-flex flex-column flex-lg-row align-items-lg-center py-5 mb-lg-0" data-kt-swapper="true" data-kt-swapper-mode="prepend" data-kt-swapper-parent="{default: '#kt_docs_content_container', 'lg': '#kt_docs_header_title'}">
                <!--begin::Title-->
                <h1 class="d-flex align-items-center text-dark my-1 fs-2x">Service Management</h1>
                <!--end::Title-->
                <!--begin::Separator-->
                <span class="text-muted fs-5 pt-2 px-2  fw-bolder ">
                    /Edit Service</span>
                    <!--end::Separator-->
            </div>
                <!--end::Page title-->
        </div>
        <!--end::Header title-->
        <!--begin::Toolbar-->
        
        <div class="d-flex align-items-center">
            <!--begin::Purchase link-->
            <button type="submit" class="btn btn-sm btn-primary outside-submit-button" >Save Changes</button>
            <div class="form-check form-check-custom form-check-solid mx-10">
            <input class="form-check-input" id="crm_update" type="checkbox"  @if($services->crm_update == 1) checked value="1" @else value="0" @endif name="crm_update">
                <span class="fw-bold fs-3 px-3 text-orange">Updated In CRM</span>
            </div>
            <a class="btn bdr-primary btn-light-primary btn-flex h-40px fw-bolder px-4 px-lg-6" href="/admin/services" ><span class="p-5">< Back</span></a>
            <!--end::Purchase link-->
        </div>
    </div>

    @if (session('success'))
<!--begin::Alert-->
<div class="alert alert-dismissible bg-success d-flex flex-column flex-sm-row px-3 py-1 mb-10">
<!--begin::Wrapper-->
<div class="d-flex flex-column text-light pe-0 pe-sm-10 py-4">

<!--begin::Content-->
<span>{{ session('success') }}</span>
<!--end::Content-->
</div>
<!--end::Wrapper-->

<!--begin::Close-->
<button type="button" class="position-absolute position-sm-relative m-2 m-sm-0 top-0 end-0 btn btn-icon ms-sm-auto" data-bs-dismiss="alert">
<span class="svg-icon svg-icon-2x svg-icon-light">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
</span>

</button>
<!--end::Close-->
</div>
<!--end::Alert-->
@endif

    
            <!--end::Toolbar-->
    <form id="kt_add_service_form" method="POST" class="form" enctype="multipart/form-data"  action="/admin/services/{{$encryptid}}">
        <input type="hidden" name="crm_hidden" @if($services->crm_update == 1) checked value="1" @else value="0" @endif>
        @csrf
        @method('PUT')
        <div class="card card-flush">
            <!--begin::Card body-->
            <div class="card-body  p-0">

                <div class="row">
                    <div class="pt-5 px-9 mb-2">
                        <span class="fs-5 fw-boldest">Product information</span>
                        <div class="d-flex flex-column flex-md-row gap-5 mt-7 ">
                            <div class="flex-row-fluid fixed-width">
                                <input type="hidden" name="master_id" id="master_id" value="">
                                <!--begin::Input-->
                                <select name="model_no" id="model_no"  data-placeholder="Model No" data-control="select2" class="form-select form-select-solid">
                                    <option value=""></option>
                                    @foreach ($model_master as $model_masters)
                                    <option value="{{ $model_masters->model_no }}"  @isset($services->model_no)  @if($services->model_no==$model_masters->model_no) selected @endif @endisset data-product_name="{{ $model_masters->product_name }}" data-id="{{ $model_masters->id }}" class="model_masters">{{ $model_masters->model_no }}</option>
                                    @endforeach
                                </select>
                                <!--end::Input-->
                            </div>
                            <div class="flex-row-fluid fixed-width input-wrapper">
                                <!-- Input-->
                                <label>Serial No</label>
                                <input class="form-control input_label" name="serial_no" placeholder="Serial No" value="{{$services->serial_no}}">
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                            <div class="flex-row-fluid fixed-width input-wrapper">
                                <!-- Input-->
                                <label>Product Name</label>
                                <input class="form-control input_label" id="product_name" name="product_name" value="{{$services->product_name}}">
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                            <div class="flex-row-fluid fixed-width input-wrapper">
                                <!-- Select-->
                                <label>Product Type</label>
                                <select name="product_type" id="product_type" data-control="select2" data-placeholder="Product Type" class="form-select form-select-solid valid">
                                    <option value=""></option>
                                    @foreach ($product_type as $type)
                                        <option value="{{ $type->value }}" @if($type->value == $services->product_type) selected @endif>{{ ucfirst($type->value) }}</option>
                                    @endforeach
                                </select>

                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                            <div class="flex-row-fluid fixed-width input-wrapper">
                                <label>Product Warranty</label>
                                <select name="product_warranty" id="product_warranty" data-control="select2" data-placeholder="Warranty Type" class="form-select form-select-solid valid" >
                                    <option value=""></option>
                                    @foreach ($product_warranty as $type)
                                    <option value="{{ $type->value }}" @if($type->value == $services->product_warranty) selected @endif>{{ ucfirst($type->value) }}</option>
                                    @endforeach
                                </select>
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                        </div>
                        <hr>
                    </div>
                    

                    <div class="pt-5 px-9 mb-2">
                        <span class="fs-5 fw-boldest">Service information</span>
                        <div class="d-flex flex-column flex-md-row gap-5 mt-7">
                            <div class="flex-row-fluid fixed-width input-wrapper">
                                <!-- Input for service number -->
                                <label>Service Id</label>
                                <input class="form-control input_label" name="service_no" placeholder="#123456" value="{{$services->service_id}}">
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                            <div class="flex-row-fluid fixed-width input-wrapper">
                                <!-- Select dropdown for service type -->
                                <label> Service Type</label>
                                <select name="service_type" id="service_type" data-control="select2" data-placeholder="Service Type" class="form-select form-select-solid valid">
                                    <option value=""></option>
                                    @foreach ($service_type as $service)
                                        <option value="{{ $service->value }}" @if($service->value == $services->service_type) selected @endif>{{ ucfirst($service->value) }}</option>
                                    @endforeach
                                </select>


                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>

                            <div class="flex-row-fluid fixed-width input-wrapper">
                                <!-- Select dropdown for actual symptom -->
                                <label>Actual Symptom</label>
                                <select name="actual_sympt" id="actual_sympt" data-control="select2" data-placeholder="Actual Symptom" class="form-select form-select-solid valid">
                                    <option value=""></option>
                                    @foreach ($actual_symp as $symp)
                                        <option value="{{ $symp->value }}" @if($symp->value == $services->actual_sympt) selected @endif>{{ ucfirst($symp->value) }}</option>
                                    @endforeach
                                </select>
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                            <div class="flex-row-fluid fixed-width input-wrapper">
                                <!-- Select dropdown for position -->
                                <label>Service Status</label>
                                <select name="service_status" id="service_status" data-control="select2" data-placeholder="Service Status" class="form-select form-select-solid valid">
                                    @foreach ($service_status as $status)
                                        <option value="{{ $status->value }}" @if($status->value == $services->service_status) selected @endif>{{ ucfirst($status->value) }}</option>
                                    @endforeach
                                </select>

                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                        </div>
                        <div class="d-flex flex-column flex-md-row gap-5 ">
                            <div class="flex-row-fluid fixed-width input-wrapper">
                                <!-- Input for service number -->
                                <label>Report Symptom</label>
                                <input class="form-control input_label" name="report_sympt" placeholder="Report Symptom" value="{{$services->reported_symp}}">
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>

                            <div class="flex-row-fluid fixed-width input-wrapper">
                                <!-- Select dropdown for actual symptom -->
                                <label>Solution</label>
                                <select name="solution" id="solution" data-control="select2" data-placeholder="Solution" class="form-select form-select-solid valid">
                                    <option value=""></option>
                                    @foreach ($solution as $solutions)
                                        <option value="{{ $solutions->value }}" @if($solutions->value == $services->solutions) selected @endif>{{ ucfirst($solutions->value) }}</option>
                                    @endforeach
                                </select>
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                        </div>
                        <hr>
                    </div>
                    
                    
                    <div class="pt-5 px-9 mb-2">
                        <span class="fs-5 fw-boldest">Customer information</span>
                        <div class="d-flex flex-column flex-md-row gap-5 mt-7">
                            <div class="flex-row-fluid fixed-width input-wrapper">
                                <!--begin::Input-->
                                <label>Customer Name</label>
                                <input class="form-control input_label" name="customer_name" placeholder="Customer Name" value="{{$services->customer_name}}">
                                <!--end::Input-->
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                            <div class="flex-row-fluid fixed-width input-wrapper">
                                <!--begin::Input-->
                                <label>Contact NO</label>
                                <input class="form-control input_label" name="cus_contact_no" placeholder="Contact No." value="{{$services->customer_no}}">
                                <!--end::Input-->
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                            <div class="flex-row-fluid fixed-width input-wrapper">
                                <!--begin::Input-->
                                <label>Location</label>
                                <input class="form-control input_label" name="cus_location" placeholder="Location" value="{{$services->customer_location}}">
                                <!--end::Input-->
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                        </div>
                        <hr>
                    </div>

                    
                    <div class="pt-5 px-9 mb-2">
                        <div class="d-flex align-items-center justify-content-between flex-lg-grow-1 ">
                            <span class="fs-5 fw-boldest">Appointment Date & Time</span>
                            <!-- <div class="d-flex align-items-center">
                                <div class="form-check form-check-custom form-check-solid mx-10">
                                    
                                    <span class="fw-bold fs-3 px-3 text-orange">Download All</span>
                                </div>
                            </div> -->
                        </div>
                        <div class="d-flex flex-column flex-md-row gap-5 mt-7 mb-10 w-350px">
                        <div class="flex-row-fluid fixed-width input-wrapper">
                                <!--begin::Input-->
                                <label>Appointment Date </label>
                                <div class="position-relative d-flex align-items-center">
                                    <!--begin::Icon-->
                                    <!--begin::Svg Icon | path: icons/duotune/general/gen014.svg-->
                                    <span class="svg-icon svg-icon-2 position-absolute mx-7">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                <path opacity="0.3" d="M21 22H3C2.4 22 2 21.6 2 21V5C2 4.4 2.4 4 3 4H21C21.6 4 22 4.4 22 5V21C22 21.6 21.6 22 21 22Z" fill="currentColor"></path>
                                                <path d="M6 6C5.4 6 5 5.6 5 5V3C5 2.4 5.4 2 6 2C6.6 2 7 2.4 7 3V5C7 5.6 6.6 6 6 6ZM11 5V3C11 2.4 10.6 2 10 2C9.4 2 9 2.4 9 3V5C9 5.6 9.4 6 10 6C10.6 6 11 5.6 11 5ZM15 5V3C15 2.4 14.6 2 14 2C13.4 2 13 2.4 13 3V5C13 5.6 13.4 6 14 6C14.6 6 15 5.6 15 5ZM19 5V3C19 2.4 18.6 2 18 2C17.4 2 17 2.4 17 3V5C17 5.6 17.4 6 18 6C18.6 6 19 5.6 19 5Z" fill="currentColor"></path>
                                                <path d="M8.8 13.1C9.2 13.1 9.5 13 9.7 12.8C9.9 12.6 10.1 12.3 10.1 11.9C10.1 11.6 10 11.3 9.8 11.1C9.6 10.9 9.3 10.8 9 10.8C8.8 10.8 8.59999 10.8 8.39999 10.9C8.19999 11 8.1 11.1 8 11.2C7.9 11.3 7.8 11.4 7.7 11.6C7.6 11.8 7.5 11.9 7.5 12.1C7.5 12.2 7.4 12.2 7.3 12.3C7.2 12.4 7.09999 12.4 6.89999 12.4C6.69999 12.4 6.6 12.3 6.5 12.2C6.4 12.1 6.3 11.9 6.3 11.7C6.3 11.5 6.4 11.3 6.5 11.1C6.6 10.9 6.8 10.7 7 10.5C7.2 10.3 7.49999 10.1 7.89999 10C8.29999 9.90003 8.60001 9.80003 9.10001 9.80003C9.50001 9.80003 9.80001 9.90003 10.1 10C10.4 10.1 10.7 10.3 10.9 10.4C11.1 10.5 11.3 10.8 11.4 11.1C11.5 11.4 11.6 11.6 11.6 11.9C11.6 12.3 11.5 12.6 11.3 12.9C11.1 13.2 10.9 13.5 10.6 13.7C10.9 13.9 11.2 14.1 11.4 14.3C11.6 14.5 11.8 14.7 11.9 15C12 15.3 12.1 15.5 12.1 15.8C12.1 16.2 12 16.5 11.9 16.8C11.8 17.1 11.5 17.4 11.3 17.7C11.1 18 10.7 18.2 10.3 18.3C9.9 18.4 9.5 18.5 9 18.5C8.5 18.5 8.1 18.4 7.7 18.2C7.3 18 7 17.8 6.8 17.6C6.6 17.4 6.4 17.1 6.3 16.8C6.2 16.5 6.10001 16.3 6.10001 16.1C6.10001 15.9 6.2 15.7 6.3 15.6C6.4 15.5 6.6 15.4 6.8 15.4C6.9 15.4 7.00001 15.4 7.10001 15.5C7.20001 15.6 7.3 15.6 7.3 15.7C7.5 16.2 7.7 16.6 8 16.9C8.3 17.2 8.6 17.3 9 17.3C9.2 17.3 9.5 17.2 9.7 17.1C9.9 17 10.1 16.8 10.3 16.6C10.5 16.4 10.5 16.1 10.5 15.8C10.5 15.3 10.4 15 10.1 14.7C9.80001 14.4 9.50001 14.3 9.10001 14.3C9.00001 14.3 8.9 14.3 8.7 14.3C8.5 14.3 8.39999 14.3 8.39999 14.3C8.19999 14.3 7.99999 14.2 7.89999 14.1C7.79999 14 7.7 13.8 7.7 13.7C7.7 13.5 7.79999 13.4 7.89999 13.2C7.99999 13 8.2 13 8.5 13H8.8V13.1ZM15.3 17.5V12.2C14.3 13 13.6 13.3 13.3 13.3C13.1 13.3 13 13.2 12.9 13.1C12.8 13 12.7 12.8 12.7 12.6C12.7 12.4 12.8 12.3 12.9 12.2C13 12.1 13.2 12 13.6 11.8C14.1 11.6 14.5 11.3 14.7 11.1C14.9 10.9 15.2 10.6 15.5 10.3C15.8 10 15.9 9.80003 15.9 9.70003C15.9 9.60003 16.1 9.60004 16.3 9.60004C16.5 9.60004 16.7 9.70003 16.8 9.80003C16.9 9.90003 17 10.2 17 10.5V17.2C17 18 16.7 18.4 16.2 18.4C16 18.4 15.8 18.3 15.6 18.2C15.4 18.1 15.3 17.8 15.3 17.5Z" fill="currentColor"></path>
                                            </svg>
                                        </span>
                                    <!--end::Svg Icon-->
                                    <!--end::Icon-->
                                    <!--begin::Datepicker-->
                                    <input class="form-control ps-12 input_date" @if($services->appoint_datetime!= "") value="{{ \DateTime::createFromFormat('Y-m-d H:i:s', $services->appoint_datetime)->format('d, M Y H:i') }}" placeholder="{{ date('d, M Y H:i', strtotime($services->appoint_datetime)) }}" @else value=""  placeholder="01, Jan 2024" @endif  name="appointment" id="appointment" />


                                    <!--end::Datepicker-->
                                </div>
                                

                                <!--end::Input-->
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                        </div>
                        <hr>
                    </div>
                    

                    <div class="pt-5 px-9 mb-2">
                        <span class="fs-5 fw-boldest">Dealer information</span>
                        <div class="d-flex flex-column flex-md-row gap-5 mt-7">
                            <div class="flex-row-fluid fixed-width input-wrapper">
                            <input type="hidden" name="dealer_id" id="dealer_id" value="{{ $dealerdata->id ?? '' }}">
                                <!--begin::Input-->
                                <label>Dealer Name</label>
                                <select name="dealer" id="servicedealer" data-placeholder="Dealer Name" data-control="select2" class="form-select form-select-solid valid">
                                    <option value=""></option>
                                    @foreach ($dealers as $dealer)
                                    <option value="{{ $dealer->id }}" data-contact="{{ $dealer->contact_no }}" data-location="{{ $dealer->location }}" data-id="{{ $dealer->id }}" @isset($dealerdata->id) @if($dealer->id==$dealerdata->id) selected @endif @endisset>{{ $dealer->dealer_name }}</option>
                                    @endforeach
                                </select>
                                <!--end::Input-->
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                            <div class="flex-row-fluid fixed-width input-wrapper">
                                <!--begin::Input-->
                                <label>Contact No</label>
                                <input class="form-control input_label" name="dealer_contact_no" readonly id="dealer_contact_no" placeholder="Contact No" value="@isset($dealerdata->id) {{$dealerdata->contact_no}} @endisset">
                                <!--end::Input-->
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                            <div class="flex-row-fluid fixed-width input-wrapper">
                                <!--begin::Input-->
                                <label>Location</label>
                                <input class="form-control input_label" name="dealer_location" readonly id="dealer_location" placeholder="Location" value="@isset($dealerdata->id) {{$dealerdata->location}} @endisset">
                                <!--end::Input-->
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                        </div>
                        <hr>
                    </div>
                    
                    <!-- <div class="pt-5 px-9 mb-2">
                        <span class="fs-5 fw-boldest">Dealer information</span>
                        <div class="d-flex flex-column flex-md-row gap-5 mt-7 card p-5">
                        <div class="d-flex justify-content-end align-items-start">
                            <div class="p-5 rounded bg-secondary text-dark fw-bold text-start" data-kt-element="message-text">
                                Customer Need The Installation Process Very Urgent
                            
                            <div class="ms-2 mt-1 text-end">
                                <span class="text-muted">{{ date('h:i A') }}</span>
                            </div>
                            </div>
                        </div>
                        </div>
                        <hr>
                    </div> -->
                    

                    <div class="pt-5 px-9 mb-2">
                        <span class="fs-5 fw-boldest">Engineer information</span>
                        <div class="d-flex flex-column flex-md-row gap-5 mt-7">
                            <div class="flex-row-fluid fixed-width input-wrapper">
                                <input type="hidden" name="engineer_id" id="engineer_id" value="{{ $engineerdata->id ?? '' }}">
                                <!--begin::Input-->
                                <label>Engineer Name</label>
                                <select name="engineer_name" id="serviceengineer" data-control="select2" data-placeholder="Engineer Name" class="form-select form-select-solid valid">
                                    <option value=""></option>
                                    @foreach ($engineers as $engineer)
                                        <option value="{{ $engineer->engineer_name }}" data-contact="{{ $engineer->contact_no }}" data-location="{{ $engineer->location }}" data-id="{{ $engineer->id }}" @isset($engineerdata->id) @if($engineer->id==$engineerdata->id) selected @endif @endisset>{{ $engineer->engineer_name }}</option>
                                    @endforeach
                                </select>
                                <!--end::Input-->
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                            <div class="flex-row-fluid fixed-width input-wrapper">
                                <!--begin::Input-->
                                <label>Contact No</label>
                                <input class="form-control input_label" name="engineer_contact_no" id="engineer_contact_no" readonly placeholder="Contact No" value="@isset($engineerdata->id) {{$engineerdata->contact_no}} @endisset">
                                <!--end::Input-->
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                            <div class="flex-row-fluid fixed-width input-wrapper">
                                <!--begin::Input-->
                                <label>Location</label>
                                <input class="form-control input_label" name="engineer_location" id="engineer_location" readonly placeholder="Location" value="@isset($engineerdata->id) {{$engineerdata->location}} @endisset">
                                <!--end::Input-->
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                        </div>
                        <hr>
                    </div>

                    <div class="pt-5 px-9 mb-2">
                        <span class="fs-5 fw-boldest">Cost information</span>
                        <div class="d-flex flex-column flex-md-row gap-5 mt-7">
                            <div class="flex-row-fluid fixed-width input-wrapper">
                                <!-- Input for service number -->
                                <label>Extended Warranty cost</label>
                                <input class="form-control input_label" name="ext_warranty_cost" placeholder="Extended Warranty cost" value="100">
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                            <div class="flex-row-fluid fixed-width input-wrapper">
                                <!-- Input for service number -->
                                <label>Labour Charges</label>
                                <input class="form-control input_label" name="labour_charges" placeholder="Labour Charges" value="100">
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                            <div class="flex-row-fluid fixed-width input-wrapper">
                                <!-- Input for service number -->
                                <label>Visit Charges</label>
                                <input class="form-control input_label" name="visit_charges" placeholder="Visit Charges" value="100">
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                            <div class="flex-row-fluid fixed-width input-wrapper">
                                <!-- Input for service number -->
                                <label>Home Service Charges</label>
                                <input class="form-control input_label" name="home_charges" placeholder="Home Service Charges" value="100">
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                        </div>
                        <hr>
                    </div>
                    
                    <div class="pt-5 px-9 mb-2">
                        <div class="d-flex align-items-center justify-content-between flex-lg-grow-1">
                        <span class="fs-5 fw-boldest">Advance information</span>
                        <div class="d-flex align-items-center">
                            <div class="form-check form-check-custom form-check-solid mx-10">
                                <input class="form-check-input" type="checkbox" value="">
                                <span class="fw-bold fs-3 px-3 text-orange">Received</span>
                            </div>
                        </div>
                        </div>
                        <div class="d-flex flex-column flex-md-row gap-5 mt-7">
                            <div class="flex-row-fluid fixed-width input-wrapper">
                            <!-- <input type="hidden" name="engineer_id" id="engineer_id" value="{{ $engineerdata->id ?? '' }}"> -->
                                <!--begin::Input-->
                                <label>Amount Recieved</label>
                                <input class="form-control input_label" name="" id="" placeholder="1000" value="{{$services->rem_amt}}">
                                <!--end::Input-->
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                            <div class="flex-row-fluid fixed-width input-wrapper">
                                <!--begin::Input-->
                                <label>Received On</label>
                                <div class="position-relative d-flex align-items-center">
                                    <!--begin::Icon-->
                                    <!--begin::Svg Icon | path: icons/duotune/general/gen014.svg-->
                                    <span class="svg-icon svg-icon-2 position-absolute mx-7">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                <path opacity="0.3" d="M21 22H3C2.4 22 2 21.6 2 21V5C2 4.4 2.4 4 3 4H21C21.6 4 22 4.4 22 5V21C22 21.6 21.6 22 21 22Z" fill="currentColor"></path>
                                                <path d="M6 6C5.4 6 5 5.6 5 5V3C5 2.4 5.4 2 6 2C6.6 2 7 2.4 7 3V5C7 5.6 6.6 6 6 6ZM11 5V3C11 2.4 10.6 2 10 2C9.4 2 9 2.4 9 3V5C9 5.6 9.4 6 10 6C10.6 6 11 5.6 11 5ZM15 5V3C15 2.4 14.6 2 14 2C13.4 2 13 2.4 13 3V5C13 5.6 13.4 6 14 6C14.6 6 15 5.6 15 5ZM19 5V3C19 2.4 18.6 2 18 2C17.4 2 17 2.4 17 3V5C17 5.6 17.4 6 18 6C18.6 6 19 5.6 19 5Z" fill="currentColor"></path>
                                                <path d="M8.8 13.1C9.2 13.1 9.5 13 9.7 12.8C9.9 12.6 10.1 12.3 10.1 11.9C10.1 11.6 10 11.3 9.8 11.1C9.6 10.9 9.3 10.8 9 10.8C8.8 10.8 8.59999 10.8 8.39999 10.9C8.19999 11 8.1 11.1 8 11.2C7.9 11.3 7.8 11.4 7.7 11.6C7.6 11.8 7.5 11.9 7.5 12.1C7.5 12.2 7.4 12.2 7.3 12.3C7.2 12.4 7.09999 12.4 6.89999 12.4C6.69999 12.4 6.6 12.3 6.5 12.2C6.4 12.1 6.3 11.9 6.3 11.7C6.3 11.5 6.4 11.3 6.5 11.1C6.6 10.9 6.8 10.7 7 10.5C7.2 10.3 7.49999 10.1 7.89999 10C8.29999 9.90003 8.60001 9.80003 9.10001 9.80003C9.50001 9.80003 9.80001 9.90003 10.1 10C10.4 10.1 10.7 10.3 10.9 10.4C11.1 10.5 11.3 10.8 11.4 11.1C11.5 11.4 11.6 11.6 11.6 11.9C11.6 12.3 11.5 12.6 11.3 12.9C11.1 13.2 10.9 13.5 10.6 13.7C10.9 13.9 11.2 14.1 11.4 14.3C11.6 14.5 11.8 14.7 11.9 15C12 15.3 12.1 15.5 12.1 15.8C12.1 16.2 12 16.5 11.9 16.8C11.8 17.1 11.5 17.4 11.3 17.7C11.1 18 10.7 18.2 10.3 18.3C9.9 18.4 9.5 18.5 9 18.5C8.5 18.5 8.1 18.4 7.7 18.2C7.3 18 7 17.8 6.8 17.6C6.6 17.4 6.4 17.1 6.3 16.8C6.2 16.5 6.10001 16.3 6.10001 16.1C6.10001 15.9 6.2 15.7 6.3 15.6C6.4 15.5 6.6 15.4 6.8 15.4C6.9 15.4 7.00001 15.4 7.10001 15.5C7.20001 15.6 7.3 15.6 7.3 15.7C7.5 16.2 7.7 16.6 8 16.9C8.3 17.2 8.6 17.3 9 17.3C9.2 17.3 9.5 17.2 9.7 17.1C9.9 17 10.1 16.8 10.3 16.6C10.5 16.4 10.5 16.1 10.5 15.8C10.5 15.3 10.4 15 10.1 14.7C9.80001 14.4 9.50001 14.3 9.10001 14.3C9.00001 14.3 8.9 14.3 8.7 14.3C8.5 14.3 8.39999 14.3 8.39999 14.3C8.19999 14.3 7.99999 14.2 7.89999 14.1C7.79999 14 7.7 13.8 7.7 13.7C7.7 13.5 7.79999 13.4 7.89999 13.2C7.99999 13 8.2 13 8.5 13H8.8V13.1ZM15.3 17.5V12.2C14.3 13 13.6 13.3 13.3 13.3C13.1 13.3 13 13.2 12.9 13.1C12.8 13 12.7 12.8 12.7 12.6C12.7 12.4 12.8 12.3 12.9 12.2C13 12.1 13.2 12 13.6 11.8C14.1 11.6 14.5 11.3 14.7 11.1C14.9 10.9 15.2 10.6 15.5 10.3C15.8 10 15.9 9.80003 15.9 9.70003C15.9 9.60003 16.1 9.60004 16.3 9.60004C16.5 9.60004 16.7 9.70003 16.8 9.80003C16.9 9.90003 17 10.2 17 10.5V17.2C17 18 16.7 18.4 16.2 18.4C16 18.4 15.8 18.3 15.6 18.2C15.4 18.1 15.3 17.8 15.3 17.5Z" fill="currentColor"></path>
                                            </svg>
                                        </span>
                                    <!--end::Svg Icon-->
                                    <!--end::Icon-->
                                    <!--begin::Datepicker-->
                                    <input class="form-control ps-12 input_date" placeholder="01, Jan 2024" name="adv_received_on" id="adv_received_on" />
                                    <!--end::Datepicker-->
                                </div>
                                

                                <!--end::Input-->
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>

                            <div class="flex-row-fluid fixed-width input-wrapper">
                                <!-- Select dropdown for position -->
                                <label>payment Mode</label>
                                <select name="advance_payment" id="advance_payment" data-control="select2" data-placeholder="Bank Transfer" class="form-select form-select-solid valid" >
                                    <option value=""></option>
                                    <!-- <option value="Open">Open</option> -->

                                </select>
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                            <div class="flex-row-fluid fixed-width input-wrapper">
                                <!--begin::Input-->
                                <label>Reference Id</label>
                                <input class="form-control input_label" name="" id="" placeholder="ACRAF23DB3C4" value="">
                                <!--end::Input-->
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                        </div>
                        <div class="pt-5  mb-2">
                            <div class="d-flex flex-column flex-md-row gap-5 mt-7" style="width: 30%;">
                                <div class="flex-row-fluid fixed-width input-wrapper" >
                                    <!--begin::Input-->
                                    <label>Remaining Balance</label>
                                    <input class="form-control input_label" name="rem_balance_amount" placeholder="3500" value="">
                                    <!--end::Input-->
                                    <div class="fv-plugins-message-container invalid-feedback"></div>
                                </div>
                            </div>
                        </div>
                        <hr>
                    </div>

                    <div class="pt-5 px-9 mb-2">
                        <div class="d-flex align-items-center justify-content-between flex-lg-grow-1">
                            <span class="fs-5 fw-boldest">Balance information</span>
                            <div class="d-flex align-items-center">
                                <div class="form-check form-check-custom form-check-solid mx-10">
                                    <input class="form-check-input" type="checkbox" value="">
                                    <span class="fw-bold fs-3 px-3 text-orange">Received</span>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex flex-column flex-md-row gap-5 mt-7">
                            <div class="flex-row-fluid fixed-width currency-wrap m-3">
                            <!-- <input type="hidden" name="engineer_id" id="engineer_id" value="{{ $engineerdata->id ?? '' }}"> -->
                                <!--begin::Input-->
                                <span class="currency-code">₹</span>
                                <input class="form-control text-currency" name="amt_received" id="amt_received" placeholder="Amount Recieved" value="{{$services->rem_amt}}">
                                <!--end::Input-->
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                            <div class="flex-row-fluid fixed-width input-wrapper ">
                                <!--begin::Input-->
                                <label>Received On</label>
                                <div class="position-relative d-flex align-items-center ">
                                    <!--begin::Icon-->
                                    <!--begin::Svg Icon | path: icons/duotune/general/gen014.svg-->
                                    <span class="svg-icon svg-icon-2 position-absolute mx-7">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                <path opacity="0.3" d="M21 22H3C2.4 22 2 21.6 2 21V5C2 4.4 2.4 4 3 4H21C21.6 4 22 4.4 22 5V21C22 21.6 21.6 22 21 22Z" fill="currentColor"></path>
                                                <path d="M6 6C5.4 6 5 5.6 5 5V3C5 2.4 5.4 2 6 2C6.6 2 7 2.4 7 3V5C7 5.6 6.6 6 6 6ZM11 5V3C11 2.4 10.6 2 10 2C9.4 2 9 2.4 9 3V5C9 5.6 9.4 6 10 6C10.6 6 11 5.6 11 5ZM15 5V3C15 2.4 14.6 2 14 2C13.4 2 13 2.4 13 3V5C13 5.6 13.4 6 14 6C14.6 6 15 5.6 15 5ZM19 5V3C19 2.4 18.6 2 18 2C17.4 2 17 2.4 17 3V5C17 5.6 17.4 6 18 6C18.6 6 19 5.6 19 5Z" fill="currentColor"></path>
                                                <path d="M8.8 13.1C9.2 13.1 9.5 13 9.7 12.8C9.9 12.6 10.1 12.3 10.1 11.9C10.1 11.6 10 11.3 9.8 11.1C9.6 10.9 9.3 10.8 9 10.8C8.8 10.8 8.59999 10.8 8.39999 10.9C8.19999 11 8.1 11.1 8 11.2C7.9 11.3 7.8 11.4 7.7 11.6C7.6 11.8 7.5 11.9 7.5 12.1C7.5 12.2 7.4 12.2 7.3 12.3C7.2 12.4 7.09999 12.4 6.89999 12.4C6.69999 12.4 6.6 12.3 6.5 12.2C6.4 12.1 6.3 11.9 6.3 11.7C6.3 11.5 6.4 11.3 6.5 11.1C6.6 10.9 6.8 10.7 7 10.5C7.2 10.3 7.49999 10.1 7.89999 10C8.29999 9.90003 8.60001 9.80003 9.10001 9.80003C9.50001 9.80003 9.80001 9.90003 10.1 10C10.4 10.1 10.7 10.3 10.9 10.4C11.1 10.5 11.3 10.8 11.4 11.1C11.5 11.4 11.6 11.6 11.6 11.9C11.6 12.3 11.5 12.6 11.3 12.9C11.1 13.2 10.9 13.5 10.6 13.7C10.9 13.9 11.2 14.1 11.4 14.3C11.6 14.5 11.8 14.7 11.9 15C12 15.3 12.1 15.5 12.1 15.8C12.1 16.2 12 16.5 11.9 16.8C11.8 17.1 11.5 17.4 11.3 17.7C11.1 18 10.7 18.2 10.3 18.3C9.9 18.4 9.5 18.5 9 18.5C8.5 18.5 8.1 18.4 7.7 18.2C7.3 18 7 17.8 6.8 17.6C6.6 17.4 6.4 17.1 6.3 16.8C6.2 16.5 6.10001 16.3 6.10001 16.1C6.10001 15.9 6.2 15.7 6.3 15.6C6.4 15.5 6.6 15.4 6.8 15.4C6.9 15.4 7.00001 15.4 7.10001 15.5C7.20001 15.6 7.3 15.6 7.3 15.7C7.5 16.2 7.7 16.6 8 16.9C8.3 17.2 8.6 17.3 9 17.3C9.2 17.3 9.5 17.2 9.7 17.1C9.9 17 10.1 16.8 10.3 16.6C10.5 16.4 10.5 16.1 10.5 15.8C10.5 15.3 10.4 15 10.1 14.7C9.80001 14.4 9.50001 14.3 9.10001 14.3C9.00001 14.3 8.9 14.3 8.7 14.3C8.5 14.3 8.39999 14.3 8.39999 14.3C8.19999 14.3 7.99999 14.2 7.89999 14.1C7.79999 14 7.7 13.8 7.7 13.7C7.7 13.5 7.79999 13.4 7.89999 13.2C7.99999 13 8.2 13 8.5 13H8.8V13.1ZM15.3 17.5V12.2C14.3 13 13.6 13.3 13.3 13.3C13.1 13.3 13 13.2 12.9 13.1C12.8 13 12.7 12.8 12.7 12.6C12.7 12.4 12.8 12.3 12.9 12.2C13 12.1 13.2 12 13.6 11.8C14.1 11.6 14.5 11.3 14.7 11.1C14.9 10.9 15.2 10.6 15.5 10.3C15.8 10 15.9 9.80003 15.9 9.70003C15.9 9.60003 16.1 9.60004 16.3 9.60004C16.5 9.60004 16.7 9.70003 16.8 9.80003C16.9 9.90003 17 10.2 17 10.5V17.2C17 18 16.7 18.4 16.2 18.4C16 18.4 15.8 18.3 15.6 18.2C15.4 18.1 15.3 17.8 15.3 17.5Z" fill="currentColor"></path>
                                            </svg>
                                        </span>
                                    <!--end::Svg Icon-->
                                    <!--end::Icon-->
                                    <!--begin::Datepicker-->
                                    <input class="form-control ps-12 input_date" placeholder="Recieved on" name="bal_received_on" id="bal_received_on" />
                                    <!--end::Datepicker-->
                                </div>
                                

                                <!--end::Input-->
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                            <div class="flex-row-fluid fixed-width m-3">
                                <!--begin::Input-->
                                <select name="balance_payment" id="balance_payment" data-control="select2" data-placeholder="Payment Mode" class="form-select form-select-solid valid m-0">
                                    <option value=""></option>
                                    <!-- <option value="installation" @if($services->payment_mode == "installation") selected @endif>Installation</option>
                                    <option value="other" @if($services->payment_mode == "other") selected @endif>Other</option> -->
                                </select>
                                
                                <!--end::Input-->
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                            <div class="flex-row-fluid fixed-width m-3">
                                <!--begin::Input-->
                                <input class="form-control" name="reference_id" id="reference_id" placeholder="Reference Id" value="">
                                <!--end::Input-->
                                <div class="fv-plugins-message-container invalid-feedback"></div>
                            </div>
                        </div>
                        <hr>
                    </div>
                    @if(count($services->docs) > 0)
                     <div class="pt-5 px-9 mb-2">
                        <div class="d-flex align-items-center justify-content-between flex-lg-grow-1 ">
                            <span class="fs-5 fw-boldest">Images</span>
                            <div class="d-flex align-items-center">
                                <div class="form-check form-check-custom form-check-solid mx-10">
                                    
                                    <span class="fw-bold fs-3 px-3 text-orange">Download All</span>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex flex-column flex-md-row gap-5 mt-7 mb-10 "> 
                            
                         @foreach($services->docs as $docs)   
                         <div class="image-input image-input-outline" data-kt-image-input="true">
                                
                                <div class="image-input-wrapper w-250px h-250px bgi-position-center img-bg-solid" style="background-size: 75%; "><img src='/uploads/services_docs/{{ $docs->docs_url  }}' width='250px' height='250px' /></div>
                        </div> 
                        @endforeach

                           
                         </div>
                        <hr>
                    </div> 
                    @endif


                    <div class="pt-5 px-9 mb-2 " >
                        <div class="d-flex align-items-center justify-content-between flex-lg-grow-1">
                            <span class="fs-5 fw-boldest">Notes</span>
                            <div class="d-flex align-items-center">
                                <div class="form-check form-check-custom form-check-solid mx-10">
                                    <a class="fw-bold fs-3 px-3 text-orange cursor-pointer" data-bs-toggle="modal" data-bs-target="#kt_addnotes"><svg fill="currentcolor" width="28px" height="28px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M13.5,20 C14.3284271,20 15,19.3284271 15,18.5 C15,17.1192881 16.1192881,16 17.5,16 C18.3284271,16 19,15.3284271 19,14.5 L19,11.5 C19,11.2238576 19.2238576,11 19.5,11 C19.7761424,11 20,11.2238576 20,11.5 L20,14.5 C20,18.0898509 17.0898509,21 13.5,21 L6.5,21 C5.11928813,21 4,19.8807119 4,18.5 L4,5.5 C4,4.11928813 5.11928813,3 6.5,3 L12.5,3 C12.7761424,3 13,3.22385763 13,3.5 C13,3.77614237 12.7761424,4 12.5,4 L6.5,4 C5.67157288,4 5,4.67157288 5,5.5 L5,18.5 C5,19.3284271 5.67157288,20 6.5,20 L13.5,20 L13.5,20 Z M15.7913481,19.5014408 C16.9873685,18.9526013 17.9526013,17.9873685 18.5014408,16.7913481 C18.1948298,16.9255432 17.8561101,17 17.5,17 C16.6715729,17 16,17.6715729 16,18.5 C16,18.8561101 15.9255432,19.1948298 15.7913481,19.5014408 L15.7913481,19.5014408 Z M18,6 L20.5,6 C20.7761424,6 21,6.22385763 21,6.5 C21,6.77614237 20.7761424,7 20.5,7 L18,7 L18,9.5 C18,9.77614237 17.7761424,10 17.5,10 C17.2238576,10 17,9.77614237 17,9.5 L17,7 L14.5,7 C14.2238576,7 14,6.77614237 14,6.5 C14,6.22385763 14.2238576,6 14.5,6 L17,6 L17,3.5 C17,3.22385763 17.2238576,3 17.5,3 C17.7761424,3 18,3.22385763 18,3.5 L18,6 Z M8.5,9 C8.22385763,9 8,8.77614237 8,8.5 C8,8.22385763 8.22385763,8 8.5,8 L12.5,8 C12.7761424,8 13,8.22385763 13,8.5 C13,8.77614237 12.7761424,9 12.5,9 L8.5,9 Z M8.5,12 C8.22385763,12 8,11.7761424 8,11.5 C8,11.2238576 8.22385763,11 8.5,11 L15.5,11 C15.7761424,11 16,11.2238576 16,11.5 C16,11.7761424 15.7761424,12 15.5,12 L8.5,12 Z M8.5,15 C8.22385763,15 8,14.7761424 8,14.5 C8,14.2238576 8.22385763,14 8.5,14 L13.5,14 C13.7761424,14 14,14.2238576 14,14.5 C14,14.7761424 13.7761424,15 13.5,15 L8.5,15 Z"/>
                                        </svg>Add Notes
                                    </a>
                                </div>
                            </div>
                        </div>
                        <!-- Modal -->

                        <!--begin::Tab Content-->
                        <div class="tab-content px-9 hover-scroll-overlay-y pe-7 me-3 mb-2 min-h-250px">
                            <!--begin::Tap pane-->
                            <div class="tab-pane fade show active" id="kt_list_widget_16_tab_1">
                                <!--begin::Item-->
                                <!--begin::Body-->
                                <div class="card-body pt-5">
                                    <!--begin::Timeline-->
                                    <div class="timeline-label">
                                        @if($addnotes->count() > 0) 
                                            @foreach ($addnotes as $note)
                                                <!--begin::Item-->
                                                <div class="timeline-item">
                                                    <!--begin::Label-->
                                                    <div class="timeline-label fw-bolder text-gray-800 fs-6">{{ \Carbon\Carbon::parse($note->created_at)->format('M d, Y h:i A') }}</div>

                                                    <!--end::Label-->
                                                    <!--begin::Badge-->
                                                    <div class="timeline-badge">
                                                        <i class="fa fa-genderless text-warning fs-1"></i>
                                                    </div>
                                                    <!--end::Badge-->
                                                    <!--begin::Text-->
                                                    <div class="timeline-content m-0">
                                                        <!--begin::Label-->
                                                        <span class="fs-8 fw-boldest text-success text-uppercase">Admin</span>
                                                        <!--begin::Label-->
                                                        <!--begin::Title-->
                                                        <span href="#" class="fs-6 text-gray-800 fw-bolder d-block ">{{$note->notes}}</span>
                                                        <!--end::Title-->
                                                        <!--begin::Title-->
                                                        <span class="fw-bold text-gray-400">{{ \Carbon\Carbon::parse($note->created_at)->diffForHumans() }}</span>

                                                        <!--end::Title-->
                                                    </div>
                                                    <!--end::Text-->
                                                </div>
                                                <!--end::Item-->
                                            @endforeach
                                        @endif
                                    </div>
                                    <!--end::Timeline-->
                                </div>
                                <!--end: Card Body-->
                                <!--end::Item-->
                            </div>
                            <!--end::Tap pane-->
                        </div><hr>
                        <!--end::Tab Content--> 
                    </div>
                </div>
            </div>
        </div><!--end::Card body-->
        <div class="text-center">
            <button id="second_button" type="submit" class="btn btn-sm btn-primary mt-7" >Save Changes</button>
        </div>
    </form>
</div>
@include('admin::services.addnotes')
@endsection


@section('scripts')
<script src="{{asset('js/admin/services/addservices.js')}}"></script>
@endsection