@extends('layouts.master')

@section('title', 'Add Account | ')
@section('content')
    @include('partials.header')
    @include('partials.sidebar')

    <main class="app-content">
        <div class="app-title">
            <div>
                <h1><i class="fa fa-plus"></i> Add Account</h1>
            </div>
        </div>
        <form method="POST" action="{{ route('tax.store') }}">
            @csrf
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="main_account">Main Account</label>
                        <select name="main_account" id="main_account" class="form-control" required>
                            <option value="">Select Main Account</option>
                            @foreach($mainAccounts as $main)
                                <option value="{{ $main->Main_ID }}">{{ $main->Main_Title }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group">
                        <label for="master_account">Master Account</label>
                        <button type="button" id="fetchMasterAccounts" class="btn btn-info btn-sm">Fetch Master Accounts</button>
                        <select name="master_account" id="master_account" class="form-control" required>
                            <option value="">Select Master Account</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group">
                        <label for="control_account">Control Account</label>
                        <select name="control_account" id="control_account" class="form-control" required>
                            <option value="">Select Control Account</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group">
                        <label for="tax_name">Tax Name</label>
                        <input type="text" name="tax_name" id="tax_name" class="form-control" required>
                    </div>
                </div>

                <div class="col-md-12">
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </div>
        </form>
    </main>
@endsection

@push('js')
    <script>
        $(document).ready(function () {
            $('#fetchMasterAccounts').click(function () {
                let mainID = $('#main_account').val();
                $('#master_account').html('<option value="">Select Master Account</option>');
                $('#control_account').html('<option value="">Select Control Account</option>');

                if (mainID) {
                    $.ajax({
                        url: "{{ route('tax.fetchMasterAccounts') }}",
                        type: "GET",
                        data: { main_id: mainID },
                        success: function (response) {
                            response.forEach(function (master) {
                                $('#master_account').append('<option value="' + master.Master_ID + '">' + master.Master_Title + '</option>');
                            });
                        },
                        error: function () {
                            alert('Failed to fetch Master Accounts');
                        }
                    });
                }
            });

            $('#master_account').change(function () {
                let masterID = $(this).val();
                $('#control_account').html('<option value="">Select Control Account</option>');

                if (masterID) {
                    $.ajax({
                        url: "{{ route('tax.fetchControlAccounts') }}",
                        type: "GET",
                        data: { master_id: masterID },
                        success: function (response) {
                            response.forEach(function (control) {
                                $('#control_account').append('<option value="' + control.Control_ID + '">' + control.Control_Title + '</option>');
                            });
                        },
                        error: function () {
                            alert('Failed to fetch Control Accounts');
                        }
                    });
                }
            });
        });
    </script>
@endpush