@extends('layouts/contentLayoutMaster')
@section('title', 'Repair & Maintenance Plans')

@section('vendor-style')
    <!-- vendor css files -->
    <link rel="stylesheet" href="{{ asset('vendors/css/pickers/pickadate/pickadate.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/pickers/flatpickr/flatpickr.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/forms/select/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/extensions/sweetalert2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('/css/custom.css') }}">
@endsection

@section('page-style')
    <link rel="stylesheet" href="{{ asset('css/base/plugins/forms/pickers/form-flat-pickr.css') }}">
    <link rel="stylesheet" href="{{ asset('css/base/plugins/forms/pickers/form-pickadate.css') }}">
    <link rel="stylesheet" href="{{ asset('css/base/style.css') }}">
    <link href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" rel="stylesheet">

  <style>
    .visit-flow {
        gap: 20px;
        margin-top: 20px;
        padding: 10px;
        border: 2px dashed #ccc;
        min-height: 140px;
        overflow-x: auto;
    }

    .visit-icon {
        /* background-color: #e9f7fe; */
        text-align: center;
        padding: 5px;
        cursor: move;
        position: relative;
        flex-shrink: 0;
        min-height: 125px;
        position: relative;
    }

    .visit-icon {
          display: flex;
    /* align-items: start; */
    justify-content: center;
    flex-direction: column;
    font-size: 40px;
    color: #7367f0;
     /* border: 2px solid; */
    /*border-radius: 5px; */
    width: 150px;
    align-items: center;
    }

    .visit-box small {
        margin-top: 6px;
        font-size: 13px;
        word-break: break-word;
    }

    .arrow-icon
    {
            /* margin-left: 20px;
            margin-top: 10px; */

            position: absolute;
    top: 15%;
    right: -21px;
    }

    .visit-sub-icon
    {
           /* position: relative; */
        display: flex;
        justify-content: start;
    }

    /* .visit-sub-icon:last-child .arrow-icon {
        display: none;
    } */

    #visitFlowContainer .visit-icon:last-child .arrow-icon {
        display: none;
    }
    .fa-building{
        font-size: 55px;
    }

    .small-heading{

        max-width: 125px !important;
        font-size: 12px;
        font-weight: 400;
        margin-top: 15px;
        text-align: center;
    }

    .delete-icon
    {
        position: absolute;
        cursor: pointer;
        /* margin-left: 10px; */
        top: 1px;
        right: 37px;
        font-size: 20px;
    }
</style>
@endsection

@section('content')
    <!-- Basic multiple Column Form section start -->
    <section id="multiple-column-form">
        <div class="row">
            <div class="col-12">
                {{-- <h4 class="card-title my-2">Add Dispatch Point</h4> --}}
                <div class="card">
                    <div class="card-header f-flex flex-column align-items-start mb-0">
                        <h4 class="text-primary">
                            Create Visit Plan
                        </h4>
                    </div>
                    <div class="card-body">
                        @if ($message = Session::get('success'))
                            <div class="demo-spacing-0 my-2">
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    <div class="alert-body">{{ $message }}</div>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"
                                        aria-label="Close"></button>
                                </div>
                            </div>
                        @endif
                        @if ($errorMessage = Session::get('errorMessage'))
                            <div class="demo-spacing-0 my-2">
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <div class="alert-body">{{ $errorMessage }}</div>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"
                                        aria-label="Close"></button>
                                </div>
                            </div>
                        @endif
                        <form id="visitPlanForm" method="POST" action="{{ route('repair.visit-plans.store') }}">
                            @csrf
                            <div class="row">
                                <div class="col-md-3 col-6 mb-1">
                                    <label class="form-label">Type</label>
                                    <div>
                                        <select name="parent" id="parent" class="form-control select2" required onchange="getSelectedParent()">
                                            <option value="" selected="" disabled="">Select Facility Type</option>
                                            <option value="plant">Plant</option>
                                            <option value="ao">Area Office</option>
                                            <option value="dp">Dispatch Point</option>
                                            <option value="mcc">Collection Point</option>
                                            <option value="mcc_plant">Collection Point (Plant)</option>
                                            <option value="building">Building (Plant)</option>
                                            <option value="ao_building">Building (Area Office)</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3 col-6 mb-1">
                                    <label class="form-label">Plan Name</label>
                                    <input type="text" name="name" placeholder="Enter Visit Plan Name"  class="form-control" required>
                                </div>
                                 <div class="col-md-3 col-6 ">
                                    <label class="form-label">Select User</label>
                                    <div class="mb-1">
                                        <select name="user" id="userr" class="select2 form-select" required>
                                            <option value="" selected="" disabled="">Select User</option>
                                            @foreach ($users as $user)
                                                <option value="{{$user->_id}}">{{$user->user_name}} - ( {{ $user->roles->first()->name }} )</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-1 d-flex justify-content-start align-items-center p-0 m-0">
                                    <span class="spinner-border spinner-border-md spinner" style="margin-top:3px" role="status" aria-hidden="true"></span>
                                </div>
                            </div>
                            
                            <div class="row mb-1">
                                  @include('content._partials._sections.repair_maintenance_filter')
                            </div>
                            <div class="row mb-2" id="visit_date_input">
                                <div class="col-md-3 col-6">
                                    <label class="form-label">Visit Date</label>
                                    <input type="date" name="visit_date" id="visit_date" placeholder="" class="form-control" required>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-3">
                                    <button type="button" id="addFacility" class="btn btn-success">
                                        Add
                                        <span id="btnSpinner" class="spinner-border spinner-border-sm d-none ms-1" role="status" aria-hidden="true"></span>
                                    </button>
                                </div>
                            </div>

                            {{-- <div class="mb-3">
                                <label for="parent_type">Parent Type</label>
                                <select class="form-control" name="parent_type" id="parent_type" required>
                                    <option value="">Select</option>
                                    <option value="area_office">Area Office</option>
                                    <option value="plant">Plant</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="parent_id">Select Parent</label>
                                <select class="form-control" name="parent_id" id="parent_id" required>
                                    <!-- To be filled dynamically via JS -->
                                </select>
                            </div> --}}

                            {{-- <div class="mb-3">
                                <label>Select Facilities</label>
                                <div id="facilitiesList">
                                    <!-- Checkbox list populated dynamically -->
                                </div>
                            </div> --}}

                             <div class="mb-3 mt-4">
                                <label>Visit Flow Diagram</label>
                                <div id="visitFlowContainer" class="visit-flow d-flex flex-wrap">
                                    
                                </div>
                            </div>

                            <!-- hidden input for selected facilities -->
                            <input type="hidden" name="facilities_data" id="facilitiesDataInput">

                            <button type="submit" class="btn btn-primary">Create Visit Plan</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('vendor-script')
    <!-- vendor files -->
    <script src="{{ asset('vendors/js/pickers/pickadate/picker.js') }}"></script>
    <script src="{{ asset('vendors/js/pickers/pickadate/picker.date.js') }}"></script>
    <script src="{{ asset('vendors/js/pickers/pickadate/picker.time.js') }}"></script>
    <script src="{{ asset('vendors/js/pickers/pickadate/legacy.js') }}"></script>
    <script src="{{ asset('vendors/js/pickers/flatpickr/flatpickr.min.js') }}"></script>
    <script src="{{ asset('vendors/js/forms/select/select2.full.min.js') }}"></script>
    <script src="{{ asset('vendors/js/extensions/sweetalert2.all.min.js') }}"></script>
    <script src="{{ asset('/js/custom.js') }}"></script>
@endsection
@section('page-script')
    <script src="{{ asset('js/scripts/forms/pickers/form-pickers.js') }}"></script>
    <script src="{{ asset('js/scripts/forms/form-select2.js') }}"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
        {{-- <script src="https://rawgit.com/RobinHerbots/Inputmask/4.x/dist/jquery.inputmask.bundle.js"></script> --}}
        <script src="https://cdn.jsdelivr.net/npm/inputmask@5.0.8/dist/jquery.inputmask.min.js"></script>

<script>

   let selectedFacilities = [];

     $('#addFacility,#visit_date_input').hide();

     $('.plant,.department,.section,.zone,.ao,.cp,.bd,.dp,.spinner').hide();
        function getSelectedParent()
        {
            var parentValue = $('#parent').val();

            $('.plant,.department,.section,.zone,.ao,.cp,.bd,.dp').hide();
            $('.spinner').show();

            if (parentValue !== "") {
                
                $('#visit_date').val('');

                // $('.plant,.department,.section,.zone,.ao,.cp,.bd,.dp').show();
                setTimeout(function() {
                    $('.plant, .department, .section, .zone, .ao, .cp, .bd, .dp').show();
                }, 700);

                $('#plant_search,#department_search,#section_search,#zone_search,#area_office_search,#collection_point_search,#dispatch_point_search,#building_search,#meter_no').val('');
                $('#plant_search,#department_search,#section_search,#zone_search,#area_office_search,#collection_point_search,#dispatch_point_search,#building_search').trigger('change'); 


                

                if(parentValue == "plant")
                {
                    setTimeout(function() {
                    $('.department,.section,.zone,.ao,.cp,.dp,.bd,.spinner').hide();
                    }, 700);
                    $('#plant_search').prop('disabled', false);
                    $('#dispatch_point_search,#collection_point_search,#building_search').prop('disabled', true);   
                }
                if(parentValue == "ao")
                {
                    setTimeout(function() {
                        $('.dp,.cp,.bd,.spinner').hide();
                    }, 700);

                    $('#area_office_search').prop('disabled', false);
                    $('#dispatch_point_search,#collection_point_search,#building_search').prop('disabled', true);   
                }
                else if(parentValue == "dp")
                {   
                    setTimeout(function() {
                    $('.cp,.bd,.spinner').hide();
                    }, 700);
                    $('#dispatch_point_search').prop('disabled', false);
                    $('#building_search,#collection_point_search').prop('disabled', true);
                }
                else if(parentValue == "mcc")
                {
                    setTimeout(function() {
                    $('.dp,.bd,.spinner').hide();
                    }, 700);
                    $('#collection_point_search').prop('disabled', false);
                    $('#dispatch_point_search,#building_search').prop('disabled', true);   
                } 
                else if(parentValue == "building")
                {
                    setTimeout(function() {
                    $('.department,.section,.zone,.ao,.cp,.dp,.spinner').hide();
                    }, 700);
                    $('#building_search').prop('disabled', false);
                    $('#dispatch_point_search,#collection_point_search').prop('disabled', true);   
                }
                 else if(parentValue == "mcc_plant")
                {
                    setTimeout(function() {
                    $('.department,.section,.zone,.ao,.bd,.dp,.spinner').hide();
                    }, 700);
                     $('#collection_point_search').prop('disabled', false);
                    $('#dispatch_point_search,#building_search').prop('disabled', true);   
                }
                else if(parentValue == "ao_building")
                {
                    setTimeout(function() {
                    $('.cp,.dp,.spinner').hide();
                    }, 700);
                    $('#building_search').prop('disabled', false);
                    $('#dispatch_point_search,#collection_point_search').prop('disabled', true);   
                }
                else
                {
                    $('.spinner').hide();
                    $('#department_search,#section_search,#zone_search,#area_office_search,#collection_point_search,#dispatch_point_search,#building_search').prop('disabled', false);
                }

                $('#addFacility,#visit_date_input').show();

            }
        }


    $('#addFacility').on('click', function () {

        var parentValue = $('#parent').val();

         if (parentValue !== "") {
                
            let selectedId = null;
            let selectedName = '';
            let selectedType = '';

            let visit_date = $('#visit_date').val();
            let user_id = $('#userr').val();
  
           if (parentValue === "plant") {
                selectedId = $('#plant_search').val();
                selectedName = $('#plant_search option:selected').text();
                selectedType = 'plant';
            } else if (parentValue === "ao") {
                selectedId = $('#area_office_search').val();
                selectedName = $('#area_office_search option:selected').text();
                selectedType = 'ao';
            } else if (parentValue === "dp") {
                selectedId = $('#dispatch_point_search').val();
                selectedName = $('#dispatch_point_search option:selected').text();
                selectedType = 'dp';
            } else if (parentValue === "mcc") {
                selectedId = $('#collection_point_search').val();
                selectedName = $('#collection_point_search option:selected').text();
                selectedType = 'mcc';
            } else if (parentValue === "building") {
                selectedId = $('#building_search').val();
                selectedName = $('#building_search option:selected').text();
                selectedType = 'building';
            } else if (parentValue === "mcc_plant") {
                selectedId = $('#collection_point_search').val();
                selectedName = $('#collection_point_search option:selected').text();
                selectedType = 'mcc_plant';
            } else if (parentValue === "ao_building") {
                selectedId = $('#building_search').val();
                selectedName = $('#building_search option:selected').text();
                selectedType = 'ao_building';
            }

            if(!visit_date || visit_date === "" || visit_date === null)
            {
                alert("Visit Date cant be empty !");
                return; // prevent pushFacilities from running
            }

            if(!user_id || user_id === "" || user_id === null)
            {
                alert("User cant be empty !");
                return; // prevent pushFacilities from running
            }

            // Validate selectedId
            if (!selectedId || selectedId === "") 
            {
                alert("Invalid parameters: Please select a valid facility.");
                return; // prevent pushFacilities from running
            }

            // Call function only if valid
            pushFacilities(selectedId, selectedName, selectedType, visit_date, user_id);

        }
        else
        {
            alert('Facility Type cant be Empty !');
        }

    });


    function pushFacilities(id, name, type, date, user_id) {
        
        // const facility = { id, name, type, date };
       
        // selectedFacilities.push(facility); // allows duplicates
        
        // renderVisitFlow();
        
        $('#btnSpinner').removeClass('d-none'); // Show spinner
        $('#submitBtn').prop('disabled', true); // Disable button

        $.ajax({
            // url: '/repair/check-latest-visit-date',
            url: '{{ route('repair.check-latest-visit-date') }}',
            method: 'POST',
            data: {
                _token: $('meta[name="csrf-token"]').attr('content'),
                new_date: date,
                user_id: user_id
            },
            success: function(response) {
                if (response.allow) {

                    const incomingDate = new Date(date); // parse incoming date
                    const isGreater = selectedFacilities.every(facility => new Date(facility.date) < incomingDate);

                    if (isGreater) {
                        const facility = { id, name, type, date };
                        selectedFacilities.push(facility);
                        renderVisitFlow();
                    } 
                    else 
                    {
                        alert("Date must be greater than all existing facility dates.");
                    }

                } else {
                    alert("The selected date must be greater than the last visit date.");
                }
            },
            error: function(xhr) {
                alert("Something went wrong. Please try again.");
            },
             complete: function() {
                $('#btnSpinner').addClass('d-none'); // Hide spinner
                $('#submitBtn').prop('disabled', false); // Re-enable button
            }
        });

        
    }


      function renderVisitFlow() {
        const $container = $('#visitFlowContainer');
        $container.empty();
       
        selectedFacilities.forEach((facility, index) => {
            const visitBox = $(`
                <div class="visit-icon" data-id="${facility.id}" data-name="${facility.name}" data-type="${facility.type}" data-date="${facility.date}">
                    <div class="visit-sub-icon">
                        <i class="fas fa-building"></i>
                        <i class="fas fa-arrow-right arrow-icon"></i>
                        <i class="fas fa-times delete-icon text-danger" data-index="${index}"  id="delete-icon" title="Remove"></i>
                    </div>
                    <span class="small-heading">${facility.name}</span>
                    <span class="small-heading text-secondary mt-0 pt-0">${facility.date}</span>
                </div>
            `);
            $container.append(visitBox);
        });
        enableSortable();
        $("#visitFlowContainer").sortable("destroy");
    }

    function enableSortable() {
        $("#visitFlowContainer").sortable({
            items: ".visit-icon",
            tolerance: "pointer",
            stop: function () {
                const newOrder = [];
                $('#visitFlowContainer .visit-icon').each(function () {
                    const id = $(this).data('id');
                    const name = $(this).data('name');
                    const type = $(this).data('type');
                    const date = $(this).data('date');
                    newOrder.push({ id, name, type, date });
                });

                selectedFacilities = newOrder;
            }
        });

        console.log(selectedFacilities);
    }

  $(document).on('click', '.delete-icon', function() {
    const index = $(this).data('index');
    
    if (index !== undefined && index >= 0) {
        selectedFacilities.splice(index, 1);  // Remove by array index
        renderVisitFlow(); // Re-render updated list
    }
});

    $('#visitPlanForm').on('submit', function (e) {
        const facilitiesArray = Array.from(selectedFacilities.values());
        if(facilitiesArray.length === 0)
        {
            alert("Please add at least one facility to the visit plan.");
            e.preventDefault(); // Prevent form submission
            return;
        }
        $('#facilitiesDataInput').val(JSON.stringify(facilitiesArray));
    });

</script>


{{-- <script>
$(function () {
    const parents = {
        area_office: [
            { id: "ao1", name: "Area Office 1" },
            { id: "ao2", name: "Area Office 2" }
        ],
        plant: [
            { id: "p1", name: "Plant 1" },
            { id: "p2", name: "Plant 2" }
        ]
    };

    const facilities = {
        ao1: [
            { id: "b1", name: "Building A" },
            { id: "dp1", name: "Dispatch Point X" }
        ],
        ao2: [
            { id: "b3", name: "Building C" },
            { id: "cp3", name: "Collection Point Y" }
        ],
        p1: [
            { id: "b2", name: "Building B" },
            { id: "cp1", name: "Collection Point Z" }
        ],
        p2: [
            { id: "b4", name: "Building D" },
            { id: "dp2", name: "Dispatch Point W" }
        ]
    };

    const selectedFacilities = new Map();

    $('#parent_type').on('change', function () {
        const type = $(this).val();
        const options = parents[type] || [];
        $('#parent_id').empty().append('<option value="">Select</option>');
        options.forEach(p => {
            $('#parent_id').append(`<option value="${p.id}">${p.name}</option>`);
        });
    });

    $('#parent_id').on('change', function () {
        const id = $(this).val();
        const facs = facilities[id] || [];
        facs.forEach(f => {
            if (!$(`#fac-${f.id}`).length) {
                $('#facilitiesList').append(`
                    <div>
                        <input type="checkbox" class="facility-checkbox" data-id="${f.id}" data-name="${f.name}" id="fac-${f.id}">
                        <label for="fac-${f.id}">${f.name}</label>
                    </div>
                `);
            }
        });
    });

    $(document).on('change', '.facility-checkbox', function () {
        const id = $(this).data('id');
        const name = $(this).data('name');

        if (this.checked) {
            selectedFacilities.set(id, name);
        } else {
            selectedFacilities.delete(id);
        }

        renderVisitFlow();
    });

    function renderVisitFlow() {
        const $container = $('#visitFlowContainer');
        $container.empty();

        for (const [id, name] of selectedFacilities.entries()) {
            $container.append(`
                <div class="visit-icon">
                    <div class="visit-sub-icon">
                        <i class="fas fa-building"></i>
                        <i class="fas fa-arrow-right arrow-icon"></i>
                    </div>
                    <small class="small-heading">${name}</small>
                    
                </div>
            `);
        }

        enableSortable();
    }

    function enableSortable() {
        $("#visitFlowContainer").sortable({
            items: ".visit-icon",
            tolerance: "pointer",
            stop: function () {
                const newOrder = new Map();
                $('#visitFlowContainer .visit-icon').each(function () {
                    const id = $(this).data('id');
                    const name = $(this).data('name');
                    newOrder.set(id, name);
                });
                selectedFacilities.clear();
                newOrder.forEach((name, id) => selectedFacilities.set(id, name));
            }
        });
    }

    $('#visitPlanForm').on('submit', function () {
        const visits = [];
        $('#visitFlowContainer .visit-icon').each(function (i) {
            visits.push({
                facility_id: $(this).data('id'),
                sequence: i + 1
            });
        });
        $('#visitsInput').val(JSON.stringify(visits));
    });
});
</script> --}}
@endsection