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

@php
$yes_no_options = ['Yes' => 'Yes', 'No' => 'No' ];
@endphp

<style type="text/css">
    .bs-vertical-wizard {
        border-right: 1px solid #eaecf1;
        padding-bottom: 50px;
    }

    .bs-vertical-wizard ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .bs-vertical-wizard ul>li {
        display: block;
        position: relative;
    }

    .bs-vertical-wizard ul>li>div {
        display: block;
        padding: 10px 10px 10px 40px;
        color: #333c4e;
        font-size: 17px;
        font-weight: 400;
        letter-spacing: .8px;
    }


    .bs-vertical-wizard ul>li>div:before {
        content: '';
        position: absolute;
        width: 1px;
        height: calc(100% - 25px);
        background-color: #bdc2ce;
        left: 13px;
        bottom: -9px;
        z-index: 3;
    }

    .bs-vertical-wizard ul>li>div .ico {
        pointer-events: none;
        font-size: 18px;
        position: absolute;
        left: 5px;
        top: 12px;
        z-index: 2;
    }

    .bs-vertical-wizard ul>li>div:after {
        content: '';
        position: absolute;
        border: 2px solid #bdc2ce;
        border-radius: 50%;
        top: 14px;
        left: 6px;
        width: 16px;
        height: 16px;
        z-index: 3;
    }

    .bs-vertical-wizard ul>li>div .desc {
        display: block;
        color: #78797c;
        font-size: 12px;
        /*font-weight: 400;*/
        line-height: 1.8;
        height: auto !important;
        letter-spacing: .8px;
        padding: 10px;
        background-color: #fff9dd;
        margin-bottom: 8px;
        border-radius: 10px;
    }

    .bs-vertical-wizard ul>li.complete>div:before {
        background-color: #5cb85c;
        opacity: 1;
        height: calc(100% - 25px);
        bottom: -9px;
    }

    .bs-vertical-wizard ul>li.complete>div:after {
        display: none;
    }

    .bs-vertical-wizard ul>li>div .ico.ico-green {
        color: #5cb85c;
    }


    .bs-vertical-wizard ul>li>a {
        display: block;
        padding: 10px 10px 10px 40px;
        color: #333c4e;
        font-size: 17px;
        font-weight: 400;
        letter-spacing: .8px;
    }

    .bs-vertical-wizard ul>li>a:before {
        content: '';
        position: absolute;
        width: 1px;
        height: calc(100% - 25px);
        background-color: #bdc2ce;
        left: 13px;
        bottom: -9px;
        z-index: 3;
    }

    .bs-vertical-wizard ul>li>a .ico {
        pointer-events: none;
        font-size: 14px;
        position: absolute;
        left: 10px;
        top: 15px;
        z-index: 2;
    }

    .bs-vertical-wizard ul>li>a:after {
        content: '';
        position: absolute;
        border: 2px solid #bdc2ce;
        border-radius: 50%;
        top: 14px;
        left: 6px;
        width: 16px;
        height: 16px;
        z-index: 3;
    }

    .bs-vertical-wizard ul>li>a .desc {
        display: block;
        color: #bdc2ce;
        font-size: 11px;
        font-weight: 400;
        line-height: 1.8;
        letter-spacing: .8px;
        height: auto !important;
    }

    .bs-vertical-wizard ul>li.complete>a:before {
        background-color: #5cb85c;
        opacity: 1;
        height: calc(100% - 25px);
        bottom: -9px;
    }

    .bs-vertical-wizard ul>li.complete>a:after {
        display: none;
    }

    .bs-vertical-wizard ul>li.locked>a:after {
        display: none;
    }

    .bs-vertical-wizard ul>li:last-child>a:before {
        display: none;
    }

    .bs-vertical-wizard ul>li.complete>a .ico {
        left: 8px;
    }

    .bs-vertical-wizard ul>li>a .ico.ico-green {
        color: #5cb85c;
    }

    .bs-vertical-wizard ul>li>a .ico.ico-muted {
        color: #bdc2ce;
    }

    .bs-vertical-wizard ul>li.current {
        background-color: #fff;
    }

    .bs-vertical-wizard ul>li.current>a:before {
        background-color: #ffe357;
        opacity: 1;
    }

    .bs-vertical-wizard ul>li.current>a:after {
        border-color: #ffe357;
        background-color: #ffe357;
        opacity: 1;
    }

    .bs-vertical-wizard ul>li.current:after,
    .bs-vertical-wizard ul>li.current:before {
        left: 100%;
        top: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .bs-vertical-wizard ul>li.current:after {
        border-color: rgba(255, 255, 255, 0);
        border-left-color: #fff;
        border-width: 10px;
        margin-top: -10px;
    }

    .bs-vertical-wizard ul>li.current:before {
        border-color: rgba(234, 236, 241, 0);
        border-left-color: #eaecf1;
        border-width: 11px;
        margin-top: -11px;
    }
</style>


<style>
    a {
        color: #f96332;
    }

    a:hover,
    a:focus {
        color: #f96332;
    }

    p {
        line-height: 1.61em;
        font-weight: 300;
        font-size: 1.2em;
    }

    .category {
        text-transform: capitalize;
        font-weight: 700;
        color: #9A9A9A;
    }

    .nav-item .nav-link,
    .nav-tabs .nav-link {
        -webkit-transition: all 300ms ease 0s;
        -moz-transition: all 300ms ease 0s;
        -o-transition: all 300ms ease 0s;
        -ms-transition: all 300ms ease 0s;
        transition: all 300ms ease 0s;
    }

    .card a {
        -webkit-transition: all 150ms ease 0s;
        -moz-transition: all 150ms ease 0s;
        -o-transition: all 150ms ease 0s;
        -ms-transition: all 150ms ease 0s;
        transition: all 150ms ease 0s;
    }


    .nav-tabs {
        border: 0;
        margin: 15px 0.7rem;
    }

    .nav-tabs:not(.nav-tabs-neutral)>.nav-item>.nav-link.active {
        box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.3);
    }

    .card .nav-tabs {
        border-top-right-radius: 0.1875rem;
        border-top-left-radius: 0.1875rem;
    }

    .nav-tabs>.nav-item>.nav-link {
        color: #888888;
        margin: 0;
        margin-right: 5px;
        background-color: transparent;
        border: 1px solid transparent;
        border-radius: 30px;
        font-size: 14px;
        padding: 10px 20px;
        line-height: 1.5;
    }

    .nav-tabs>.nav-item>.nav-link:hover {
        background-color: transparent;
    }

    .nav-tabs>.nav-item>.nav-link.active {
        /* background-color: #444; */
        background: linear-gradient(to bottom right, #9e88f5 0%, #6259ca 100%);
        border-radius: 30px;
        color: #FFF;
    }

    .nav-tabs>.nav-item>.nav-link i.now-ui-icons {
        font-size: 14px;
        position: relative;
        top: 1px;
        margin-right: 3px;
    }

    .nav-tabs.nav-tabs-neutral>.nav-item>.nav-link {
        color: #FFFFFF;
    }

    .nav-tabs.nav-tabs-neutral>.nav-item>.nav-link.active {
        background-color: rgba(255, 255, 255, 0.2);
        color: #FFFFFF;
    }

    .card {
        border: 0;
        border-radius: 0.1875rem;
        display: inline-block;
        position: relative;
        width: 100%;
        /* margin-bottom: 30px; */
        box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
    }

    .card .card-header {
        background-color: transparent;
        border-bottom: 0;
        background-color: transparent;
        border-radius: 0;
        padding: 0;
    }

    .card[data-background-color="orange"] {
        background-color: #f96332;
    }

    .card[data-background-color="red"] {
        background-color: #FF3636;
    }

    .card[data-background-color="yellow"] {
        background-color: #FFB236;
    }

    .card[data-background-color="blue"] {
        background-color: #2CA8FF;
    }

    .card[data-background-color="green"] {
        background-color: #15b60d;
    }

    [data-background-color="orange"] {
        background-color: #e95e38;
    }

    [data-background-color="black"] {
        background-color: #2c2c2c;
    }

    [data-background-color]:not([data-background-color="gray"]) {
        color: #FFFFFF;
    }

    [data-background-color]:not([data-background-color="gray"]) p {
        color: #FFFFFF;
    }

    [data-background-color]:not([data-background-color="gray"]) a:not(.btn):not(.dropdown-item) {
        color: #FFFFFF;
    }

    [data-background-color]:not([data-background-color="gray"]) .nav-tabs>.nav-item>.nav-link i.now-ui-icons {
        color: #FFFFFF;
    }

    @media screen and (max-width: 768px) {

        .nav-tabs {
            display: inline-block;
            width: 100%;
            padding-left: 100px;
            padding-right: 100px;
            text-align: center;
        }

        .nav-tabs .nav-item>.nav-link {
            margin-bottom: 5px;
        }
    }
</style>



<style type="text/css">
    p {
        margin-bottom: 7px;
    }

    .green {
        color: green;
        font-size: 14px;
    }
</style>

<!-- PAGE-HEADER -->
<div class="page-header">
    <div>
        <h1>Site / Roof <small>Details</small></h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="#">Leads</a></li>
            <li class="breadcrumb-item active" aria-current="page">Roof Lists</li>
        </ol>
    </div>

    <div class="float-end">
        <a class="btn btn-primary float-right" href="{{ url('lead/sites/'.$data->lead_id) }}"> <i class="fa fa-arrow mb-3-left"></i> Back to Site List</a>
    </div>

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

<div class="content mt-3">

    @if ($message = Session::get('success'))
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
        <strong>Greate Job!</strong> {{ $message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif


    <div class="row mb-3">
        <div class="col-md-12 ml-auto mr-auto">

            <!-- Nav tabs -->
            <div class="card">
                <div class="card-header">
                    <ul class="nav nav-tabs justify-content-center" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" href="{{ url('lead/site_details/' . $data->id) }}">
                                Site / Roof Details
                            </a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="{{ url('site/bom/' . $data->id) }}">
                                BOM
                            </a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="{{ url('site/costing/' . $data->id) }}">
                                Costing Management
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <hr class="mt-3">
                    <p class="lead mb-0 fs-4 fw-bold py-2">Roof Information Form</p>
                    <form id="dataForm" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="lead_id" value="{{ $data->lead_id }}">
                        <input type="hidden" name="site_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 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" value="{{ $data->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="">Select Option</option>
                                    <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="">Select Option</option>
                                    <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="">Select Option</option>
                                    <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" value="{{ $data->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>
                                    @foreach($yes_no_options as $key => $option)
                                    {{ Form::radio('shade_free_area', $option, !empty($data) && !empty($data->shade_free_area) && $data->shade_free_area == $key ? true : '') }} {{$option}} &nbsp; &nbsp; &nbsp;
                                    @endforeach
                                </div>

                            </div>


                            <div class="col-md-4" id="access_section">
                                <label class="col-form-label">Availability of Permanent Access to Roof</label>
                                <div>
                                    @foreach($yes_no_options as $key => $option)
                                    {{ Form::radio('permanent_access', $option, !empty($data) && !empty($data->permanent_access) && $data->permanent_access == $key ? true : '') }} {{$option}} &nbsp; &nbsp; &nbsp;
                                    @endforeach
                                </div>
                            </div>

                            <div class="col-md-4" id="access_section">
                                <label class="col-form-label">Plans for vertical expansion</label>
                                <div>
                                    @foreach($yes_no_options as $key => $option)
                                    {{ Form::radio('vertical_expansion', $option, !empty($data) && !empty($data->vertical_expansion) && $data->vertical_expansion == $key ? true : '') }} {{$option}} &nbsp; &nbsp; &nbsp;
                                    @endforeach
                                </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>
                                    @foreach($yes_no_options as $key => $option)
                                    {{ Form::radio('availability_water', $option, !empty($data) && !empty($data->availability_water) && $data->availability_water == $key ? true : '') }} {{$option}} &nbsp; &nbsp; &nbsp;
                                    @endforeach
                                </div>
                            </div>

                            <div class="col-md-4" id="access_section">
                                <label class="col-form-label">Availability of Electricity connection</label>
                                <div>
                                    @foreach($yes_no_options as $key => $option)
                                    {{ Form::radio('availability_electricity', $option, !empty($data) && !empty($data->availability_electricity) && $data->availability_electricity == $key ? true : '') }} {{$option}} &nbsp; &nbsp; &nbsp;
                                    @endforeach
                                </div>
                            </div>

                            <div class="col-md-4" id="access_section">
                                <label class="col-form-label">Any slope / sagging / visible damage to roof </label>
                                <div>
                                    @foreach($yes_no_options as $key => $option)
                                    {{ Form::radio('roof_damage', $option, !empty($data) && !empty($data->roof_damage) && $data->roof_damage == $key ? true : '') }} {{$option}} &nbsp; &nbsp; &nbsp;
                                    @endforeach

                                </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>
                                    @foreach($yes_no_options as $key => $option)
                                    {{ Form::radio('water_logging', $option, !empty($data) && !empty($data->water_logging) && $data->water_logging == $key ? true : '') }} {{$option}} &nbsp; &nbsp; &nbsp;
                                    @endforeach

                                </div>
                            </div>

                            <div class="col-md-4" id="access_section">
                                <label class="col-form-label">Can mother slab be exposed?</label>
                                <div>
                                    @foreach($yes_no_options as $key => $option)
                                    {{ Form::radio('mother_slab', $option, !empty($data) && !empty($data->mother_slab) && $data->mother_slab == $key ? true : '') }} {{$option}} &nbsp; &nbsp; &nbsp;
                                    @endforeach

                                </div>
                            </div>

                            <div class="col-md-4" id="access_section">
                                <label class="col-form-label">Can earthing be centralized with primary point </label>
                                <div>

                                    @foreach($yes_no_options as $key => $option)
                                    {{ Form::radio('centralized_earthing', $option, !empty($data) && !empty($data->centralized_earthing) && $data->centralized_earthing == $key ? true : '') }} {{$option}} &nbsp; &nbsp; &nbsp;
                                    @endforeach

                                </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" value="{{ $data->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" value="{{ $data->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" value="{{ $data->earthing_location }}">
                            </div>
                        </div>

                        <div class="py-3 d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary" id="saveBtn">
                                {{ !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).removeClass('open');
        });

        $('#dataForm').on('submit', function(e) {
            e.preventDefault(); // ⛔️ prevent default submission

            let form = this;

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

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

            $.ajax({
                url: "{{ url('site/details/store') }}",
                type: "POST",
                data: new FormData(form),
                processData: false,
                contentType: false,
                success: function(data) {
                    $('#saveBtn').html('Save Details');
                    if (data.success) {
                        swal({
                            title: "Good job!",
                            text: data.msg,
                            icon: "success",
                        }).then(() => {
                            console.log(data);
                            window.location.href = '/site/bom/' + data.site_id;
                        });
                    }
                },
                error: function(data) {
                    $('#saveBtn').html('Save Details');
                    if (data.status == 422) {
                        var x = data.responseJSON;
                        $.each(x.errors, function(index, value) {
                            $("#" + index).addClass("is-invalid");
                            $("#" + index + "-error").html(value[0]);
                        });
                    }
                }
            });
        });

    });
</script>
@endsection