{{-- {{dd($m)}} --}}
<main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg">
    <div class="container">
        @include('components/app/navbar', ['title' => $title])
    </div>

    <div class="container mt-4">
        <div style="display: flex; justify-content: right; gap: 1rem; margin: 1.5rem .5rem">
            @if($permission['member']['delete'])
            <button type="button" class="btn btn-danger" onclick="delete_member()">លុប</button>
            @endif
            @if($permission['member']['delete'])
            <button type="button" class="btn btn-danger" onclick="remove()">ប្តូរចេញពីសមាជិក</button>

            @endif
        </div>

        <!-- hongly123 -->
        <form  action="{{ route('members.edit_member', ['id' => $id]) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="row">
                <div class="col-md-6 col-lg-3 mb-3">
                    <p>ព័ត៍មានបឋម</p>
                    <div class="mb-3">
                        <label for="member_id_number" class="form-label">លេខអត្តសញ្ញាណបណ្ណ</label>
                        <input type="text" class="form-control" id="member_id_number" name="member_id_number" value="{{$m['member_id_number']}}">
                    </div>
                    <div class="mb-3">
                        <label for="member_name" class="form-label">នាមត្រកូល និងនាមខ្លួន</label>
                        <input type="text" class="form-control" id="member_name" name="member_name" value="{{$m['member_name']}}">
                    </div>
                    <div class="mb-3">
                        <label for="member_gender" class="form-label">ភេទ</label>
                        <input list="gender_suggestions" class="form-control" id="member_gender" name="member_gender" placeholder="ប្រុស" value="{{$m['member_gender']}}">
                        <datalist id="gender_suggestions">
                            <option value="ប្រុស">ប្រុស</option>
                            <option value="ស្រី">ស្រី</option>
                        </datalist>
                    </div>

                    <div class="mb-3">
                        <label for="member_birthday" class="form-label">ឆ្នាំកំណើត </label>
                        <input type="text" class="form-control" id="member_birthday" name="member_birthday" placeholder="04/05/2004 (ថ្ងៃ/ខែ/ឆ្នាំ)" value="{{$m['member_birthday']}}">
                    </div>
                    <div class="mb-3">
                        <label for="member_place_birth" class="form-label">ទីកន្លែងកំណើត</label>
                        <input class="form-control" list="province_suggestions" id="member_place_birth" name="member_place_birth" placeholder="បាត់ដំបង (ឈ្មោះខេត្ត)" value="{{$m['member_place_birth']}}"></input>
                    </div>
                </div>

                <div class="col-md-6 col-lg-3 mb-3">
                    <p>ព័ត៍មានគណបក្ស</p>
                    <div class="mb-3">
                        <label for="member_role" class="form-label">តួនាទីបក្ស</label>
                        <input list="role_suggestions" class="form-control" id="member_role" name="member_role" placeholder="សមាជិក" required value="{{$m['member_role']}}">
                        <datalist id="role_suggestions">
                            <option value="សមាជិក">សមាជិក</option>
                            <option value="អនុប្រធាន">អនុប្រធាន</option>
                            <option value="ប្រធាន">ប្រធាន</option>
                        </datalist>
                    </div>

                    <div class="mb-3">
                        <label for="member_date_in" class="form-label">ថ្ងៃចូលបក្ស</label>
                        <input type="text" class="form-control" id="member_date_in" name="member_date_in" placeholder="04/05/2004 (ថ្ងៃ/ខែ/ឆ្នាំ)" value="{{$m['member_date_in'] ? $m['member_date_in']: ''}}">
                    </div>
                </div>

                <div class="col-md-6 col-lg-3 mb-3">
                    <p>ព័ត៍មានបោះឆ្នោត</p>

                    <div class="mb-3">
                        <label for="member_office_election" class="form-label">លេខការិយាល័យបោះឆ្នោត</label>
                        <input type="text" class="form-control" id="member_office_election" value="{{$m['member_office_election_number']}}" name="office_number" placeholder="02-030-0579
">
                    </div>
                    <div class="mb-3">
                        <label for="member_office_election" class="form-label">លេខកូដការិ.</label>
                        <input type="text" class="form-control" id="member_office_election" name="office_code" placeholder="០៥៦៥" value="{{$m['member_office_election_code']}}">
                    </div>
                    <div class="mb-3">
                        <label for="member_office_election" class="form-label">ឈ្មោះទីតាំងការិ.</label>
                        <input type="text" class="form-control" id="member_office_election" name="member_office_election" placeholder="បឋមសិក្សាបល្ល័ង្គមានជ័យ" value="{{$m['member_office_election']}}">
                    </div>
                    <div class="mb-3">
                        <label for="member_id_number_docs" class="form-label">ប្រភេទឯកសារ</label>
                        <input list="document_type_suggestions" class="form-control" id="member_id_number_docs" name="member_id_number_docs" placeholder="អ.ខ៣" value="{{$m['member_id_number_docs']}}">
                        <datalist id="document_type_suggestions">
                            <option value="អ.ខ៣">អ.ខ៣</option>
                            <option value="ឯ.អ">ឯ.អ</option>
                        </datalist>
                    </div>


                </div>

                <div class="col-md-6 col-lg-3 mb-3">
                    <p>អាស័យដ្ធានបច្ចុប្បន្ន</p>
                    <div class="mb-3">
                        <label for="commune_select" class="form-label">ខេត្ត</label>
                        <select class="form-select" id="province_present" name="province" onchange="loadLocation()">
                            <!-- Options will be populated dynamically -->
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="commune_select" class="form-label">ស្រុក</label>
                        <select class="form-select" id="district_present" name="district" onchange="loadLocation()">
                            <!-- Options will be populated dynamically -->
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="commune_select" class="form-label">ឃុំ/សង្កាត់</label>
                        <select class="form-select" id="commune_present" name="commune" onchange="loadLocation()">
                            <!-- Options will be populated dynamically -->
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="village_select" class="form-label">ភូមិ</label>
                        <select class="form-select" id="village_present" name="village">
                            <!-- Options will be populated dynamically -->
                        </select>
                    </div>
                    <div class="mb-3 d-flex gap-3">
                        <div>
                            <label for="member_house_number" class="form-label">ខ្នងផ្ទះ</label>
                            <input type="text" class="form-control" id="member_house_number" name="member_house_number" readonly value="{{$m['house_name']}}">
                        </div>
                        <div>
                            <label for="member_family_number" class="form-label">គ្រួសារទី</label>
                            <input type="number" class="form-control" id="member_family_number" name="member_family_number" readonly value="{{$m['family_name']}}">
                        </div>
                    </div>


                </div>
                <hr/>
                <div class="col-md-6 col-lg-3 mb-3" style="margin-top: 1rem">
                    <p>ព័ត៍មានលំអិត</p>
                    <div class="mb-3">
                        <label for="role_select" class="form-label">តួនាទីរដ្ឋ/មុខរបរ</label>
                        <input list="role_suggestionss" class="form-control" id="role_select" placeholder="កសិករ" name="job"  value="{{$m['member_job']}}">
                        <datalist id="role_suggestionss">
                            <option value="កសិករ">កសិករ (Farmer)</option>
                            <option value="សិស្សនិសិត្ស">សិស្សនិសិត្ស </option>
                            <option value="គ្រូបង្រៀន">គ្រូបង្រៀន (Teacher)</option>
                            <option value="វេជ្ជបណ្ឌិត">វេជ្ជបណ្ឌិត (Doctor)</option>
                            <option value="អ្នកសិល្បៈ">អ្នកសិល្បៈ (Artist)</option>
                            <option value="ភ្នាក់ងារធនាគារ">ភ្នាក់ងារធនាគារ (Bank Agent)</option>
                            <option value="អ្នកលក់">អ្នកលក់ (Seller)</option>
                            <option value="អ្នកធ្វើការងារ">អ្នកធ្វើការងារ (Worker)</option>
                            <option value="អ្នកបច្ចេកវិទ្យា">អ្នកបច្ចេកវិទ្យា (Technician)</option>
                            <option value="កម្មករ">កម្មករ (Laborer)</option>
                            <option value="អភិបាល">អភិបាល (Administrator)</option>
                            <option value="បុគ្គលិក">បុគ្គលិក (Staff)</option>
                        </datalist>
                    </div>

                    <div class="mb-3">
                        <label for="education_level" class="form-label">កម្រិតវប្បធម៌</label>
                        <input list="education_suggestions" class="form-control" id="education_level" placeholder="វិទ្យាល័យ" name="education_level" value="{{$m['education_level']}}">
                        <datalist id="education_suggestions">
                            <option value="មត្តេយ្យសិក្សា">មត្តេយ្យសិក្សា (Primary School)</option>
                            <option value="ថ្នាក់ទី១">ថ្នាក់ទី១</option>
                            <option value="ថ្នាក់ទី២">ថ្នាក់ទី២</option>
                            <option value="ថ្នាក់ទី៣">ថ្នាក់ទី៣</option>
                            <option value="ថ្នាក់ទី៤">ថ្នាក់ទី៤</option>
                            <option value="ថ្នាក់ទី៥">ថ្នាក់ទី៥</option>
                            <option value="ថ្នាក់ទី៦">ថ្នាក់ទី៦</option>
                            <option value="វិទ្យាល័យ">វិទ្យាល័យ (High School)</option>
                            <option value="មធ្យមសិក្សា">មធ្យមសិក្សា (Secondary School)</option>
                            <option value="បរិញ្ញាបត្រ">បរិញ្ញាបត្រ (Bachelor's Degree)</option>
                            <option value="បរិញ្ញាបត្រជាន់ខ្ពស់">បរិញ្ញាបត្រជាន់ខ្ពស់ (Master's Degree)</option>
                        </datalist>
                    </div>

                    <div class="mb-3">
                        <label for="commune_select" class="form-label">ទូរស័ព្ទទំនាក់ទំនង </label>
                        <input type="text" class="form-control" placeholder="0972460999" name="phone" value="{{$m['member_phone_no']}} " />
                    </div>
                    <div class="mb-3">
                        <label for="membership_card" class="form-label">មាន ឬគ្មានប័ណ្ណសមាជិក</label>
                        <input list="membership_card_suggestions" class="form-control" id="membership_card" placeholder="មាន" name="member_card" value="{{$m['member_card']}}">
                        <datalist id="membership_card_suggestions">
                            <option value="មាន">មាន</option>
                            <option value="គ្មាន">គ្មាន</option>
                        </datalist>
                    </div>


                    <div class="mb-3">
                        <label for="religion_select" class="form-label">សាសនា</label>
                        <input list="religion_suggestions" class="form-control" id="religion_input" placeholder="ជ្រើសរើស" name="religion" value="{{$m['religion']}}">
                        <datalist id="religion_suggestions">
                            <option value="ពុទ្ធសាសនា">
                            <option value="គ្រិស្តសាសនា">
                            <option value="អ៊ីស្លាមសាសនា">
                        </datalist>
                    </div>

                    <div class="mb-3">
                        <label for="member_migration_in" class="form-label">ចំណាក ស្រុក</label>
                        <input list="province_suggestions" class="form-control" id="member_migration_in" placeholder="ភ្នំពេញ" name="migrate" value="{{$m['member_migration_in']}}">
                        <datalist id="province_suggestions">
                            <option value="ភ្នំពេញ">ភ្នំពេញ</option>
                            <option value="បាត់ដំបង">បាត់ដំបង</option>
                            <option value="បន្ទាយមានជ័យ">បន្ទាយមានជ័យ</option>
                            <option value="កំពង់ចាម">កំពង់ចាម</option>
                            <option value="កំពង់ឆ្នាំង">កំពង់ឆ្នាំង</option>
                            <option value="កំពង់ស្ពឺ">កំពង់ស្ពឺ</option>
                            <option value="កំពង់ធំ">កំពង់ធំ</option>
                            <option value="កណ្ដាល">កណ្ដាល</option>
                            <option value="កោះកុង">កោះកុង</option>
                            <option value="ក្រចេះ">ក្រចេះ</option>
                            <option value="មណ្ឌលគីរី">មណ្ឌលគីរី</option>
                            <option value="ភ្នំភាគ">ភ្នំភាគ</option>
                            <option value="ព្រៃវែង">ព្រៃវែង</option>
                            <option value="ពួកសាត់">ពួកសាត់</option>
                            <option value="រតនគីរី">រតនគីរី</option>
                            <option value="សៀមរាប">សៀមរាប</option>
                            <option value="ភ្នំពេញ">ភ្នំពេញ</option>
                            <option value="ព្រៃវែង">ព្រៃវែង</option>
                            <option value="តាកែវ">តាកែវ</option>
                            <option value="ឧត្ដរមានជ័យ">ឧត្ដរមានជ័យ</option>
                            <option value="កែប">កែប</option>
                            <option value="ត្បូងឃ្មុំ">ត្បូងឃ្មុំ</option>
                            <option value="ព្រះវិហារ">ព្រះវិហារ</option>
                            <option value="ប៉ៃលិន">ប៉ៃលិន</option>
                        </datalist>

                    </div>
                    <div class="mb-3">
                        <label for="member_image" class="form-label">រូបភាពសមាជិក</label>
                        <input type="file" class="form-control" id="member_image" name="member_image" accept="image/*">

                        @if(!empty($m['member_image']))
                            <div class="mt-2">
                                <img src="{{ asset($m['member_image']) }}" alt="Member Image" width="120" style="border-radius: 5px;">
                            </div>
                        @endif
                    </div>


                </div>
            </div>
            @if($permission['member']['edit'])
            <button type="submit" class="btn btn-primary">ដាក់ស្នើរ</button>
            @endif
        </form>

    </div>


    <x-app.footer />

</main>


<script>


    function remove(id) {
    // Ask for user confirmation
    if (confirm('តើអ្នកចង់ប្តូរសមាជិកនេះចេញពីសមាជិកមែនទេ?')) {
        $.ajax({
            url: '{{ route('members.remove_member') }}',
            method: 'POST',
            data: {
                id: id,
                house_id: 0,
                _token: '{{ csrf_token() }}'
            },
            success: function(data) {
                alert('សមាជិកត្រូវបានផ្លាស់ប្តូរចេញពីបញ្ជីសមាជិកជោគជ័យ.');
                window.location.href = '{{ route("members.list") }}';
            },
            error: function(xhr) {
                console.error('Error:', xhr);
                alert('An error occurred while processing your request.');
            }
        });
    } else {
        alert('អ្នកបានបោះបង់.');
    }
}

function delete_member(id) {
    // Ask for user confirmation
    if (confirm('តើអ្នកចង់លុបទិន្នន័យចេញពីប្រព័ន្ធមែនទេ? ')) {
        $.ajax({
            url: '{{ route('members.delete_data') }}',
            method: 'POST',
            data: {
                id: id,
                house_id: 0,
                _token: '{{ csrf_token() }}'
            },
            success: function(data) {
                alert('ទិន្នន័យសមាជិកត្រូវបានលុបចេញពីប្រពន្ធ័.');
                window.location.href = '{{ route("members.list") }}';
            },
            error: function(xhr) {
                console.error('Error:', xhr);
                alert('An error occurred while processing your request.');
            }
        });
    } else {
        alert('អ្នកបានបោះបង់.');
    }
}

</script>
<script>
    $(document).ready(function() {
       function loadLocationData() {
           // Initialize selected values
           let select_province = parseInt(localStorage.getItem('select_province_present')) || 2;
           let select_district = parseInt(localStorage.getItem('select_district_present')) || 204;
           let select_commune = parseInt(localStorage.getItem('select_commune_present')) || 20402;
           let select_village = parseInt(localStorage.getItem('select_village_present')) || 2040206;
           let location = null;
           let province_html = '', district_html = '', commune_html = '', village_html = '';
           Object.entries(location).forEach(([provinceCode, province]) => {
               province_html += `<option value="${provinceCode}" ${provinceCode == select_province ? 'selected' : ''}>${province.name}</option>`;
               if (provinceCode == select_province) {
                   Object.entries(province.districts).forEach(([districtCode, district]) => {
                       district_html += `<option value="${districtCode}" ${districtCode == select_district ? 'selected' : ''}>${district.name}</option>`;
                       if (districtCode == select_district) {
                           Object.entries(district.communes).forEach(([communeCode, commune]) => {

                               commune_html += `<option value="${communeCode}" ${communeCode == select_commune ? 'selected' : ''}>${commune.name}</option>`;
                               if (communeCode == select_commune) {
                                   Object.entries(commune.villages).forEach(([villageCode, village]) => {
                                       console.log(village)
                                       village_html += `<option value="${village.code}" ${village.code == select_village ? 'selected' : ''}>${village.name}</option>`;
                                   });
                               }
                           });
                       }
                   });
               }
           });

           // Set the HTML content of the dropdowns
           $('#province_present').html(province_html);
           $('#district_present').html(district_html);
           $('#commune_present').html(commune_html);
           $('#village_present').html(village_html);
       }

       loadLocationData();

       $(document).on('change', '#province_present', function() {
           let province = $(this).val();
           localStorage.setItem('select_province_present', province);
           localStorage.setItem('select_district_present', 0);
           localStorage.setItem('select_commune_present', 0);
           localStorage.setItem('select_village_present', 0);
           loadLocationData();
       });

        $(document).on('change', '#district_present', function() {
           let val = $(this).val();
           localStorage.setItem('select_district_present', val);
           localStorage.setItem('select_commune_present', 0);
           localStorage.setItem('select_village_present', 0);
           loadLocationData();
       });
            $(document).on('change', '#commune_present', function() {
           let val = $(this).val();
           localStorage.setItem('select_commune_present', val);
           localStorage.setItem('select_village_present', 0);
           loadLocationData();
       });
           $(document).on('change', '#village_present', function() {
           let val = $(this).val();
           localStorage.setItem('select_village_present', val);
           loadLocationData();
       });


   });
   </script>