@extends('layouts/contentLayoutMaster')
@section('title', 'Reverted 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 align-items-start justify-content-start">
                        <h5 class="pe-1"><b>{{$agreement->code ? $agreement->code : 'N/A' }}</b> </h5>(
                        @if ($agreement->status === 1)
                            <span class="text-success">Approved</span>
                        @elseif ($agreement->status === 2)
                            <span class="text-secondary">Pending</span>
                        @elseif ($agreement->status === 4)
                            <span class="text-primary">Reverted</span>
                        @else
                            <span class="text-danger">Rejected</span>
                        @endif)
                    </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="rentalAgreementEditForm" enctype="multipart/form-data">
                            @csrf

                            @php
                            $badgeMap = [
                                'plant' => ['label' => 'Plant', 'color' => '#db4243'],
                                'building' => ['label' => 'Plant Building', 'color' => '#e08465'],
                                'plant_mcc' => ['label' => 'Plant Collection Point', 'color' => '#eb7aa0'],
                                'ao' => ['label' => 'Area Office', 'color' => '#28A745'],
                                'dp' => ['label' => 'Dispatch Point', 'color' => '#20C997'],
                                'mcc' => ['label' => 'Collection Center', 'color' => '#007bff'],
                                'ao_building' => ['label' => 'Area Office Building', 'color' => '#008080'],
                            ];
                            $type = $agreement->type ?? 'unknown';
                            $badge = $badgeMap[$type] ?? null;
                        @endphp
                    
                            <div class="row pt-1">            
                                <div class="col-md-6">
                                    <h5 class="pb-1 text-primary"><b>Vendor Code:</b> {{ $agreement->vendor ? $agreement->vendor->code : 'N/A' }}</h5>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="pb-1 text-primary"><b>Vendor Name:</b> {{ $agreement->vendor ? ucwords($agreement->vendor->name) : 'N/A' }}</h5>
                                </div>
                        
                                <div class="col-md-6">
                                    <h5 class="pb-1 text-primary"><b>Facility:</b> {{ $agreement->facility ? ucwords($agreement->facility->name) : 'N/A' }}</h5>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="pb-1"><b>Facility Type:</b>
                                        @if ($badge)
                                            <span class="badge" style="background-color: {{ $badge['color'] }}; color: white;">
                                                {{ $badge['label'] }}
                                            </span>
                                        @else
                                            N/A
                                        @endif
                                    </h5>
                                </div>
                            </div>
                            <div class="row">
                               
                                <div class="col-md-12 my-1">
                                    <h5>Agreement Details :</h5>
                                </div>
                                <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="agreement_type">Agreement Type</label>
                                        <select name="agreement_type" id="agreement_type" class="form-control" required>
                                            <option value="">-- Select --</option>
                                            <option value="monthly" {{ old('agreement_type', $agreement->agreement_type) == 'monthly' ? 'selected' : '' }}>Monthly</option>
                                            <option value="quarterly" {{ old('agreement_type', $agreement->agreement_type) == 'quarterly' ? 'selected' : '' }}>Quarterly</option>
                                            <option value="yearly" {{ old('agreement_type', $agreement->agreement_type) == 'yearly' ? 'selected' : '' }}>Yearly</option>
                                        </select>
                                    </div>
                                </div>
                        
                                <!-- Payment Type -->
                                <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="payment_type">Payment Type</label>
                                        <select name="payment_type" id="payment_type" class="form-control" required>
                                            <option value="prepaid" {{ old('payment_type', $agreement->payment_type) == 'prepaid' ? 'selected' : '' }}>Prepaid</option>
                                            <option value="postpaid" {{ old('payment_type', $agreement->payment_type) == 'postpaid' ? 'selected' : '' }}>Postpaid</option>
                                        </select>
                                    </div>
                                </div>
                        
                                <!-- WEF Date -->
                                <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="wef_date">WEF Date</label>
                                        <input type="date" name="wef_date" id="wef_date" class="form-control"
                                               value="{{ old('wef_date', $agreement->wef_date) }}" 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="agreement_amount">Agreement Amount</label>
                                        <input type="number" name="agreement_amount" id="agreement_amount" class="form-control" step="0.01"
                                               value="{{ old('agreement_amount', $agreement->agreement_amount) }}" required>
                                    </div>
                                </div>
                        
                                <!-- No. of Installments -->
                                <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="installments">Number of Installments</label>
                                        <input type="number" name="installments" id="installments" class="form-control" min="1"
                                               value="{{ old('installments', $agreement->installments) }}" required>
                                    </div>
                                </div>
                        
                                <!-- Advance Amount -->
                                <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="advance_amount">Advance Amount</label>
                                        <input type="number" name="advance_amount" id="advance_amount" class="form-control" step="0.01"
                                               value="{{ old('advance_amount', $agreement->advance_amount) }}">
                                    </div>
                                </div>
                        
                                <!-- Security Amount -->
                                <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="security_amount">Security Amount</label>
                                        <input type="number" name="security_amount" id="security_amount" class="form-control" step="0.01"
                                               value="{{ old('security_amount', $agreement->security_amount) }}">
                                    </div>
                                </div>
                            </div>
                        
                            <div class="row">
                                <!-- End Date -->
                                <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="end_date">End Date (Auto-calculated)</label>
                                        <input type="date" name="end_date" id="end_date" class="form-control"
                                               value="{{ old('end_date', $agreement->end_date) }}" readonly>
                                    </div>
                                </div>
                        
                                <!-- Per Installment Amount -->
                                <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="per_installment_amount">Per Installment Amount</label>
                                        <input type="number" name="per_installment_amount" id="per_installment_amount" class="form-control"
                                               value="{{ old('per_installment_amount', $agreement->per_installment_amount) }}" readonly>
                                    </div>
                                </div>
                        
                                <!-- Pending Rental Amount -->
                                <div class="col-md-3 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" 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"
                                               value="{{ old('pending_rental_amount', $agreement->pending_rental_amount) }}">
                                    </div>
                                </div>

                                @if(isset($agreement->file_url) && $agreement->file_url != null)
                                    <div class="col-md-12 pt-1 ">
                                        <h5 class="pb-1"><b>Attachment File:</b></h5>
                                        <div class="d-flex  flex-column">
                                            <a href="{{$agreement->file_url}}" target="_blank">
                                            <i class="fa-solid fa-file-lines ms-1" style="font-size:90px"></i>
                                            </a>
                                        </div>
                                    </div>
                                @endif

                                <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">
                                    @if($agreement->status == 4)
                                        <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> --}}
                                    @endif
                                </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);
   

        $('#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 = $('#rentalAgreementEditForm'); // 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.update", $agreement->id) }}', // Adjust the route as needed
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'X-HTTP-Method-Override': 'PUT' // Laravel requires this when faking PUT via POST
                },
                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