@extends('layout.default')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Edit Ward Member</h4>
                    <form id="editWardMemberForm" action="{{ route('wardmembers.update', $user->id) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="row">
                            <div class="col-lg-6 mb-3">
                                <label class="col-form-label" for="name">Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="name" name="name" value="{{ old('name', $user->name) }}" placeholder="Name" required>
                                <div class="invalid-feedback">Please enter a name.</div>
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label class="col-form-label" for="email">Email <span class="text-danger">*</span></label>
                                <input type="email" class="form-control" id="email" name="email" value="{{ old('email', $user->email) }}" placeholder="Email" required>
                                <div class="invalid-feedback">Please enter a valid email.</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6 mb-3">
                                <label class="col-form-label" for="mobile">Mobile <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="mobile" name="mobile" value="{{ old('mobile', $user->mobile) }}" placeholder="Mobile" required>
                                <div class="invalid-feedback">Please enter a valid mobile number.</div>
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label class="col-form-label" for="address">Address <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="address" name="address" value="{{ old('address', $user->address) }}" placeholder="Address" required>
                                <div class="invalid-feedback">Please enter an address.</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6 mb-3">
                                <label class="col-form-label" for="city">City <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="city" name="city" value="{{ old('city', $user->city) }}" placeholder="City" required>
                                <div class="invalid-feedback">Please enter a city.</div>
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label class="col-form-label" for="state_id">State <span class="text-danger">*</span></label>
                                <select class="form-control" id="state_id" name="state_id" required>
                                    <option value="">Select State</option>
                                    @foreach($states as $id => $name)
                                        <option value="{{ $id }}" {{ $user->state_id == $id ? 'selected' : '' }}>{{ $name }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">Please select a state.</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6 mb-3">
                                <label class="col-form-label" for="district_id">District <span class="text-danger">*</span></label>
                                <select class="form-control" id="district_id" name="district_id" required>
                                    <option value="">Select District</option>
                                    @foreach($districts as $id => $name)
                                        <option value="{{ $id }}" {{ $user->district_id == $id ? 'selected' : '' }}>{{ $name }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">Please select a district.</div>
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label class="col-form-label" for="sub_district_id">Sub-District <span class="text-danger">*</span></label>
                                <select class="form-control" id="sub_district_id" name="sub_district_id" required>
                                    <option value="">Select Sub-District</option>
                                    @foreach($sub_districts as $id => $name)
                                        <option value="{{ $id }}" {{ $user->sub_district_id == $id ? 'selected' : '' }}>{{ $name }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">Please select a sub-district.</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6 mb-3">
                                <label class="col-form-label" for="panchayath_id">Panchayath <span class="text-danger">*</span></label>
                                <select class="form-control" id="panchayath_id" name="panchayath_id" required>
                                    <option value="">Select Panchayath</option>
                                    @foreach($panchayaths as $id => $name)
                                        <option value="{{ $id }}" {{ $user->panchayath_id == $id ? 'selected' : '' }}>{{ $name }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">Please select a panchayath.</div>
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label class="col-form-label" for="panchayat_type_id">Panchayath Type <span class="text-danger">*</span></label>
                                <select class="form-control" id="panchayat_type_id" name="panchayat_type_id" required>
                                    <option value="">Select Panchayath Type</option>
                                    @foreach($panchayatTypes as $id => $type)
                                        <option value="{{ $id }}" {{ $user->panchayat_type_id == $id ? 'selected' : '' }}>{{ $type }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">Please select a panchayath type.</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6 mb-3">
                                <label class="col-form-label" for="ward_id">Ward <span class="text-danger">*</span></label>
                                <select class="form-control" id="ward_id" name="ward_id" required>
                                    <option value="">Select Ward</option>
                                    @foreach($wards as $id => $name)
                                        <option value="{{ $id }}" {{ $user->ward_id == $id ? 'selected' : '' }}>{{ $name }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">Please select a ward.</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-9 offset-lg-3">
                                <button type="submit" class="btn btn-primary">Update</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('#editWardMemberForm').on('submit', function(e) {
        e.preventDefault();

        let isValid = true;

        $('.invalid-feedback').hide();
        $('.form-control, .form-select').removeClass('is-invalid');

        $('input[required], select[required]').each(function() {
            if ($.trim($(this).val()) === '') {
                $(this).addClass('is-invalid');
                $(this).siblings('.invalid-feedback').show();
                isValid = false;
            }
        });

        let email = $('#email').val();
        if (email && !/\S+@\S+\.\S+/.test(email)) {
            $('#email').addClass('is-invalid');
            $('#emailError').show();
            isValid = false;
        }

        if (isValid) {
            this.submit();
        }
    });
});
</script>
@endsection