@extends('layouts.guest')
<style>
    #inquiyshow{
        display: none;
    }
    #rinq{
        display: none;
    }
</style>
@section('content')
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
            <h1 class="m-0">Customer Care Inquiry Form</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active">Customer Care Inquiry form</li>
            </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
        <!-- Small boxes (Stat box) -->
            <div class="row">
                <!-- Left col -->
                <section class="col-lg-12 connectedSortable">
                    <!-- Custom tabs (Charts with tabs)-->
                    <div class="card">
                        <div class="card-header">
                            <div id="inquiyhs">
                                <h1 class="card-title p-2" style="color: rgb(36, 165, 47)">
                                    Inquiry No: {{ $inquiryno }}
                                </h1>
                            </div>
                            <div id="inquiyshow">
                                <h1 class="p-2 card-title" style="color: rgb(36, 165, 47)">
                                    Reference Inquiry No: <input style="border: none;color: rgb(36, 165, 47);" type="text" id="revisioninq">
                                </h1>
                            </div>
                            <div class="col">
                                <button value="Back" type="Button" onclick="history.go(-1);"
                                    class="btn btn-info float-right">Back</button>
                            </div>
                        </div><!-- /.card-header -->
                        <div class="card-body">
                            <form action="{{ route('customercare/inquiry/store') }}" method="post">
                                @csrf
                                <div id="maininquiry">
                                    <input type="hidden" name="uniquenumber" value="{{ $inquiryno }}" readonly/>
                                </div>
                                <div id="rinq">
                                    <input type="hidden" name="uniquenumber" id="inq" value="{{ $inquiryno }}" readonly/>
                                </div>
                                <div class="row">
                                    <div class="col-lg-3">
                                        <label for="">Contracted Date</label>
                                        <input type="date" name="datecontracted" class="form-control" id="datecontracted" value="{{ old('datecontracted') }}">
                                        <span class="text-danger error-text datecontracted_error"></span>
                                        @error('datecontracted')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-lg-3">
                                        <label for="">Marketing Coordinator</label>
                                        <input type="text" class="form-control" value="{{ Auth::user()->username }}" readonly>
                                        <input type="hidden" name="coordinator" class="form-control" value="{{ Auth::user()->id }}" readonly>
                                        <span class="text-danger error-text coordinator_error"></span>
                                        @error('coordinator')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <input type="hidden" name="department" value="customercaretracker" readonly/>
                                    <div class="col-lg-6">
                                        <div class="row">
                                            <div class="col-lg-10">
                                                <label for="">Company Name</label>
                                                <input type="text" name="companyname" class="form-control" id="search" value="{{ old('companyname') }}">
                                                <span class="text-danger error-text companyname_error"></span>
                                                @error('companyname')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="col-2">
                                                <label for="" style="padding-bottom: 3rem;"></label>
                                                <div class="btn btn-secondary" id="cname" style="font-size: 0.8rem;padding: 9px;">Get Data</div>
                                            </div>
                                        </div>
                                    </div>

                                    <input type="hidden" name="najmaid" id="najmaid" readonly/>
                                    <input type="hidden" name="old_uniquenumber" id="oldinquiry" readonly/>

                                    <div class="col-lg-6">
                                        <label for="">Website</label>
                                        <input type="text" name="website" class="form-control" id="website" value="{{ old('website') }}">
                                        <span class="text-danger error-text website_error"></span>
                                        @error('website')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-lg-3">
                                        <label for="">Scope of Business</label>
                                        <select name="sob" class="select2 color:dark" id="sob" style="width: 100%;">
                                            <option value="0" selected>Select a Scope of Business</option>
                                            @foreach ($scopeofbusiness as $business)
                                                <option value="{{ $business->id }}">{{ $business->name }}</option>
                                            @endforeach
                                        </select>
                                        <span class="text-danger error-text sob_error"></span>
                                        @error('sob')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-lg-3">
                                        <label for="">Emirates</label>
                                        <select name="emirates" class="select2 color:dark" id="emirates" style="width: 100%;">
                                            <option value="0" selected>Select a Emirate</option>
                                            @foreach ($emirates as $emirate)
                                                <option value="{{ $emirate->id }}">{{ $emirate->name }}</option>
                                            @endforeach
                                        </select>
                                        <span class="text-danger error-text emirates_error"></span>
                                        @error('emirates')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-lg-6">
                                        <label for="">Area</label>
                                        <input type="text" name="area" class="form-control" id="area" value="{{ old('area') }}">
                                        <span class="text-danger error-text area_error"></span>
                                        @error('area')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-lg-3">
                                        <label for="">Country</label>
                                        <select name="country" class="select2 color:dark" id="country" style="width: 100%;">
                                            <option value="0" selected>Select a Country</option>
                                            @foreach ($countries as $country)
                                                <option value="{{ $country->id }}">{{ $country->name }}</option>
                                            @endforeach
                                        </select>
                                        <span class="text-danger error-text country_error"></span>
                                        @error('country')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-lg-3">
                                        <label for="">Gender</label>
                                        <select name="gender" class="select2 color:dark" id="gender" style="width: 100%;">
                                            <option value="0" selected>Select a Gender</option>
                                            <option value="1">Male</option>
                                            <option value="2">FeMale</option>
                                        </select>
                                        <span class="text-danger error-text gender_error"></span>
                                        @error('gender')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    {{-- <div class="col-lg-3">
                                        <label for="">Contact Person Name</label>
                                        <input type="text" name="personname" class="form-control" id="personname" value="{{ old('personname') }}">
                                        <span class="text-danger error-text personname_error"></span>
                                        @error('personname')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-lg-3">
                                        <label for="">Contact Number</label>
                                        <input type="text" name="contactno" class="form-control" id="contactno" value="{{ old('contactno') }}">
                                        <span class="text-danger error-text contactno_error"></span>
                                        @error('contactno')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-lg-6">
                                        <label for="">Contact Email</label>
                                        <input type="text" name="email" class="form-control" id="email" value="{{ old('email') }}">
                                        <span class="text-danger error-text email_error"></span>
                                        @error('email')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div> --}}
                                </div>

                                {{-- <div class="pt-2" id="myTable"></div>
                                <div class="row pt-2">
                                    <div class="col-lg-12">
                                        <a href="javascript:void(0);" class="btn btn-success btn-sm float-right" id="add_rowA"><i class="fa fa-plus"></i> Add Row</a>
                                    </div>

                                    <div class="row pt-2" style="padding: 0px 11px 0px 11px;">
                                        <table class="w-100" id="dynamicTable"  style="border: 1px solid #eee;" name="myForm">
                                            <thead>
                                            <tr>
                                                <th style="border: 1px solid #000;margin-left: 8px;width: 17rem;text-align: center;">Contact Person Name</th>
                                                <th style="border: 1px solid #000;margin-left: 5px;width: 16rem;text-align: center;">Contact Number</th>
                                                <th style="border: 1px solid #000;margin-left: 9px;width: 32rem;text-align: center;">Contact Email</th>
                                                <th style="border: 1px solid #000;margin-left: 9px;width: 3rem;text-align: center;">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody id="row_body3">
                                                <input type="hidden" value="0" id="row_countA">
                                            </tbody>
                                        </table>
                                    </div><br>
                                </div> --}}
                                <div class="pt-2" id="myTables"></div>
                                <div class="pt-2" id="myTable"></div>

                                <div class="row pt-2 bg-light">
                                    <div class="col-lg-12">
                                        <a href="javascript:void(0);" class="btn btn-success btn-sm float-right" id="add_rowA"><i class="fa fa-plus"></i> Add Row</a>
                                    </div>
                                    <div class="col-lg-12 pt-2 mb-3" style="padding: 0px 11px 0px 11px;">
                                        <table class="w-100" id="dynamicTable"  style="border: 1px solid #eee;" name="myForm">
                                            <thead>
                                            <tr>
                                                <th style="border: 1px solid #000;margin-left: 8px;width: 17rem;text-align: center;">Contact Person Name</th>
                                                <th style="border: 1px solid #000;margin-left: 5px;width: 16rem;text-align: center;">Contact Number</th>
                                                <th style="border: 1px solid #000;margin-left: 9px;width: 32rem;text-align: center;">Contact Email</th>
                                                <th style="border: 1px solid #000;margin-left: 9px;width: 3rem;text-align: center;">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody id="row_body5">
                                                <input type="hidden" value="0" id="row_countC">
                                            </tbody>
                                        </table>
                                    </div><br>
                                </div>
                            <div class="row">
                                    <div class="col-lg-6">
                                        <label for="">Contact Person Position</label>
                                        <input type="text" name="contact_person_position" id="contact_person_position" class="form-control" value="{{ old('contact_person_position') }}">
                                        <span class="text-danger error-text contact_person_position_error"></span>
                                        @error('contact_person_position')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-lg-6">
                                        <label for="">Category</label>
                                        <select name="category" class="select2 color:dark" id="category" style="width: 100%;">
                                            <option value="0" selected>Select a category</option>
                                            @foreach ($category as $cat)
                                                <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                            @endforeach
                                        </select>
                                        <span class="text-danger error-text category_error"></span>
                                        @error('category')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-lg-12">
                                        <label for="">Remarks</label>
                                        <textarea name="remarks" class="form-control" id="remark" rows="3"></textarea>
                                        <span class="text-danger error-text salremarks_error"></span>
                                        @error('remarks')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-lg-6">
                                        <input type="hidden" name="submitbuttonone" id="smtone">
                                        <button type="submit" class="btn btn-warning" id="submitedone">Save & Edit</button>
                                        <input type="hidden" name="submitbutton" id="smt">
                                        <button type="submit" class="btn btn-success" id="submited">Submit</button>
                                    </div>
                                </div>
                            </form>
                        </div><!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </section>
                <!-- /.Left col -->
            </div>
        <!-- /.row -->
        </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>
<script>
    let current = new Date();
    let cDate = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + current.getDate();
    let cTime = current.getHours() + ":" + current.getMinutes() + ":" + current.getSeconds();
    let dateTime = cDate + ' ' + cTime;
    $("#dateTime").val(dateTime);
    // console.log(dateTime);
</script>
<script>
    // save and edit click button
    $('#submitedone').on('click', function(){
        // alert('hiii');
        $("#smtone").val(0);
        $("#smt").val(0);
    })
    // submit click button
    $('#submited').on('click', function(){
        // alert('hiii');
        $("#smt").val(1);
        $("#smtone").val(0);
    })
</script>
<script>
    $("#cname").on('click', function () {
        var companyname = $("#search").val();
        // console.log('hi', $(".cname").val());
        $.ajax({
            url:'{{ route("getcompany/customercaredata") }}',
            method:'POST',
            dataType:"json",
            data: {
                "_token": "{{ csrf_token() }}",
                companyname:companyname,
            },
            success:function(response){
                var x = document.getElementById("inquiyhs");
                x.style.display = "none";
                $("#inq").val(response.revisionno);
                $("#revisioninq").val(response.revisionno);
                // revision dev show
                var y = document.getElementById("inquiyshow");
                y.style.display = "block";

                // inquiry number hide and show
                var maininquiry = document.getElementById("maininquiry");
                maininquiry.style.display = "none";

                var revisioninquiry = document.getElementById("rinq");
                revisioninquiry.style.display = "block";

                // console.log(response.data.inquiryid, 'response');
                $("#datecontracted").val(response.data.datecontracted);
                $("#najmaid").val(response.data.id);
                $("#oldinquiry").val(response.data.inquiryid);
                $("#website").val(response.data.website);
                $("#area").val(response.data.area);
                $("#contact_person_position").val(response.data.contact_person_position);
                $("#sob").val(response.data.sob);

                // new table data show
                $.each(response.najmadirectoryrevisions_userisnot ,function(i,rows){
                    // this function used 'email' center *** adds
                    function maskEmail(email) {
                        // Split the email into the local part and domain
                        const [localPart, domain] = email.split('@');
                        // Determine how many characters to mask
                        const maskLength = Math.max(localPart.length - 2, 0); // Mask all but the first and last characters of the local part
                        // Create the masked local part
                        const maskedLocalPart = localPart[0] + '*'.repeat(maskLength) + localPart.slice(-1);
                        // Return the masked email
                        return `${maskedLocalPart}@${domain}`;
                    }
                    const email = rows.newemail;
                    const maskedEmail = maskEmail(email);

                    // this function used 'phone number' center *** adds
                    function maskPhoneNumber(phoneNumber) {
                        // Convert the phone number to a string (in case it's a number)
                        const phoneStr = phoneNumber.toString();

                        // Determine the length of the number to be masked
                        const maskLength = Math.max(phoneStr.length - 4, 0); // Mask all but the first 3 and last 2 digits

                        // Create the masked part
                        const maskedPart = '*'.repeat(maskLength);

                        // Combine the visible and masked parts
                        const visibleStart = phoneStr.slice(0, 3); // First 3 characters
                        const visibleEnd = phoneStr.slice(-2); // Last 2 characters

                        // Construct the final masked phone number
                        return `${visibleStart}${maskedPart}${visibleEnd}`;
                    }
                    // Example usage
                    const phoneNumber = rows.newcontactno;
                    const maskedPhoneNumber = maskPhoneNumber(phoneNumber);

                    // name add *
                    function maskName(name) {
                        // Convert the name to a string (in case it's a non-string input)
                        const nameStr = name.toString();

                        // Determine the length of the name to be masked
                        const totalLength = nameStr.length;
                        const maskLength = Math.max(totalLength - 4, 0); // Mask all but the first 2 and last 2 characters

                        // Create the masked part
                        const maskedPart = '*'.repeat(maskLength);

                        // Extract the visible start and end parts
                        const visibleStart = nameStr.slice(0, 2); // First 2 characters
                        const visibleEnd = nameStr.slice(-2); // Last 2 characters

                        // Combine the visible and masked parts
                        return `${visibleStart}${maskedPart}${visibleEnd}`;
                    }
                    // Example usage
                    const name = rows.newpersonname;
                    const maskedName = maskName(name);

                    row_countA = 0;
                    row_countA++;
                    var content = '';
                    content += '<div class="pt-1 row" id="rowA'+row_countA+'">';
                    content += '<div class="col-lg-3"><input type="text" class="form-control" name="items['+row_countA+'][newpersonname]" id="personname'+row_countA+'" value="'+maskedName+'" disabled></div>';
                    content += '<div class="col-lg-3"><input type="text" class="form-control" name="items['+row_countA+'][newcontactno]" id="contactno'+row_countA+'" value="'+maskedPhoneNumber+'" disabled></div>';
                    content += '<div class="col-lg-6"><input type="text" class="form-control" name="items['+row_countA+'][newemail]" id="email'+row_countA+'" value="'+maskedEmail+'" disabled></div>';
                    $('#myTable').append(content);
                });

                // scope of business
                let html = '';
                html += '<option value="0">'+'Select a Scope of Business'+'</option>';
                $.each(response.data.sobs ,function(i,v){
                    html += '<option value="'+v.id+'" selected>'+v.name+'</option>';
                });
                $("#sob").html(html);

                // emirates
                let htmle = '';
                htmle += '<option value="0">'+'Select a Emirate'+'</option>';
                $.each(response.data.emiratess ,function(i,v){
                    htmle += '<option value="'+v.id+'" selected>'+v.name+'</option>';
                });
                $("#emirates").html(htmle);

                // country
                let htmlc = '';
                htmlc += '<option value="0">'+'Select a Country'+'</option>';
                $.each(response.data.countries ,function(i,v){
                    htmlc += '<option value="'+v.id+'" selected>'+v.name+'</option>';
                });
                $("#country").html(htmlc);

                // gender
                let htmlg = '';
                htmlg += '<option value="0">'+'Select a Gender'+'</option>';
                if(response.data.gender == 1){
                    htmlg += '<option value="1" selected>Male</option>';
                }else if(response.data.gender == 2){
                    htmlg += '<option value="2" selected>Female</option>';
                }
                $("#gender").html(htmlg);

                // category
                let htmlcat = '';
                htmlcat += '<option value="0">'+'Select a category'+'</option>';
                $.each(response.data.categories ,function(i,v){
                    htmlcat += '<option value="'+v.id+'" selected>'+v.name+'</option>';
                });
                $("#category").html(htmlcat);
                $("#remark").val(response.data.remark);
            }
        })
    });
</script>
<script>
    $('#add_rowA').on('click', function() {
         // console.log('hi');
         var row_countC = $('#row_countC').val();
         row_countC++;
         var content = '';
         content += '<tr id="rowA'+row_countC+'">';
         content += '<td><input type="text" class="w-100" name="items['+row_countC+'][newpersonname]" id="personname'+row_countC+'"></td>';
         content += '<td><input type="text" class="w-100" name="items['+row_countC+'][newcontactno]" id="contactno'+row_countC+'"></td>';
         content += '<td><input type="text" class="w-100" name="items['+row_countC+'][newemail]" id="email'+row_countC+'"></td>';
         content += '<td><a href="javascript:void(0);" class="w-100 remove_row btn btn-danger btn-sm" data-row="'+row_countC+'"><i class="fas fa-trash"></i></a></td>';
         // </tr>';
         $('#row_body5').append(content);
         $('#row_countC').val(row_countC);
     });
 </script>
 <script>
     $(document).on('click', '.remove_row', function() {
     var row_countA = $(this).attr('data-row');
     var ntrid = $(this).closest('tr').attr('id');
     var newStr = ntrid.replace('rowA','');

     $('#rowA'+row_countA).remove();
 });
 </script>
@endsection