@extends('layouts/contentLayoutMaster')
@section('title', 'Rental Agreement')

@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') }}">
@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') }}">

@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 d-flex flex-column align-items-start">
                        <h5>Add Rental Agreement</h5>
                    </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 class="form" id="rentalAgreementForm" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <!-- Vendor -->
                                <div class="col-md-3 col-6 ">
                                    <label class="form-label">Select Vendor</label>
                                    <select name="vendor_id" id="vendor_id" class="form-control select2" required>
                                        <option value="">Select Vendor</option>
                                        @foreach($vendors as $vendor)
                                            <option value="{{ $vendor->id }}">{{ $vendor->name }} - {{$vendor->cnic}} </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3 col-6 ">
                                    <label class="form-label">Select Type</label>
                                    <div class="mb-1">
                                        <select name="parent" id="parent" class="form-control select2" required onchange="getSelectedParent()">
                                            <option value="" selected="" disabled="">Select Parent Type</option>
                                            <option value="ao">Area Office</option>
                                            <option value="dp">Dispatch Point</option>
                                            <option value="mcc">Collection Point</option>
                                            {{-- @if (auth()->user()->roles->first()->access_level == 6 || auth()->user()->roles->first()->access_level == 5 || auth()->user()->roles->first()->access_level == 4) --}}
                                                <option value="building">Building (Plant)</option>
                                            {{-- @endif --}}
                                            <option value="ao_building">Building (Area Office)</option>
                                        </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">
                                @include('content._partials._sections.electricity_filter')
                               
                                <div class="col-md-12 my-2">
                                    <h5>Agreement Details :</h5>
                                </div>
                                {{-- <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="column-ao-3">Meter No <small class="text-danger">*</small></label>
                                        <input type="text" id="meter_no" class="form-control" placeholder="Meter No"readonly
                                            name="meter_no" value="{{ old('meter_no') }}" required />
                                        @error('meter_no')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div> --}}

                                <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="column-ao-3" for="agreement_type">Agreement Type</label>
                                        <select name="agreement_type" id="agreement_type" class="form-control" required>
                                            <option value="">-- Select --</option>
                                            <option value="monthly">Monthly</option>
                                            <option value="quarterly">Quarterly</option>
                                            <option value="yearly">Yearly</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- Payment Type -->
                                <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="column-ao-3" for="payment_type">Payment Type</label>
                                        <select name="payment_type" id="payment_type" class="form-control" required>
                                            <option value="prepaid">Prepaid</option>
                                            <option value="postpaid">Postpaid</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <!-- WEF Date -->
                                <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="column-ao-3" for="wef_date">WEF Date</label>
                                        <input type="date" name="wef_date" id="wef_date" class="form-control" required>
                                    </div>
                                </div>
                                </div>
                                
                                <div class="row">
                                <!-- Agreement Amount -->
                                <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="column-ao-3" for="agreement_amount">Agreement Amount</label>
                                        <input type="number" name="agreement_amount" id="agreement_amount" class="form-control" step="0.01" required>
                                    </div>
                                </div>

                                <!-- No. of Installments -->
                                <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="column-ao-3" for="installments">Number of Installments</label>
                                        <input type="number" name="installments" id="installments" class="form-control" min="1" required>
                                    </div>
                                </div>



                                <!-- Advance Amount -->
                                <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="column-ao-3" for="advance_amount">Advance Amount</label>
                                        <input type="number" name="advance_amount" id="advance_amount" class="form-control" step="0.01">
                                    </div>
                                </div>

                                <!-- Security Amount -->
                                <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="column-ao-3" for="security_amount">Security Amount</label>
                                        <input type="number" name="security_amount" id="security_amount" class="form-control" step="0.01">
                                    </div>
                                </div>
                                </div>

                                <div class="row">
                                <!-- Auto-calculated End Date -->
                                <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="column-ao-3" for="end_date">End Date (Auto-calculated)</label>
                                        <input type="date" name="end_date" id="end_date" class="form-control" readonly>
                                    </div>
                                </div>

                                <!-- Per Installment Amount -->
                                <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="column-ao-3" for="per_installment_amount">Per Installment Amount</label>
                                        <input type="number" name="per_installment_amount" id="per_installment_amount" class="form-control" readonly>
                                    </div>
                                </div>

                                <!-- Pending Rental Amount -->
                                <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="column-ao-3" for="pending_rental_amount">Pending Rental Amount</label>
                                        <input type="number" name="pending_rental_amount" id="pending_rental_amount" class="form-control" step="0.01">
                                    </div>
                                </div>

                                <div class="col-12 my-2">
                                    <label class="form-label" for="column-ao-3" for="pending_rental_amount">Upload File <small class="text-danger">(Max 4MB)</small></label>
                                    <br>
                                    <input type="file" class="mt-1"  name="image" accept=".pdf" >
                                </div>
                               
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <button type="submit" id="submitRentButton" class="btn btn-primary me-1 my-2 submitButton">Submit</button>
                                    <button type="reset" class="btn btn-outline-secondary me-1">Reset</button>
                                    {{-- <a class="btn btn-outline-secondary cancel-btn"
                                        href="{{ route('electricity.index') }}">Cancel</a> --}}
                                </div>
                            </div>
                        </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>
@endsection
@section('page-script')

    <script>
        function calculateEndDate() {
            const wef = new Date(document.getElementById('wef_date').value);
            const type = document.getElementById('agreement_type').value;
            const installments = parseInt(document.getElementById('installments').value);
    
            if (wef && type && installments) {
                let months = 0;
                if (type === 'monthly') months = 1;
                if (type === 'quarterly') months = 3;
                if (type === 'yearly') months = 12;
    
                const endDate = new Date(wef);
                endDate.setMonth(endDate.getMonth() + (months * installments));
                document.getElementById('end_date').value = endDate.toISOString().split('T')[0];
            }
        }
    
        function calculateInstallmentAmount() {
            const amount = parseFloat(document.getElementById('agreement_amount').value);
            const installments = parseInt(document.getElementById('installments').value);
            if (!isNaN(amount) && !isNaN(installments) && installments > 0) {
                const perInstallment = (amount / installments).toFixed(2);
                document.getElementById('per_installment_amount').value = perInstallment;
            }
            else
            {
                document.getElementById('per_installment_amount').value = 0;
            }
        }
    
        document.getElementById('agreement_type').addEventListener('change', calculateEndDate);
        document.getElementById('installments').addEventListener('input', () => {
            calculateEndDate();
            calculateInstallmentAmount();
        });
        document.getElementById('wef_date').addEventListener('change', calculateEndDate);
        document.getElementById('agreement_amount').addEventListener('input', calculateInstallmentAmount);
   

        $('.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 !== "") {
                
                // $('.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 == "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 == "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);
                }

            }
        }


        $('#submitRentButton').click(function (e) {
            e.preventDefault();

            const button = $(this);
            button.prop('disabled', true); // Disable the button
            button.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Submitting...'); // Optional: show loading spinner

            const form = $('#rentalAgreementForm'); // Ensure this form ID matches your form
           // const formData = form.serialize(); // Serializes all form inputs
           const formData = new FormData(form[0]); // use FormData to include files

            $.ajax({
                url: '{{ route("rental.facility-agreements.store") }}', // Adjust the route as needed
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                data: formData,
                processData: false,  // Important: prevent jQuery from processing data
                contentType: false,  // Important: prevent jQuery from setting content type header
                success: function (response) {
                    if (response.success == true) {
                        showAlert('success', response.message);
                        // alert('Transfer Note created successfully!');
                        location.reload();
                    } else {
                        showAlert('error', response.message);
                        button.prop('disabled', false); // 🔓 Re-enable on failure
                        button.html('Submit');
                    }
                },
                error: function (xhr) {
                    let errors = xhr.responseJSON?.errors;
                    if (errors) {
                        let errorMessages = '';
                        Object.values(errors).forEach(messages => {
                            errorMessages += messages.join('<br>');
                        });
                        showAlert('error', errorMessages);
                    } else {
                        showAlert('error', 'An unexpected error occurred.');
                    }
                    button.prop('disabled', false); // 🔓 Re-enable on error
                    button.html('Submit');
                }
            });
        });


    </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://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>
        $(document).ready(function() {
            @if ($errors->any())
                showAlert('error', '{{ $errors->first() }}');
            @endif
        });
        $('.cnic').inputmask({
            mask: '99999-9999999-9'
        });
        $('.phone').inputmask({
            mask: '+\\92-399-9999999'
        });

        $('.ntn').inputmask({
            mask: '9999999-9'
        });
    </script>
@endsection