@extends('layouts.app')

@section('title', 'Make a Call')

@section('content')
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1">Make a Call</h4>
            <p class="text-muted mb-0">Record call details for {{ $school->school_name }}</p>
        </div>
        <a href="{{ route('tasks.payment-planning.show', $task) }}" class="btn btn-outline-secondary">
            <i class="icon-base ti tabler-arrow-left me-1"></i>
            Back to Details
        </a>
    </div>

    @include('partials.alerts')

    <div class="card mb-4">
        <div class="card-body bg-label-info">
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label text-muted mb-1">School Name</label>
                    <p class="mb-0 fw-medium">{{ $school->school_name }}</p>
                </div>
                <div class="col-md-4">
                    <label class="form-label text-muted mb-1">Called By</label>
                    <p class="mb-0 fw-medium">{{ auth()->user()->name }}</p>
                    <small class="text-muted">Locked to logged-in user</small>
                </div>
                <div class="col-md-4">
                    <label class="form-label text-muted mb-1">Called Date</label>
                    <p class="mb-0 fw-medium">{{ now()->format('d M Y') }}</p>
                    <small class="text-muted">Locked to current date</small>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">Call Information</h5>
        </div>
        <div class="card-body">
            <form method="post" action="{{ route('tasks.payment-planning.store-call', ['task' => $task->id]) }}" onsubmit="enableAllFields()">
                @csrf
                <input type="hidden" name="school_id" value="{{ $school->id }}">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">Call Status <span class="text-danger">*</span></label>
                        <select name="call_status" class="form-select js-call-status" required>
                            <option value="">Select status</option>
                            <option value="Received" @selected(old('call_status') === 'Received')>Received</option>
                            <option value="Not Received" @selected(old('call_status') === 'Not Received')>Not Received</option>
                            <option value="Call later request" @selected(old('call_status') === 'Call later request')>Call later request</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Contact Person</label>
                        <input type="text" name="contact_person" class="form-control js-form-field" value="{{ old('contact_person') }}" placeholder="Enter contact person name" disabled>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Payment Request</label>
                        <select name="payment_request" class="form-select js-payment-request js-form-field" disabled>
                            <option value="">Select</option>
                            <option value="Call again for payment" @selected(old('payment_request') === 'Call again for payment')>Call again for payment</option>
                            <option value="Will Pay" @selected(old('payment_request') === 'Will Pay')>Will Pay</option>
                        </select>
                    </div>
                    <div class="col-md-4 js-next-call-date-field" style="display: none;">
                        <label class="form-label">Next Call Date <span class="text-danger js-next-call-required" style="display: none;">*</span></label>
                        <input type="date" name="next_call_date" class="form-control js-next-call-date js-form-field" value="{{ old('next_call_date') }}" disabled>
                    </div>
                    <div class="col-md-4 js-payment-method-field" style="display: none;">
                        <label class="form-label">Payment Method</label>
                        <select name="payment_method" class="form-select js-payment-method js-form-field" disabled>
                            <option value="">Select</option>
                            <option value="Cash Payment" @selected(old('payment_method') === 'Cash Payment')>Cash Payment</option>
                            <option value="Account Pay" @selected(old('payment_method') === 'Account Pay')>Account Pay</option>
                            <option value="QR Payment" @selected(old('payment_method') === 'QR Payment')>QR Payment</option>
                            <option value="Cheque" @selected(old('payment_method') === 'Cheque')>Cheque</option>
                        </select>
                    </div>
                    <div class="col-md-4 js-payment-date-field" style="display: none;">
                        <label class="form-label">Payment Date <span class="text-danger js-payment-date-required" style="display: none;">*</span></label>
                        <input type="date" name="payment_date" class="form-control js-payment-date js-form-field" value="{{ old('payment_date') }}" disabled>
                    </div>
                </div>
                <div class="mt-4 d-flex gap-2">
                    <button type="submit" class="btn btn-primary">Save Call Details</button>
                    <a href="{{ route('tasks.payment-planning.show', $task) }}" class="btn btn-outline-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>

    <script>
        (function() {
            'use strict';
            
            function initFormHandler() {
                const callStatusSelect = document.querySelector('select.js-call-status');
                if (!callStatusSelect) return;
                
                const form = callStatusSelect.closest('form');
                if (!form) return;
                
                const allFormFields = Array.from(form.querySelectorAll('.js-form-field'));
                const paymentRequestSelect = form.querySelector('.js-payment-request');
                const nextCallDateField = form.querySelector('.js-next-call-date-field');
                const nextCallDateInput = form.querySelector('.js-next-call-date');
                const nextCallRequired = form.querySelector('.js-next-call-required');
                const paymentMethodField = form.querySelector('.js-payment-method-field');
                const paymentMethodSelect = form.querySelector('.js-payment-method');
                const paymentDateField = form.querySelector('.js-payment-date-field');
                const paymentDateInput = form.querySelector('.js-payment-date');
                const paymentDateRequired = form.querySelector('.js-payment-date-required');

                // Handle call status changes
                const handleCallStatusChange = () => {
                    const callStatus = callStatusSelect.value;
                    const isNotReceived = callStatus === 'Not Received';
                    const hasCallStatus = callStatus !== '';

                    allFormFields.forEach(field => {
                        if (!field) return;
                        
                        if (isNotReceived) {
                            field.setAttribute('disabled', 'disabled');
                        } else if (hasCallStatus) {
                            field.removeAttribute('disabled');
                        } else {
                            field.setAttribute('disabled', 'disabled');
                        }
                    });
                };

                // Handle payment request changes
                const handlePaymentRequestChange = () => {
                    const paymentRequest = paymentRequestSelect ? paymentRequestSelect.value : '';
                    const callStatus = callStatusSelect.value;
                    const isEnabled = callStatus !== '' && callStatus !== 'Not Received';

                    if (paymentRequest === 'Call again for payment') {
                        // Show next call date field
                        if (nextCallDateField) {
                            nextCallDateField.style.display = 'block';
                        }
                        if (nextCallDateInput && isEnabled) {
                            nextCallDateInput.removeAttribute('disabled');
                            nextCallDateInput.setAttribute('required', 'required');
                        }
                        if (nextCallRequired) {
                            nextCallRequired.style.display = 'inline';
                        }
                        // Hide payment method and payment date
                        if (paymentMethodField) paymentMethodField.style.display = 'none';
                        if (paymentDateField) paymentDateField.style.display = 'none';
                    } else if (paymentRequest === 'Will Pay') {
                        // Hide next call date
                        if (nextCallDateField) nextCallDateField.style.display = 'none';
                        // Show payment method
                        if (paymentMethodField) {
                            paymentMethodField.style.display = 'block';
                        }
                        if (paymentMethodSelect && isEnabled) {
                            paymentMethodSelect.removeAttribute('disabled');
                        }
                        // Payment date will be shown when payment method is selected
                        if (paymentDateField) paymentDateField.style.display = 'none';
                    } else {
                        // Hide all fields
                        if (nextCallDateField) nextCallDateField.style.display = 'none';
                        if (paymentMethodField) paymentMethodField.style.display = 'none';
                        if (paymentDateField) paymentDateField.style.display = 'none';
                    }
                };

                // Handle payment method changes
                const handlePaymentMethodChange = () => {
                    const paymentMethod = paymentMethodSelect ? paymentMethodSelect.value : '';
                    const callStatus = callStatusSelect.value;
                    const isEnabled = callStatus !== '' && callStatus !== 'Not Received';

                    if (paymentMethod && paymentMethod !== '') {
                        // Show payment date field
                        if (paymentDateField) {
                            paymentDateField.style.display = 'block';
                        }
                        if (paymentDateInput && isEnabled) {
                            paymentDateInput.removeAttribute('disabled');
                            paymentDateInput.setAttribute('required', 'required');
                        }
                        if (paymentDateRequired) {
                            paymentDateRequired.style.display = 'inline';
                        }
                    } else {
                        // Hide payment date field
                        if (paymentDateField) paymentDateField.style.display = 'none';
                        if (paymentDateInput) {
                            paymentDateInput.removeAttribute('required');
                        }
                    }
                };

                callStatusSelect.addEventListener('change', () => {
                    handleCallStatusChange();
                    handlePaymentRequestChange();
                    handlePaymentMethodChange();
                });

                if (paymentRequestSelect) {
                    paymentRequestSelect.addEventListener('change', handlePaymentRequestChange);
                }

                if (paymentMethodSelect) {
                    paymentMethodSelect.addEventListener('change', handlePaymentMethodChange);
                }

                // Initialize
                handleCallStatusChange();
                handlePaymentRequestChange();
                handlePaymentMethodChange();
            }

            // Enable all fields before form submission
            window.enableAllFields = function() {
                const form = document.querySelector('form[method="post"]');
                if (!form) return;
                
                const allFields = form.querySelectorAll('input, select, textarea');
                allFields.forEach(field => {
                    if (field.hasAttribute('disabled')) {
                        field.removeAttribute('disabled');
                    }
                });
                return true; // Allow form submission to proceed
            };

            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initFormHandler);
            } else {
                initFormHandler();
            }
        })();
    </script>
@endsection