@extends('admin.dashboard.layouts.app')
@section('main')
<div class="content-wrapper">
    <section class="content-header">
        <div class="container-fluid">
            <h1>Add Organization</h1>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Organization Details</h3>
                    <a href="{{ route('organizations.index') }}" class="btn btn-light float-right">Organization List</a>
                </div>
                <form action="{{ route('organizations.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="card-body">

                        <div class="row">
                            <div class="col-lg-6 form-group">
                                <label>Organization Name *</label>
                                <input type="text" name="name" value="{{ old('name') }}" class="form-control" required>
                                @error('name') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>

                          
                        </div>

                        <div class="row">
                           

                            <div class="col-lg-6 form-group">
                                <input type="hidden" name="email" value="test@gmail.com" class="form-control" required>
                                @error('email') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>
                        </div>

                      

                        <div class="row">
                            <div class="col-lg-6 form-group">
                                <label>Contact Person *</label>
                                <input type="text" name="contact_person" value="{{ old('contact_person') }}" class="form-control">
                                @error('contact_person') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>
                              <div class="col-lg-6 form-group">
                                <label>Contact Person Number *</label>
                                <input type="text" name="phone" value="{{ old('phone') }}" class="form-control" required oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                @error('phone') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>

                           <div class="col-lg-6 form-group">
                                <label>State</label>
                                <select name="state_id" id="state_id" class="form-control">
                                    @foreach($states as $index => $state)
                                        <option value="{{ $state->id }}"
                                            @if (old('state_id'))
                                                {{ old('state_id') == $state->id ? 'selected' : '' }}
                                            @elseif ($index == 0)
                                                selected
                                            @endif
                                        >
                                            {{ $state->state }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('state_id') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>


                            <div class="col-lg-6 form-group">
                                <label>District</label>
                                <select name="district_id" id="district_id" class="form-control">
                                    <option value="">Select District</option>
                                </select>
                                @error('district_id') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>

                            <div class="col-lg-6 form-group">
                                <label>City</label>
                                <input type="text" name="city" value="{{ old('city') }}" class="form-control">
                                @error('city') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>

                            <div class="col-lg-6 form-group">
                                <label>Organization Type *</label>
                                <select name="type" class="form-control" required>
                                    <option value="">Select Type</option>
                                    <option value="Doctor" {{ old('type') == 'Doctor' ? 'selected' : '' }}>Clinic</option>
                                    <option value="Beautician" {{ old('type') == 'Beautician' ? 'selected' : '' }}>Parlour</option>
                                </select>
                                @error('type') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>

                            <div class="col-lg-6 form-group">
                                <label>Banner 1</label>
                                <input type="file" name="banner" class="form-control-file">
                                @error('banner') <span class="text-danger">{{ $message }}</span> @enderror
                                <small class="text-danger">* banner size 1000*400, max size 2MB</small>
                            </div>
                            
                              <div class="col-lg-6 form-group">
                                <label>Banner 2</label>
                                <input type="file" name="banner2" class="form-control-file">
                                @error('banner') <span class="text-danger">{{ $message }}</span> @enderror
                                <small class="text-danger">* banner size 1000*400, max size 2MB</small>

                            </div>

                            <div class="col-lg-6 form-group">
                                <label>Logo</label>
                                <input type="file" name="logo" class="form-control-file">
                                @error('logo') <span class="text-danger">{{ $message }}</span> @enderror
                                <small class="text-danger">* logo size 400*400, max size 2MB</small>

                            </div>

                            <div class="col-lg-6 form-group">
                                <label>Trade License</label>
                                <input type="file" name="trade_license" class="form-control-file">
                                @error('trade_license') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>

                            <div class="col-lg-6 form-group">
                                <label>UPI ID</label>
                                <input type="text" name="upi_id" class="form-control" value="{{ old('upi_id') }}">
                                @error('upi_id') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>

                         <div class="col-lg-6 form-group">
    <label for="booking_fee">Booking Fee</label>
    <input type="number" class="form-control" id="booking_fee" name="booking_fee" value="{{ old('booking_fee') }}">
</div>

<div class="col-lg-6 form-group">
    <label for="gst_percent">GST (%)</label>
    <input type="text" class="form-control" id="gst_percent" name="gst_percent" value="{{ $gst->gst_amount ?? 0 }}" readonly>
</div>

<div class="col-lg-6 form-group">
    <label for="gst_amount">GST Amount</label>
    <input type="text" class="form-control" id="gst_amount" name="gst_amount" readonly>
</div>

<div class="col-lg-6 form-group">
    <label for="base_amount">Base Amount</label>
    <input type="text" class="form-control" id="base_amount" name="base_amount" readonly>
</div>

<div class="col-lg-6 form-group">
    <label for="commission_percent">Commission %</label>
    <input type="number" class="form-control" id="commission" name="commission" value="{{ old('commission_percent') }}" min="0" max="100" step="0.01">
</div>

<div class="col-lg-6 form-group">
    <label>Commission Amount</label>
    <input type="text" id="commission_amount" name="commission_amount" class="form-control" readonly>
</div>

                            
                             <div class="col-lg-6 form-group">
                                <label>Location *</label>
                                <input type="text" name="location" value="{{ old('location') }}" class="form-control" required>
                                @error('location') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>
                            <div class="col-lg-6 form-group">
                              <div class="form-group">
                            <label>Description</label>
                            <textarea name="description" class="form-control" rows="3">{{ old('description') }}</textarea>
                            @error('description') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>
                        </div>
                        </div>

                        <button type="submit" class="btn btn-primary">Submit</button>

                    </div>
                </form>
            </div>
        </div>
    </section>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const feeInput = document.getElementById("booking_fee");
    const gstPercentInput = document.getElementById("gst_percent");
    const gstAmountInput = document.getElementById("gst_amount");
    const baseAmountInput = document.getElementById("base_amount");
    const commissionPercentInput = document.getElementById("commission");
    const commissionInput = document.getElementById("commission_amount");

    function calculateAmounts() {
        const totalAmount = parseFloat(feeInput.value) || 0;
        const gstPercent = parseFloat(gstPercentInput.value) || 0;
        const commissionPercent = parseFloat(commissionPercentInput.value) || 0;

        // Calculate Base Amount
        const baseAmount = totalAmount / (1 + gstPercent / 100);

        // Calculate GST Amount
        const gstAmount = totalAmount - baseAmount;

        // Calculate Commission based on Base Amount
        const commission = (baseAmount * commissionPercent) / 100;

        // Update fields
        baseAmountInput.value = baseAmount.toFixed(2);
        gstAmountInput.value = gstAmount.toFixed(2);
        commissionInput.value = commission.toFixed(2);
    }

    // Event listeners
    feeInput.addEventListener("input", calculateAmounts);
    gstPercentInput.addEventListener("input", calculateAmounts);
    commissionPercentInput.addEventListener("input", calculateAmounts);

    // Initial calculation
    calculateAmounts();
});
</script>

<script>
    function loadDistricts(stateId) {
        var districtSelect = document.getElementById('district_id');
        districtSelect.innerHTML = '<option value="">Select District</option>';

        if (stateId) {
            fetch(`{{ url('/dashboard/get-districts') }}/${stateId}`)
                .then(response => response.json())
                .then(data => {
                    data.forEach(function(district) {
                        var option = document.createElement('option');
                        option.value = district.id;
                        option.text = district.district;
                        districtSelect.appendChild(option);
                    });
                })
                .catch(error => console.error('Error fetching districts:', error));
        }
    }

    // On state change
    document.getElementById('state_id').addEventListener('change', function() {
        loadDistricts(this.value);
    });

    // On page load: fetch districts for the default selected state
    window.addEventListener('DOMContentLoaded', function() {
        var stateSelect = document.getElementById('state_id');
        var selectedState = stateSelect.value;

        if (selectedState) {
            loadDistricts(selectedState);
        }
    });
</script>



@endsection