@extends('layouts.app')
@section('content')

@php $consumer_cats = [1=>'LT', 2=>'HT']; @endphp
@php $phase_cats = [1=>'Single', 3=>'Three']; @endphp
@php $confirm = [1=>'Yes', 0=>'No']; @endphp
@php $project_cats = [1=>'OnGrid', 2=>'OffGrid',3=> 'Hybrid']; @endphp
@php $entity_cats = [1=>'Residential', 2=>'Commercial',3=>'Industrial',4=>'NGO',5=>'Utility']; @endphp

@php
$total_roof = [];
for ($i = 1; $i <= 10; $i++) {
    $total_roof["Roof $i"]="Roof $i" ;
    }
    @endphp




    <!-- PAGE-HEADER -->
    <div class="page-header">
        <div>
            <h1>Site <small>{{ isset($lead_id) ? 'Edit' : 'Create' }}</small></h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active">Lead</li>
                <li class="breadcrumb-item active">{{ isset($lead_id) ? 'Edit' : 'Create' }} Lead</li>
            </ol>
        </div>

        <div class="float-end">
            <a class="btn btn-primary btn-sm float-right" href="{{ url('leads') }}"> <i class="fa fa-arrow-left"></i> Back</a>
        </div>

    </div>
    <!-- PAGE-HEADER END -->


    <div class="content mt-3">

        <div class="card shadow mb-4">

            <div class="card-header py-3">
                {{ isset($lead_id) ? 'Edit Site Details' : 'Add New Site' }}
            </div>

            <div class="card-body">


                <form id="dataForm" method="POST" action="{{ url('lead/store') }}">
                    @csrf

                    @if(isset($lead))
                    <input type="hidden" name="lead_id" value="{{ $lead->id }}">
                    @endif

                    <input type="hidden" name="project_id" , value="{{ $project_id }}">
                    <input type="hidden" name="account_id" , value="{{ $account_id }}">
                    <p class="lead fs-4 fw-bold py-2">Basic Details</p>
                    <div class="row mb-3">
                        <div class="col-md-3 form-group">
                            <label for="title" class="col-form-label">Site <k>*</k></label>
                            {{ Form::text('title', $title ?? 'Site', ['class' => 'form-control', 'id' => 'title', 'readonly' => true]) }}
                            <span class="text-danger" id="title-error"></span>
                        </div>


                    </div>

                    <hr class="mt-3">
                    <p class="lead mb-0 fs-4 fw-bold py-2">Customer Details</p>
                    <div class="row">

                        <div class="col-md-4">
                            <label for="Site_name" class="col-form-label">Site Name <k>*</k></label>
                            {{ Form::text('site_name', '', ['class' => 'form-control', 'id' => 'site_name']) }}
                            <span class="text-danger" id="site_name-error"></span>
                        </div>
                        {{--
                        <div class="col-md-4">
                            <label for="last_name" class="col-form-label">Last Name</label>
                            {{ Form::text('last_name', '', ['class' => 'form-control', 'id' => 'last_name']) }}
                        <span class="text-danger" id="last_name-error"></span>
                    </div>

                    <div class="col-md-4">
                        <label for="company" class="col-form-label">Company</label>
                        {{ Form::text('company', '', ['class' => 'form-control', 'id' => 'company']) }}
                        <span class="text-danger" id="company-error"></span>
                    </div> --}}
                    <div class="col-md-4">
                        <label for="gstin" class="col-form-label">GSTIN</label>
                        {{ Form::text('gstin', '', ['class' => 'form-control', 'id' => 'gstin', 'maxlength' => '15']) }}
                        <span class="text-danger" id="gstin-error"></span>
                    </div>

                    <script>
                        document.getElementById('gstin').addEventListener('input', function(e) {
                            const gstin = e.target.value;
                            const errorSpan = document.getElementById('gstin-error');
                            const gstinRegex = /^[0-9A-Za-z]{15}$/;

                            if (gstin.length !== 15) {
                                errorSpan.textContent = "GSTIN must be exactly 15 characters.";
                            } else if (!gstinRegex.test(gstin)) {
                                errorSpan.textContent = "GSTIN must contain only alphanumeric characters.";
                            } else {
                                errorSpan.textContent = "";
                            }
                        });
                    </script>



                    {{-- <div class="col-md-4">
                            <label for="phone" class="col-form-label">Phone <k>*</k></label>
                            {{ Form::text('phone', '', [
                                'class' => 'form-control',
                                'id' => 'phone',
                                'maxlength' => '10',
                                'inputmode' => 'numeric',
                                'pattern' => '\d{10}',
                                'title' => 'Phone number must be 10 numeric digits',
                                'oninput' => "this.value = this.value.replace(/[^0-9]/g, '')",
                            ]) }}
                    <span class="text-danger" id="phone-error">
                        @error('phone')
                        {{ $message }}
                        @enderror
                    </span>
            </div> --}}


            {{-- <div class="col-md-4">
                            <label for="email" class="col-form-label">Email</label>
                            {{ Form::text('email', '', [
                                'class' => 'form-control',
                                'id' => 'email',
                                'pattern' => '[a-zA-Z0-9._%+-]+@gmail\.com',
                                'required' => true,
                                'title' => 'Email must be a valid Gmail address (e.g., example@gmail.com)',
                            ]) }}
            <span class="text-danger" id="email-error">
                @error('email')
                {{ $message }}
                @enderror
            </span>
        </div> --}}


        <div class="col-md-4 mb-0 form-group">
            <label>State</label>
            {{ Form::select('state_id', ['' => 'Select State'] + $states, $lead->state_id ?? '', ['class' => 'standardSelect form-control', 'title' => 'Select State', 'id' => 'state_id']) }}
            <span class="text-danger" id="state_id-error"></span>
        </div>

        <div class="col-md-4">
            <label for="city" class="col-form-label">City</label>
            {{ Form::text('city', '', ['class' => 'form-control', 'id' => 'city']) }}
            <span class="text-danger" id="city-error"></span>
        </div>

        <div class="col-md-4">
            <label for="address" class="col-form-label">Address</label>
            {{ Form::text('address', '', ['class' => 'form-control', 'id' => 'address']) }}
            <span class="text-danger" id="address-error"></span>
        </div>

        <div class="col-md-4">
            <label for="location" class="col-form-label">Location</label>
            {{ Form::text('location', '', ['class' => 'form-control', 'id' => 'location']) }}
            <span class="text-danger" id="location-error"></span>
        </div>
    </div>

    <hr class="mt-3">
    <p class="lead mb-0 fs-4 fw-bold">Energy Details</p>

    <div class="row mb-3">
        <div class="col-md-4">
            <label for="load" class="col-form-label">Sanctioned Load</label>
            {{ Form::text('load', '', ['class' => 'form-control', 'id' => 'load']) }}
            <span class="text-danger" id="load-error"></span>
        </div>

        <div class="col-md-4 mb-0 form-group">
            <label>Consumer Category</label>
            {{ Form::select('consumer_id', ['' => 'Select Category'] + $consumer_cats, $lead->consumer_id ?? '', ['class' => 'standardSelect form-control', 'id' => 'consumer_id']) }}
            <span class="text-danger" id="consumer_id-error"></span>
        </div>

        <div class="col-md-4 mb-0 form-group">
            <label>Phase of Loads</label>
            {{ Form::select('phase_id', ['' => 'Select Phase'] + $phase_cats, $lead->phase_id ?? '', ['class' => 'standardSelect form-control', 'id' => 'phase_id']) }}
            <span class="text-danger" id="phase_id-error"></span>
        </div>

        <div class="col-md-4">
            <label for="sys_volt" class="col-form-label">System Voltage</label>
            {{ Form::text('sys_volt', '', [
                                'class' => 'form-control',
                                'id' => 'sys_volt',
                                'inputmode' => 'numeric',
                                'pattern' => '\d*',
                                'oninput' => "this.value = this.value.replace(/[^0-9]/g, '')",
                            ]) }}
            <span class="text-danger" id="sys_volt-error">
                @error('sys_volt')
                {{ $message }}
                @enderror
            </span>
        </div>

        <div class="col-md-4 mb-0 form-group">
            <label>Availability of Spare Feeder</label>
            {{ Form::select('spare_feeder', ['' => 'Select Option', 'Yes' => 'Yes', 'No' => 'No'], $lead->spare_feeder ?? '', ['class' => 'standardSelect form-control', 'id' => 'spare_feeder']) }}
            <span class="text-danger" id="spare_feeder-error"></span>
        </div>

        <div class="col-md-4 mb-0 form-group">
            <label>Separate Panel Required</label>
            {{ Form::select('separate_panel', ['' => 'Select Option', 'Yes' => 'Yes', 'No' => 'No'], $lead->separate_panel ?? '', ['class' => 'standardSelect form-control', 'id' => 'separate_panel']) }}
            <span class="text-danger" id="separate_panel-error"></span>
        </div>

        <div class="col-md-4">
            <label for="dist_inv_room" class="col-form-label">
                Distance from Inverter/ICMR/ICA to AJB/Gross Metering Room (In Meter)
            </label>
            <div class="input-group">
                {{ Form::text('dist_inv_room', '', [
                                    'class' => 'form-control',
                                    'id' => 'dist_inv_room',
                                    'inputmode' => 'numeric',
                                    'pattern' => '\\d*',
                                    'oninput' => "this.value = this.value.replace(/[^0-9.]/g, '')",
                                ]) }}
            </div>
            <span class="text-danger" id="dist_inv_room-error"></span>
        </div>

        <div class="col-md-4">
            <label for="dist_met_fed" class="col-form-label">
                Distance from Metering Room to Feeder/LTDB of Client (In Meter)
            </label>
            <div class="input-group">
                {{ Form::text('dist_met_fed', '', [
                                    'class' => 'form-control',
                                    'id' => 'dist_met_fed',
                                    'inputmode' => 'numeric',
                                    'pattern' => '\\d*',
                                    'oninput' => "this.value = this.value.replace(/[^0-9.]/g, '')",
                                ]) }}

            </div>
            <span class="text-danger" id="dist_met_fed-error"></span>
        </div>


        <hr class="mt-3">
        <p class="lead mb-0 fs-4 fw-bold">DG Details</p>
        <div class="col-md-4">
            <label for="op_hours" class="col-form-label">Operation Hours</label>
            {{ Form::text('op_hours', '', [
                                'class' => 'form-control',
                                'id' => 'op_hours',
                                'inputmode' => 'numeric',
                                'pattern' => '\d*',
                                'oninput' => "this.value = this.value.replace(/[^0-9]/g, '')",
                            ]) }}
            <span class="text-danger" id="op_hours-error">
                @error('op_hours')
                {{ $message }}
                @enderror
            </span>
        </div>

        <div class="col-md-4">
            <label for="avg_dg" class="col-form-label">DG Running Hours</label>
            {{ Form::text('avg_dg', '', [
                                'class' => 'form-control',
                                'id' => 'avg_dg',
                                'inputmode' => 'numeric',
                                'pattern' => '\d*',
                                'oninput' => "this.value = this.value.replace(/[^0-9]/g, '')",
                            ]) }}
            <span class="text-danger" id="avg_dg-error">
                @error('avg_dg')
                {{ $message }}
                @enderror
            </span>
        </div>

        <div class="col-md-4">
            <label for="dg_rating" class="col-form-label">DG Rating</label>
            {{ Form::text('dg_rating', '', [
                                'class' => 'form-control',
                                'id' => 'dg_rating',
                                'inputmode' => 'numeric',
                                'pattern' => '\d*',
                                'oninput' => "this.value = this.value.replace(/[^0-9]/g, '')",
                            ]) }}
            <span class="text-danger" id="dg_rating-error">
                @error('dg_rating')
                {{ $message }}
                @enderror
            </span>
        </div>


        <div class="col-md-4 ">
            <label>DG Sync</label>
            {{ Form::select('dg_sync', ['' => 'YES or NO'] + $confirm, $lead->dg_sync ?? '', ['class' => 'standardSelect form-control', 'id' => 'dg_sync']) }}
            <span class="text-danger" id="dg_sync-error"></span>
        </div>
    </div>


    <hr class="mt-3">
        <p class="lead mb-0 fs-4 fw-bold">Other Details</p>

        <div class="row">
            <div class="col-md-4">
            <label for="status" class="col-form-label">Status</label>
            {!! Form::select('status', $statuses, $lead->status ?? '', [
            'class' => 'standardSelect form-control',
            'title' => 'Select Status',
            'data-live-search' => 'true',
            'id' => 'status',
            'data-dropup-auto' => 'false',
            'data-size' => '5',
            ]) !!}
            <span class="text-danger" id="status-error"></span>
        </div>
        </div>


        <!-- New Fields -->


    </div>


    </div>

    </div>
    <div class="py-3 d-flex justify-content-end">
        <button type="submit" class="btn btn-primary">
            {{ !empty($answers) ? 'Update Details' : 'Save Details' }}
        </button>
    </div>

    </div>
    </form>
    </div>

    </div>

    </div>


    @stop

    @section('scripting')

    <script type="text/javascript">
        $(document).ready(function() {


            $(".standardSelect").selectpicker();

            $('.standardSelect').on('change', function() {
                // $(this).selectpicker('refresh');
                $(this).removeClass('open');
            });

            // $('#dataForm').data("validator").settings.ignore = "";

            jQuery.validator.setDefaults({
                debug: true
            });

            var lead_id = "{{ isset($lead_id) ? $lead_id : false }}";

            if (lead_id) {
                $.ajax({
                    url: "{{ url('lead/getLeadData/') }}/" + lead_id,
                    type: "GET",
                    dataType: 'json',
                    success: function(data) {
                        console.log(data);
                        $('#dataForm').trigger("reset");
                        $('#lead_id').val(data.lead_id);
                        $('#title').val(data.title);
                        $('#site_name').val(data.site_name);
                        $('#last_name').val(data.last_name);
                        $('#company').val(data.company);
                        $('#gstin').val(data.gstin);
                        $('#phone').val(data.phone);
                        $('#email').val(data.email);
                        $('#state_id').val(data.state_id);
                        $('#city').val(data.city);
                        $('#address').val(data.address);
                        $('#location').val(data.location);
                        $('#institute').val(data.institute);
                        $('#entity_id').val(data.entity_id);
                        $('#project_types').val(data.project_types);
                        $('#load').val(data.load);
                        $('#consumer_cats_id').val(data.consumer_cats_id);
                        $('#phase_cats_id').val(data.phase_cats_id);
                        $('#sys_volt').val(data.sys_volt);
                        $('#op_hours').val(data.op_hours);
                        $('#avg_dg').val(data.avg_dg);
                        $('#dg_rating').val(data.dg_rating);
                        $('#dg_sync').val(data.dg_sync);
                        $('#remarks').val(data.remarks);
                        $('#spare_feeder').val(data.spare_feeder);
                        $('#separate_panel').val(data.separate_panel);
                        $('#dist_inv_room').val(data.dist_inv_room);
                        $('#dist_met_fed').val(data.dist_met_fed);
                        $('#bu_id').val(data.bu_id);

                        getProjectTypes(data.bu_id);
                        getProjectTypes(data.bu_id, data.project_types);

                        $('.standardSelect').selectpicker('refresh');


                    },
                    error: function(data) {
                        if (data.status == 422) {
                            var x = data.responseJSON;
                            $.each(x.errors, function(index, value) {
                                console.log(index);
                                $("#" + index).addClass("is-invalid");
                                $('.standardSelect').selectpicker('refresh');
                                $("#" + index + "-error").html(value[0]);
                            });
                        }
                        $('#saveBtn').html('Save Changes');
                    }
                });
            }
        });


        if ($("#dataForm").length > 0) {

            $("#dataForm").validate({

                errorClass: "is-invalid",

                unhighlight: function(element, errorClass, validClass) {
                    $(element).removeClass(errorClass);
                    $(element).parent().removeClass(errorClass);
                },

                errorPlacement: function(error, element) {
                    element.parent().append(error);
                },


                rules: {
                    first_name: 'required',
                    phone: 'required',
                },

                messages: {
                    first_name: "Please Enter Client Name.",
                    phone: "Please Enter Phone.",
                },

                submitHandler: function(form) {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });

                    $('#saveBtn').html('Sending..');

                    $.ajax({
                        data: $('#dataForm').serialize(),
                        url: "{{ url('lead/store') }}",
                        type: "POST",
                        dataType: 'json',

                        success: function(data) {
                            swal({
                                    title: "Good job!",
                                    text: data.msg,
                                    icon: "success",
                                })
                                .then((willDelete) => {
                                    window.location.href = "/leads/" + data.data.project_id; // ✅ correct
                                });
                        },

                        error: function(data) {
                            if (data.status == 422) {
                                var x = data.responseJSON;
                                $.each(x.errors, function(index, value) {
                                    console.log(index);
                                    $("#" + index).addClass("is-invalid");
                                    $('.standardSelect').selectpicker(
                                        'refresh');
                                    $("#" + index + "-error").html(value[0]);
                                });
                            }
                            $('#saveBtn').html('Save Changes');
                        }
                    });

                }
            })


            // $('#project_types').change(function(e) {
            //     $(".data-table").DataTable().ajax.reload();
            // });


            $('#bu_id').change(function() {
                var bu_id = $(this).val();
                if (bu_id) {
                    getProjectTypes(bu_id);
                } else {
                    $('#project_types').html('<option value="">Select Project Type</option>');
                }
            });

        }


        function getProjectTypes(bu_id, project_types = false) {
            $.ajax({
                type: "GET",
                url: "{{ url('getProjectTypes') }}",
                data: {
                    bu_id: bu_id
                },
                dataType: "json",
                success: function(res) {
                    if (res.success == 1) {
                        var options_htm = '<option value="">Select Project Type</option>';
                        $.each(res.data, function(key, val) {
                            options_htm += '<option value="' + key + '">' + val +
                                '</option>';
                        });
                        $('#project_types').html(options_htm);

                        if (project_types) {
                            $('#project_types').val(project_types);
                        }
                    } else {
                        $('#project_types').html(
                            '<option value="">No Project Types Found</option>');
                    }
                    $('.standardSelect').selectpicker('refresh');
                },


                error: function() {
                    alert('Something went wrong while fetching project types.');
                }
            });
        }
    </script>

    @endsection