@extends('layouts.app')

@section('content')

@php
$months = [
1 => 'Ianuarie',
2 => 'Februarie',
3 => 'Martie',
4 => 'Aprilie',
5 => 'Mai',
6 => 'Iunie',
7 => 'Iulie',
8 => 'August',
9 => 'Septembrie',
10 => 'Octombrie',
11 => 'Noiembrie',
12 => 'Decembrie',
];
@endphp

<div class="pagetitle">
    <h1>Utilitati</h1>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('home')}}">Acasa</a></li>
            <li class="breadcrumb-item">Utilitati</li>
        </ol>
    </nav>
</div>

<section class="section">
    <div class="d-flex flex-column w-100">
        <div class="d-flex w-100">
            <label class="d-flex flex-column w-100">
                Alege agentie
                <select name="agency" id="selectAgencyUtilities" class="form-control">
                    <option value="">Alege agentie</option>
                    @foreach ($branches as $branch)
                    <option value="{{ $branch->branch }}"> {{ $branch->name }} </option>
                    @endforeach
                </select>
            </label>
            <label class="d-flex flex-column w-100">
                Alege data inceput
                <input type="date" class="form-control" name="start_date" id="start_date_showing">
            </label>
            <label class="d-flex flex-column w-100">
                Alege data sfarsit
                <input type="date" class="form-control" name="end_date" id="end_date_showing">
            </label>
            <input type="hidden" id="utilities_value">
        </div>
        <div id="showErrorMessage" class="mt-3"></div>

        <div class="utitlities-buttons">
            <button class="btn btn-primary btn-utilities-to" id="utilities-apa">Apa</button>
            <button class="btn btn-danger btn-utilities-to" id="utilities-gaze">Gaze</button>
            <button class="btn btn-warning btn-utilities-to" id="utilities-curent">Curent</button>
            <button class="btn btn-success btn-utilities-to" id="utilities-salubritate">Salubritate</button>
            <button class="btn btn-info btn-utilities-to" id="utilities-intretinere">Intretinere</button>
        </div>
        @include('utilities.parts.water')

        @include('utilities.parts.gas')

        @include('utilities.parts.electricity')

        @include('utilities.parts.sanitation')

        @include('utilities.parts.maintenance')

    </div>
    <div id="errors_utilities_v2"></div>

</section>



@endsection

@push('js')

<script>
    $('#start_date_showing, #end_date_showing, #selectAgencyUtilities').change(function () {
        var lastClickedUtilitati = null;

        function getValueWithPattern(pattern) {
            for (var i = 0; i < localStorage.length; i++) {
                var key = localStorage.key(i);
                if (key.includes(pattern)) {
                    return key;
                }
            }
            return null;
        }

        var value = getValueWithPattern('isButtonClicked_');

        $("#utilities_value").val(value.replace('isButtonClicked_', ''))

        var startDate = $('#start_date_showing').val();
        var endDate = $('#end_date_showing').val();
        var agency = $('#selectAgencyUtilities').val();

        var clickedUtility = $('#utilities_value').val();

        $.ajax({
            url: '/verify-last-index',
            method: 'GET',
            data: {
                start_date: startDate,
                end_date: endDate,
                agency: agency,
                utility: clickedUtility
            },
            success: function (response) {
                if (response.status == 0) {
                    $("#waterSubmitButton").attr('disabled', true);
                    $("#showErrorMessage").html(response.message);
                } else if (response.status == 3) {
                    $("#contor_principal_input").attr('disabled', true);
                    $("#showErrorMessage").html(response.message);
                } else {
                    $("#waterSubmitButton").attr('disabled', false);
                    $("#contor_principal_input").attr('disabled', false);
                    $("#showErrorMessage").html('');
                }
            },
            error: function (xhr, status, error) {
                console.error(error.responseJSON.fail);
            }
        });
    });

    $('#start_date_showing').change(function () {
        var startDate = new Date($(this).val());
        var maxEndDate = new Date(startDate.getFullYear(), startDate.getMonth() + 1, 0);
        var formattedMaxEndDate = formatDate(maxEndDate);

        $('#end_date_showing').attr('max', formattedMaxEndDate);
        $("#end_date_showing").val(formattedMaxEndDate)
        $('.reading_date_input').attr({
            'min': $(this).val(),
            'max': formattedMaxEndDate
        });

        $("#end_date_showing").on('change', function () {
            $('.reading_date_input').attr({
                'max': $(this).val()
            });

            if ($(this).val() == '') {
                $('.reading_date_input').attr({
                    'max': formattedMaxEndDate
                });
            }
        });

        if ($('#end_date_showing').val() > formattedMaxEndDate) {
            $('#end_date_showing').val(formattedMaxEndDate);
        }
    });

    function formatDate(date) {
        var day = date.getDate();
        var month = date.getMonth() + 1;
        var year = date.getFullYear();

        if (day < 10) {
            day = '0' + day;
        }
        if (month < 10) {
            month = '0' + month;
        }

        return year + '-' + month + '-' + day;
    }

    function addWaterFile() {
        var container = $("#fileWaterIndex");
        var newInput =
            '<div><div class="d-flex w-100"><input type="file" class="form-control" name="waterIndexFiles[]" accept=".jpg, .jpeg, .png, .webp"><button type="button" class="btn btn-danger mt-2 ml-2" onclick="removeWaterFileIndex(this)"><i class="fa-solid fa-trash-can"></i></button></div></div>';
        container.append(newInput);
    }

    function removeWaterFileIndex(button) {
        $(button).parent().remove();
    }

    function addGasFiles() {
        var container = $("#fileGasIndex");
        var newInput =
            '<div><div class="d-flex w-100"><input type="file" class="form-control" name="gasIndexFiles[]" accept=".jpg, .jpeg, .png, .webp"><button type="button" class="btn btn-danger mt-2 ml-2" onclick="removeGasIndexFiles(this)"><i class="fa-solid fa-trash-can"></i></button></div></div>';
        container.append(newInput);
    }

    function removeGasIndexFiles(button) {
        $(button).parent().remove();
    }

    function addElectricityFiles() {
        var container = $("#fileElectricityIndex");
        var newInput =
            '<div><div class="d-flex w-100"><input type="file" class="form-control" name="electricityFileIndex[]" accept=".jpg, .jpeg, .png, .webp"><button type="button" class="btn btn-danger mt-2 ml-2" onclick="removeElectricityFiles(this)"><i class="fa-solid fa-trash-can"></i></button></div></div>';
        container.append(newInput);
    }

    function removeElectricityFiles(button) {
        $(button).parent().remove();
    }

    $(document).ready(function () {

        $("#gaxCititIndex").on('change', function () {
            if ($(this).prop('checked')) {
                $(this).val(1);
            } else {
                $(this).val(0);
            }
        });

        $("#curentIndexCitit").on('change', function () {
            if ($(this).prop('checked')) {
                $(this).val(1);
            } else {
                $(this).val(0);
            }
        });

        $("#start_date_showing").on("change", function () {
            var startDate = new Date($(this).val());

            $("#end_date_showing").attr("min", formatDate(startDate));
        });

        $("#end_date_showing").on("change", function () {
            var endDate = new Date($(this).val());

            $("#start_date_showing").attr("max", formatDate(endDate));
        });

        function formatDate(date) {
            var dd = String(date.getDate()).padStart(2, '0');
            var mm = String(date.getMonth() + 1).padStart(2, '0');
            var yyyy = date.getFullYear();
            return yyyy + '-' + mm + '-' + dd;
        }

        $("#selectAgencyUtilities").select2({
            height: '100%',
            width: 'resolve'
        });

        $("#month_sanitation").select2({
            height: '100%',
            width: 'resolve'
        });

        $("#month_maintenance").select2({
            height: '100%',
            width: 'resolve'
        });

        $("#selectAgencyUtilities").on("change", function () {
            $(".branch_id_hiddden").val($(this).val())
        });

        $("#start_date_showing").on("change", function () {
            $(".start_date_hidden").val($(this).val())
        });

        $("#end_date_showing").on("change", function () {
            $(".end_date_hidden").val($(this).val())
        });

        $('.btn-utilities-to').each(function () {

            var buttonId = $(this).attr('id');
            var divId = buttonId.replace('utilities-', '');
            var isButtonClicked = localStorage.getItem('isButtonClicked_' + divId) === 'true';

            $('#' + divId + '-div').css('display', isButtonClicked ? 'block' : 'none');

            $(this).toggleClass('clicked', isButtonClicked);

            $(this).click(function () {
                localStorage.clear();


                $('.utilities-div').not('#' + divId + '-div').hide();
                $('.btn').removeClass('clicked');

                $('#' + divId + '-div').toggle();

                $(this).toggleClass('clicked', $('#' + divId + '-div').is(':visible'));

                localStorage.setItem('isButtonClicked_' + divId, $('#' + divId + '-div').is(
                    ':visible'));

                var value = getValueWithPattern('isButtonClicked_');

                function getValueWithPattern(pattern) {
                    for (var i = 0; i < localStorage.length; i++) {
                        var key = localStorage.key(i);
                        if (key.includes(pattern)) {
                            return key;
                        }
                    }
                    return null;
                }

                var value = getValueWithPattern('isButtonClicked_');

                $("#utilities_value").val(value.replace('isButtonClicked_', ''))

                var utilityValue = getValueWithPattern('isButtonClicked_').replace(
                    'isButtonClicked_', '');


                var startDate = $('#start_date_showing').val();
                var endDate = $('#end_date_showing').val();
                var agency = $('#selectAgencyUtilities').val();

                $.ajax({
                    url: '/verify-last-index',
                    method: 'GET',
                    data: {
                        start_date: startDate,
                        end_date: endDate,
                        agency: agency,
                        utility: utilityValue
                    },
                    success: function (response) {
                        if (response.status == 0) {
                            $("#waterSubmitButton").attr('disabled', true);
                            $("#showErrorMessage").html(response.message);
                        } else if (response.status == 3) {
                            $("#contor_principal_input").attr('disabled', true);
                            $("#showErrorMessage").html(response.message);
                        } else {
                            $("#waterSubmitButton").attr('disabled', false);
                            $("#contor_principal_input").attr('disabled', false);
                            $("#showErrorMessage").html('');
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error(error.responseJSON.fail);
                    }
                });
            });
        });

        $(function () {
            $(".utilities-v2-form").on('submit', function (e) {
                e.preventDefault();
                $.ajax({
                    url: '/introduce-utilitati',
                    method: 'POST',
                    data: new FormData(this),
                    processData: false,
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    enctype: 'multipart/form-data',
                    contentType: false,
                    success: function (data) {
                        $('.utilities-v2-form').each(function () {
                            this.reset();
                        });
                        $("#errors_utilities_v2").html(data.message);
                        $("#errors_utilities_v2").fadeTo(2000, 500).slideUp(500);
                        $("#errors_utilities_v2").slideUp(500);
                        $("#month_maintenance").select2("destroy");
                        $("#month_sanitation").select2("destroy");
                        $("#selectAgencyUtilities").select2("destroy");
                        $("#month_maintenance").select2();
                        $("#month_sanitation").select2();
                        $("#selectAgencyUtilities").select2();
                    },
                    error: function (error) {
                        $("#errors_utilities_v2").html(error.responseJSON.message);
                        $("#errors_utilities_v2").fadeTo(6000, 2000).slideUp(2000);
                        $("#errors_utilities_v2").slideUp(2000);
                    }
                });
            });
        });
    })

</script>

@endpush