@extends('admin.dashboard.layouts.app')
@section('main')

<div class="content-wrapper">
    <!-- Content Header -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Edit Organization</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('organizations.index') }}">Home</a></li>
                        <li class="breadcrumb-item active">Edit Organization</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <!-- Card -->
                    <div class="card card-primary">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h3 class="card-title">Edit Organization Details</h3>
                            <a href="{{ route('organizations.index') }}">
                                <button type="button" class="btn btn-light">Back to List</button>
                            </a>
                        </div>

                     <form action="{{ route('organizations.update', $organization->id) }}" method="POST" enctype="multipart/form-data">
    @csrf
    @method('PUT')
    <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', $organization->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="{{ old('email', $organization->email) }}" 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', $organization->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', $organization->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 $state)
                        <option value="{{ $state->id }}"
                            @if (old('state_id', $organization->state_id) == $state->id)
                                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>
                    @foreach($districts as $district)
                        <option value="{{ $district->id }}"
                            @if (old('district_id', $organization->district_id) == $district->id)
                                selected
                            @endif
                        >
                            {{ $district->district }}
                        </option>
                    @endforeach
                </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', $organization->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', $organization->type) == 'Doctor' ? 'selected' : '' }}>Clinic</option>
                    <option value="Beautician" {{ old('type', $organization->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">
                @if($organization->banner)
                    <a href="{{ asset('storage/' . $organization->banner) }}" target="_blank">View current</a>
                @endif
                @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">
                @if($organization->banner2)
                    <a href="{{ asset('storage/' . $organization->banner2) }}" target="_blank">View current</a>
                @endif
                @error('banner2') <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">
                @if($organization->logo)
                    <a href="{{ asset('storage/' . $organization->logo) }}" target="_blank">View current</a>
                @endif
                @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">
                @if($organization->trade_license)
                    <a href="{{ asset('storage/' . $organization->trade_license) }}" target="_blank">View current</a>
                @endif
                @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', $organization->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', $organization->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" value="{{ old('gst_amount', $organization->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" value="{{ old('base_amount', $organization->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_percent" name="commission" value="{{ old('commission', $organization->commission) }}" min="0" max="100" step="0.01">
</div>

<div class="col-lg-6 form-group">
    <label>Commission Amount</label>
    <input type="text" id="commission" name="commission_amount" class="form-control" value="{{ old('commission_amount', $organization->commission_amount) }}" readonly>
</div>

            
            <div class="col-lg-6 form-group">
                <label>Location *</label>
                <input type="text" name="location" value="{{ old('location', $organization->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', $organization->description) }}</textarea>
                    @error('description') <span class="text-danger">{{ $message }}</span> @enderror
                </div>
            </div>
        </div>

        <button type="submit" class="btn btn-primary">Update</button>
    </div>
</form>

<!-- Add JavaScript for commission calculation -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const bookingFeeInput = document.getElementById('booking_fee');
    const commissionPercentInput = document.getElementById('commission_percent');
    const commissionInput = document.getElementById('commission');
    const gstPercentInput = document.getElementById('gst_percent');
    const gstAmountInput = document.getElementById('gst_amount');
    const baseAmountInput = document.getElementById('base_amount');

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

        // Base amount = Total / (1 + GST%)
        const baseAmount = totalAmount / (1 + gstPercent / 100);

        // GST amount
        const gstAmount = totalAmount - baseAmount;

        // 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);
    }

    bookingFeeInput.addEventListener('input', calculateAmounts);
    commissionPercentInput.addEventListener('input', calculateAmounts);

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


                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script>
    function loadDistricts(stateId, selectedDistrictId = null) {
        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;
                        
                        // Select the district if it matches the organization's district
                        if (selectedDistrictId && district.id == selectedDistrictId) {
                            option.selected = true;
                        }
                        
                        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 current state
    window.addEventListener('DOMContentLoaded', function() {
        var stateSelect = document.getElementById('state_id');
        var selectedState = stateSelect.value;
        var selectedDistrictId = "{{ old('district_id', $organization->district_id) }}";

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

@endsection