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

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




    <!-- PAGE-HEADER -->
    <div class="page-header">
        <div>
            <h1>Lead <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-body">
                {{ Form::open(['id' => 'dataForm']) }}

                {{ Form::hidden('lead_id', '', ['id' => 'lead_id']) }}
                <form id="dataForm" method="POST" action="{{ url('roof_list/{lead_id}/store') }}">
                    @csrf <!-- Add CSRF token for security -->
                    <input type="hidden" name="lead_id" id="lead_id">

                    <hr class="mt-3">

                    <p class="lead mb-0 fs-4 fw-bold py-2">Roof Information Form</p>

                    <form action="{{ route('roof_lists.store', $lead->id) }}" method="POST">
                        @csrf
                        <input type="hidden" name="lead_id" value="{{ $data->id }}">

                        <div class="row mb-3 mb-3" id="photographs_section">
                            <label class="col-form-label">Photographs Taken</label>
                            <div class="d-flex gap-2">
                                <div>
                                    <label for="facing_south" class="form-label">Facing South</label>
                                    <input type="file" class="form-control" name="facing_south" id="facing_south">
                                </div>
                                <div>
                                    <label for="facing_north" class="form-label">Facing North</label>
                                    <input type="file" class="form-control" name="facing_north" id="facing_north">
                                </div>

                                <div>
                                    <label for="facing_west" class="form-label">Facing West</label>
                                    <input type="file" class="form-control" name="facing_west" id="facing_west">
                                </div>
                                <div>
                                    <label for="roof_layout" class="form-label">Roof Layout (roof drawings)</label>
                                    <input type="file" class="form-control" name="roof_layout" id="roof_layout">
                                </div>
                            </div>
                        </div>


                        <div class="row mb-3" id="site_info_section">
                            <div class="col-md-4">
                                <label class="col-form-label">Roof No.</label>
                                <div class="d-flex gap-2">
                                    <input type="text" class="form-control" name="roof_no" id="roof_no"
                                        placeholder="Roof No.">
                                    <input type="text" class="form-control" name="roof_total" id="roof_total"
                                        placeholder="Total Roofs">
                                </div>
                            </div>

                            <div class="col-md-4">
                                <label for="building_height" class="col-form-label">Building Height (in
                                    meters) from Ground Level</label>
                                <input type="text" class="form-control" name="building_height"
                                    id="building_height">
                            </div>

                            <div class="col-md-4">
                                <label for="roof_inclination" class="col-form-label">Roof Inclination</label>
                                <select class="form-control" name="roof_inclination" id="roof_inclination">
                                    <option value="Flat">Flat</option>
                                    <option value="Inclined">Inclined</option>
                                </select>
                            </div>
                        </div>


                        <div class="row mb-3" id="roof_material_section">
                            <div class="col-md-4">
                                <label for="roof_material" class="col-form-label">Roof Material</label>
                                <select class="form-control" name="roof_material" id="roof_material">
                                    <option value="Sheet">Sheet</option>
                                    <option value="RCC">RCC</option>
                                </select>
                            </div>

                            <div class=" col-md-4" id="roof_profile_section">
                                <label for="roof_profile" class="col-form-label">Roof Profile</label>
                                <select class="form-control" name="roof_profile" id="roof_profile">
                                    <option value="Flat">Flat</option>
                                    <option value="Trapezoidal">Trapezoidal</option>
                                    <option value="Standing Seam">Standing Seam</option>
                                </select>
                            </div>

                            <div class="col-md-4" id="roof_details_section">
                                <label for="roof_age" class="col-form-label">Roof Age</label>
                                <input type="text" class="form-control" name="roof_age" id="roof_age">
                            </div>
                        </div>


                        <div class="row mb-3">

                            <div class="col-md-4">
                                <label for="shade_free_area" class="col-form-label">Shade-free Area Available
                                    on Roof</label>

                                <div>
                                    <input type="radio" name="shade_free_area" value="Yes"
                                        id="shade_free_area_yes"> Yes
                                    <input type="radio" name="shade_free_area" value="No"
                                        id="shade_free_area_no"> No
                                </div>

                            </div>


                            <div class="col-md-4" id="access_section">
                                <label class="col-form-label">Availability of Permanent Access to Roof</label>
                                <div>
                                    <input type="radio" name="permanent_access" value="Yes"
                                        id="permanent_access_yes"> Yes
                                    <input type="radio" name="permanent_access" value="No"
                                        id="permanent_access_no"> No
                                </div>
                            </div>

                            <div class="col-md-4" id="access_section">
                                <label class="col-form-label">Plans for vertical expansion</label>
                                <div>
                                    <input type="radio" name="vertical_expansion" value="Yes"
                                        id="vertical_expansion_yes"> Yes
                                    <input type="radio" name="vertical_expansion" value="No"
                                        id="vertical_expansion_no"> No
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4" id="access_section">
                                <label class="col-form-label">Availability of water</label>
                                <div>
                                    <input type="radio" name="availability_water" value="Yes"
                                        id="availability_water_yes"> Yes
                                    <input type="radio" name="availability_water" value="No"
                                        id="availability_water_no"> No
                                </div>
                            </div>

                            <div class="col-md-4" id="access_section">
                                <label class="col-form-label">Availability of Electricity connection</label>
                                <div>
                                    <input type="radio" name="availability_electricity" value="Yes"
                                        id="availability_electricity_yes"> Yes
                                    <input type="radio" name="availability_electricity" value="No"
                                        id="availability_electricity_no"> No
                                </div>
                            </div>

                            <div class="col-md-4" id="access_section">
                                <label class="col-form-label">Any slope / sagging / visible damage to roof </label>
                                <div>
                                    <input type="radio" name="roof_damage" value="Yes" id="roof_damage_yes">
                                    Yes
                                    <input type="radio" name="roof_damage" value="No" id="roof_damage_no"> No
                                </div>
                            </div>
                        </div>


                        <div class="row mb-3">
                            <div class="col-md-4" id="access_section">
                                <label class="col-form-label">Any visible sign of water logging?</label>
                                <div>
                                    <input type="radio" name="water_logging" value="Yes"
                                        id="water_logging_yes"> Yes
                                    <input type="radio" name="water_logging" value="No" id="water_logging_no">
                                    No
                                </div>
                            </div>

                            <div class="col-md-4" id="access_section">
                                <label class="col-form-label">Can mother slab be exposed?</label>
                                <div>
                                    <input type="radio" name="mother_slab" value="Yes" id="mother_slab_yes">
                                    Yes
                                    <input type="radio" name="mother_slab" value="No" id="mother_slab_no"> No
                                </div>
                            </div>

                            <div class="col-md-4" id="access_section">
                                <label class="col-form-label">Can earthing be centralized with primary point </label>
                                <div>
                                    <input type="radio" name="centralized_earthing" value="Yes"
                                        id="centralized_earthing_yes"> Yes
                                    <input type="radio" name="centralized_earthing" value="No"
                                        id="centralized_earthing_no"> No
                                </div>
                            </div>
                        </div>


                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="foundation_size" class="col-form-label">Recommended Foundation
                                    Size / Rail Size</label>
                                <input type="text" class="form-control" name="foundation_size"
                                    id="foundation_size">
                            </div>
                            <div class="col-md-4">
                                <label for="south_obstruction" class="col-form-label">Any anticipated obstruction in
                                    south direction</label>
                                <input type="text" class="form-control" name="south_obstruction"
                                    id="south_obstruction">
                            </div>
                            <div class="col-md-4">
                                <label for="earthing_location" class="col-form-label">Earthing Location</label>
                                <input type="text" class="form-control" name="earthing_location"
                                    id="earthing_location">
                            </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>
                    </form>
                </div> 
            </div>
        </div>
    </div>
</div>
</div>
@endsection


@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 }}"; 

        alert(lead_id);
        var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            scrollX:true,
            ajax: "{{ url('lead_site_details')}}/" + lead_id, 
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'roof_no',
                    name: 'roof_no'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },
            ],
        });

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

        if (lead_id) {
            $.ajax({
                url: "{{ url('lead_site_details') }}/" + lead_id,
                type: "GET",
                dataType: 'json',
                success: function(data) {
                    console.log(data);
                    $('#dataForm').trigger("reset");
                    $('#facing_south').val(data.facing_south);
                    $('#facing_north').val(data.facing_north);
                    $('#facing_west').val(data.facing_west);
                    $('#roof_layout').val(data.roof_layout);
                    $('#roof_no').val(data.roof_no);
                    $('#roof_total').val(data.roof_total);
                    $('#building_height').val(data.building_height);
                    $('#roof_inclination').val(data.roof_inclination);
                    $('#roof_material').val(data.roof_material);
                    $('#roof_profile').val(data.roof_profile);
                    $('#roof_age').val(data.roof_age);
                    $('#shade_free_area').val(data.shade_free_area);
                    $('#availability_water').val(data.availability_water);
                    $('#permanent_access').val(data.permanent_access);
                    $('#vertical_expansion').val(data.vertical_expansion);
                    $('#mother_slab').val(data.mother_slab);
                    $('#centralized_earthing').val(data.centralized_earthing);
                    $('#availability_electricity').val(data.availability_electricity);
                    $('#foundation_size').val(data.foundation_size);
                    $('#earthing_location').val(data.earthing_location);
                    $('#roof_damage').val(data.roof_damage);
                    $('#water_logging').val(data.water_logging);
                    $('#south_obstruction').val(data.south_obstruction);

                },
                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: {
                stage_id_fk: 'required',
                first_name: 'required',
                phone: 'required',
            },
            messages: {
                stage_id_fk: "Please Select Stage.",
                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.replace("{{ url('leads') }}");
                            });
                    },
                    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');
                    }
                });
            }
        });
    }
</script>
@endsection