@extends('admin.layouts.app')

@section('content')
@push('styles')
<style>
    div#myTable_filter {
    display: none;
}
</style>
@endpush
<div class="container-fluid py-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb bg-transparent mb-0 pb-0 px-0 me-sm-6 me-5">
            <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="{{ route('admin.dashboard') }}">Dashboard</a>
            </li>
            <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="{{ route('admin.on-demand-services.index') }}">ODS</a>
            </li>
            <li class="breadcrumb-item text-sm text-dark active font-weight-bolder" aria-current="page">
                ODS Create</li>
        </ol>
    </nav>
  <div class="row">
      <div class="col-12">
          <div class="row justify-content-between">
              <div class="col-md-4 mt-4">
                  <a class="btn bg-gradient-info mb-3" href="{{ route('admin.on-demand-services.index') }}">Back</a>
              </div>
          </div>
      </div>
  </div>
  <div class="row justify-content-center">
      <div class="col-8">
          <div class="card pt-3 mb-4">
              <div class="card-body px-0 pt-0 pb-2">
                  <style>
                      .box-wrap-text {
                          width: 100%;
                          text-align: center;
                      }
                      .box-wrap-text:nth-child(2){
                          margin: 0px 20px;
                      }
                  </style>
                  <div class="row justify-content-center">
                    <div class="col-md-9 mb-3">
                        <div class="row align-items-center">
                            <div class="col-md-4">
                                <label>Create Date:</label>
                            </div>
                            <div class="col-md-8">
                                <div class="box-wrap-text w-100">
                                    <p class="mb-0">{{ now()->format('Y-m-d') }}</p>
                                  </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9 mb-3">
                        <div class="row align-items-center">
                            <div class="col-md-4">
                                <label>Create By :</label>
                            </div>
                            <div class="col-md-8">
                                <div class="box-wrap-text w-100">
                                    <p class="mb-0">{{ auth('admin')->user()->username }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <div class="row">
      <div class="col-12">
          <form role="form" action="{{ route('admin.on-demand-services.store') }}" method="POST" id="myForm">
            @csrf
              <div class="row justify-content-center">
                  <div class="col-md-8 col-sm-12">
                      <div class="card pt-3 mb-4">
                          <div class="card-body pt-0 pb-2">
                            <div class="row justify-content-center">
                                <div class="col-md-9 mb-3">
                                    <div class="row align-items-center">
                                        <div class="col-md-4">
                                            <label>Customer Name <span class="requered-mark">*</span></label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="">
                                                <input type="text" class="form-control" placeholder="Name" name="customer_name" maxlength="30" value="{{ old('customer_name') }}">
                                            </div>
                                            @error('customer_name')
                                            <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    </div>
                                
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                        <div class="col-md-4">
                                            <label>Email <span class="requered-mark">*</span></label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="">
                                                <input type="email" class="form-control" placeholder="Email" name="email" value="{{ old('email') }}">
                                            </div>
                                            @error('email')
                                            <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    </div>
                                    
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                        <div class="col-md-4">
                                            <label>Customer Phone <span class="requered-mark">*</span></label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="">
                                                <input type="tel" class="form-control" id="phone_no" placeholder="Phone" name="customer_phone" value="{{ old('customer_phone') }}">
                                            </div>
                                            @error('customer_name')
                                            <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    </div>
                                    
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                        <div class="col-md-4">
                                            <label>Total Machines <span class="requered-mark">*</span></label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="">
                                                <input type="num" class="form-control" placeholder="Total" id="total_machine" name="total_machines" value="{{ old('total_machines') }}">
                                            </div>
                                            @error('total_machines')
                                            <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    </div>
                                    
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                        <div class="col-md-4">
                                            <label>Type <span class="requered-mark">*</span></label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="">
                                                <div style="font-weight: 600;">
                                                    <div class="form-check form-check-inline mb-0">
                                                        <input class="form-check-input" type="radio" id="inlineRadio1" name="type" value="1" {{ old('type') == '1' ? 'checked' : '' }} checked>
                                                        <label class="form-check-label mb-0 custom-radio-label" for="inlineRadio1">Company</label>
                                                    </div>
                                                    <div class="form-check form-check-inline mb-0">
                                                        <input class="form-check-input mb-0" type="radio" id="inlineRadio2" name="type" value="2" {{ old('type') == '2' ? 'checked' : '' }}>
                                                        <label class="form-check-label custom-radio-label" for="inlineRadio2">Shop</label>
                                                    </div>
                                                    <div class="form-check form-check-inline mb-0">
                                                        <input class="form-check-input mb-0" type="radio" id="inlineRadio3" name="type" value="3" {{ old('type') == '3' ? 'checked' : '' }}>
                                                        <label class="form-check-label custom-radio-label" for="inlineRadio3">Individual</label>
                                                    </div>
                                                </div>
                                            </div>
                                            @error('type')
                                            <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    </div>
                                    
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                        <div class="col-md-4">
                                            <label>Total Tonnage <span class="requered-mark">*</span></label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="">
                                                <input type="num" class="form-control" placeholder="Total" id="total_tonnage" name="total_tonnage" value="{{ old('total_tonnage') }}">
                                            </div>
                                            @error('total_tonnage')
                                            <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    </div>
                                    
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                        <div class="col-md-4">
                                            <label>Company / Shop Name</label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="">
                                                <input type="text" class="form-control" placeholder="Company / Shop Name" name="company_shop_name" maxlength="30" value="{{ old('company_shop_name') }}">
                                            </div>
                                            @error('company_shop_name')
                                          <span class="text-danger">{{ $message }}</span>
                                          @enderror
                                        </div>
                                    </div>
                                    </div>
                                    
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                        <div class="col-md-4">
                                            <label>Address</label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="">
                                                <input type="text" class="form-control" placeholder="Address" name="address" value="{{ old('address') }}">
                                            </div>
                                            @error('address')
                                          <span class="text-danger">{{ $message }}</span>
                                          @enderror
                                        </div>
                                    </div>
                                    </div>
                                    
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                        <div class="col-md-4">
                                            <label>Complaints In details </label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="">
                                                <textarea style="height: 128px;" class="form-control" placeholder="Complaints In details" name="complaint_in_detail"></textarea>
                                            </div>
                                            @error('complaint_in_detail')
                                            <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    </div>
                                    
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                        <div class="col-md-4">
                                            <label>Pincode<span class="requered-mark">*</span></label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="">
                                                <input type="num" class="form-control" id="pincode" placeholder="Pincode" name="pincode" maxlength="6" value="{{ old('pincode') }}">
                                            </div>
                                            @error('pincode')
                                            <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    </div>
                                    
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                        <div class="col-md-4">
                                            <label>ODS Status</label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="">
                                                <select class="form-select w-100" id="validationCustom04" name="ods_status">
                                                    <option selected="" disabled="" value="">Select</option>
                                                      @foreach ($recordOds as $status)
                                                          <option value="{{ $status->id }}">{{ $status->status_name }}</option>
                                                      @endforeach
                                                </select>
                                            </div>
                                            @error('ods_status')
                                            <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    </div>
                                    
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                        <div class="col-md-4">
                                            <label>Landmark <span class="requered-mark">*</span></label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="">
                                                <input type="text" class="form-control" placeholder="Landmark" name="landmark" value="{{ old('landmark') }}">
                                            </div>
                                            @error('landmark')
                                            <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    </div>
                                    
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                        <div class="col-md-4">
                                            <label>Payment Status</label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="">
                                                <select class="form-select w-100" id="validationCustom04" name="payment_status">
                                                  <option selected="" disabled="" value="">Select</option>
                                                  @foreach ($payments as $status)
                                                      <option value="{{ $status->id }}">{{ $status->status_name }}</option>
                                                  @endforeach
                                                </select>
                                            </div>
                                            @error('payment_status')
                                            <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    </div>
                                    
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                        <div class="col-md-4">
                                            <label for="refer_by">Refer By</label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="">
                                                <select class="form-select" name="refer_by" id="refer_by">
                                                    <option value="">Select Option</option> 
                                                    @foreach($staffs as $staff)
                                                    <option value="{{ $staff->id }}" {{ old('technician_name') == $staff->id ? 'selected' : '' }}>
                                                        {{ $staff->staff_name }}
                                                    </option>
                                                    @endforeach
                                                    <option value="other">Other</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    </div>
                                    
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center" id="otherReferByContainer" style="display: none;">
                                        <div class="col-md-4">
                                            <label for="other_refer_by">Other Refer By</label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="">
                                                <input type="text" class="form-control" placeholder="Other Refer By" name="other_refer_by" value="{{ old('other_refer_by') }}">
                                            </div>
                                        </div>
                                    </div>
                                    </div>
                                    
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                        <div class="col-md-4">
                                            <label for="technician_name">Technician Name</label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="">
                                                <select class="form-select" name="technician_name" id="technician_name">
                                                    <option value="">Select Technician</option> 
                                                    @foreach($staffs as $staff)
                                                        <option value="{{ $staff->id }}" {{ old('technician_name') == $staff->id ? 'selected' : '' }}>
                                                            {{ $staff->staff_name }}
                                                        </option>
                                                    @endforeach
                                                    <option value="other">Other</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    </div>
                                    
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                        <div class="col-md-4">
                                            <label for="other_technician_name">Other Technician Name</label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="">
                                                <input type="text" class="form-control" placeholder="Other Technician Name" name="other_technician_name" value="{{ old('other_technician_name') }}">
                                            </div>
                                        </div>
                                    </div>
                                    </div>
                                    
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                        <div class="col-md-4">
                                            <label>Payment Remarks</label>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="">
                                                <textarea style="height: 128px;" class="form-control" placeholder="Remark" name="payment_remarks"></textarea>
                                      </div>
                                      @error('payment_remarks')
                                      <span class="text-danger">{{ $message }}</span>
                                      @enderror
                                        </div>
                                    </div>
                                  <div class="row justify-content-center mt-3">
                                      {{-- <a class="btn bg-gradient-info mb-3" style="float: right;" role="button"
                                          data-bs-toggle="modal" data-bs-target="#exampleModal"
                                          href="">Save & Close</a> --}}
                                      <input type="button" value="Save & Close" class="btn bg-gradient-info mb-3" style="max-width: 150px" id="saveButton">
                              </div>
                                    </div>
                          </div>
                      </div>
                  </div>
              </div>
          </form>
      </div>
  </div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-body pb-0">
              <h1 class="modal-title fs-5" id="exampleModalLabel">Register</h1>
              <p><span style="color: #198754;">Data Saved Successfully.</span>
              </p>
          </div>
          <div class="modal-footer border-0 pt-0">
              <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button> -->
              <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" href="./on_demand_service.html">Ok</a>
          </div>
      </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.7.0.js"></script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script>
    $(document).ready(function() {
        $("#technician_name").change(function() {
            if ($(this).val() === "other") {
                $("#otherInputContainer").show();
            } else {
                $("#otherInputContainer").hide();
            }
        });
    });

    $(document).ready(function() {
        $("#refer_by").change(function() {
            if ($(this).val() === "other") {
                $("#otherReferByContainer").show();
            } else {
                $("#otherReferByContainer").hide();
            }
        });
    });

     $("#phone_no").on("input", function () {
        // Remove non-numeric characters and limit the length to 10 digits
        var inputValue = $(this).val().replace(/\D/g, "").substr(0, 10);

        // Update the input value with only numeric characters and up to 10 digits
        $(this).val(inputValue);
      });
      $("#total_tonnage, #total_machine, #pincode").on("input", function () {
        // Remove non-numeric characters and limit the length to 10 digits
          var inputValue = $(this).val().replace(/\D/g, "").substr(0, 6);

          // Update the input value with only numeric characters and up to 10 digits
          $(this).val(inputValue);
      });


      document.getElementById("saveButton").addEventListener("click", function () {
        // Validate the form fields before showing the confirmation alert
        if (validateForm()) {
            // Show SweetAlert confirmation dialog
            Swal.fire({
                title: "Confirm",
                text: "Are you sure you want to save?",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Yes",
                cancelButtonText: "No",
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById("myForm").submit();
                }
            });
        }
    });

    // Function to validate the form fields
    function validateForm() {
        var customerName = document.querySelector('input[name="customer_name"]').value;
        var email = document.querySelector('input[name="email"]').value;
        var customerPhone = document.querySelector('input[name="customer_phone"]').value;
        var totalMachines = document.querySelector('input[name="total_machines"]').value;
        var totalTonnage = document.querySelector('input[name="total_tonnage"]').value;
        var pincode = document.querySelector('input[name="pincode"]').value;

        if (
            customerName === "" ||
            email === "" ||
            customerPhone === "" ||
            totalMachines === "" ||
            totalTonnage === "" ||
            pincode === ""
        ) {
            Swal.fire({
                icon: "error",
                title: "Validation Error",
                text: "Please fill in all required fields.",
            });
            return false;
        }
        return true;
    }

</script>
@endsection