@extends('layouts.loginandregistration')

@section('content')


<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container">

<link rel="shortcut icon" type="x-icon" href="Click and Get.png">

<section class="vh-100 d-flex justify-content-center align-items-center online-shop-background">
    <video autoplay loop muted class="position-fixed top-0 start-0 d-none d-lg-block">
        <source src="{{asset('images/CAPSTONE.mp4')}}" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <div class="d-block d-lg-none" style="background-image: url('path/to/your/mobile-background-image.jpg'); background-size: cover; background-position: center; width: 100%; height: 100%; position: fixed; top: 0; left: 0;"></div>
        <div class="container">
            
        <div class="card w-150 ms-auto" style="max-width: 450px; max-height: 960px;">
    
        <div class="card-header text-center">
        <a class="navbar-brand" href="{{ url('/') }}" style="font-size: 22px; text-decoration: none; color: inherit;" >Register Click & Get</a>

        <img src="{{ asset('images/Click and Get.png') }}" alt="Logo" style="width: 90px; height: 50px; border-radius: 50%;">

           
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('register') }}" enctype="multipart/form-data">
                @csrf

              @if($errors->any())
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

              
                         <!-- Role input -->
                        

                         <div class="row">
                        <div class="col-md-12">
                            <!-- First Name input -->
                            <div class="form-outline mb-0">
                                <label class="form-label" for="name">{{ __('First Name') }}</label>
                                <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus/>
                                @error('name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>

                    <div class="col-md-12">
                            <!-- First Name input -->
                            <div class="form-outline mb-0">
                                <label class="form-label" for="middle_name">{{ __('Middle Name') }}</label>
                                <input id="middle_name" type="text" class="form-control @error('middle_name') is-invalid @enderror" name="middle_name" value="{{ old('middle_name') }}"  autocomplete="middle_name" autofocus/>
                                @error('middle_name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <!-- Last Name input -->
                            <div class="form-outline mb-0">
                                <label class="form-label" for="last_name">{{ __('Last Name') }}</label>
                                <input id="last_name" type="text" class="form-control @error('last_name') is-invalid @enderror" name="last_name" value="{{ old('last_name') }}" required autocomplete="last_name" autofocus/>
                                @error('last_name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <!-- Last Name input -->
                            <div class="form-outline mb-0">
                                <label class="form-label" for="suffix">{{ __('Suffix') }}</label>
                                <input id="suffix" type="text" class="form-control @error('suffix') is-invalid @enderror" name="suffix" value="{{ old('suffix') }}"  autocomplete="suffix" autofocus/>
                                @error('suffix')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                    </div>





                        <!-- Other input fields -->
                        <div class="form-group row">
                            <div class="col-md-6">
                      

                                <label for="municipal">Municipality</label>
                                
                                <select name="municipal" class="form-control" id="municipalSelect" onchange="loadBarangays(this)" required>
                                <option value="">Select Municipal</option>
                                <option value="Baungon">Baungon</option>
                                <option value="Cabanglasan">Cabanglasan</option>
                                <option value="City of Malaybalay">City of Malaybalay</option>
                                <option value="City of Valencia">City of Valencia</option>
                                <option value="Damulog">Damulog</option>
                                <option value="Dangcagan">Dangcagan</option>
                                <option value="Don Carlos">Don Carlos</option>
                                <option value="Impasug-ong">Impasug-ong</option>
                                <option value="Kadingilan">Kadingilan</option>
                                <option value="Kalilangan">Kalilangan</option>
                                <option value="Kibawe">Kibawe</option>
                                <option value="Kitaotao">Kitaotao</option>
                                <option value="Lantapan">Lantapan</option>
                                <option value="Libona">Libona</option>
                                <option value="Manolo">Manolo</option>

                                <option value="Malitbog">Malitbog</option>
                                <option value="Maramag">Maramag</option>
                                <option value="Quezon">Quezon</option>
                                <option value="San Fernando">San Fernando</option>
                                <option value="Sumilao">Sumilao</option>
                                <option value="Talakag">Talakag</option></select>

                                    </div>
                                    <div class="col-md-6">
                                        <label for="barangay">Barangay</label>
                                        <select name="barangay" class="form-control" id="barangaySelect" required>
                                            <option value="">Select Barangay</option>
                                        </select>
                                    </div>


                                    <div class="row">
    <div class="col-md-12">
        <!-- landmark input -->
        <div class="form-outline mb-0">
            <label class="form-label" for="streets">{{ __('Streets') }}</label>
            <input id="streets" type="text" class="form-control @error('streets') is-invalid @enderror" placeholder="Street Name, Building, House No." name="streets" value="{{ old('streets') }}" required autocomplete="streets" autofocus/>
            @error('streets')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
            @enderror

            <div class="row">
    <div class="col-md-12">
        <!-- Phone number input -->
        <div class="form-outline mb-0">
            <label class="form-label" for="phone">{{ __('Phone Number') }}</label>
            <input id="phone" type="text" class="form-control @error('phone') is-invalid @enderror" name="phone" value="{{ old('phone') }}" required autocomplete="phone" autofocus maxlength="11"/>
            @error('phone')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
            @enderror
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <!-- Email address input -->
        <div class="form-outline mb-0">
            <label class="form-label" for="email">{{ __('Email Address') }}</label>
            <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email"/>
            @error('email')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
            @enderror
    </div>

<div class="row">
    <div class="col-md-12">
        <!-- Password input -->
        <div class="form-outline mb-0">
            <label class="form-label" for="password">{{ __('Password') }}</label>
            <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password"/>
            @error('password')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
            @enderror
        </div>

<div class="row">
    <div class="col-md-12">
        <!-- Confirm Password input -->
        <div class="form-outline mb-0">
            <label class="form-label" for="confirmpassword">{{ __('Confirm Password') }}</label>
            <input id="confirmpassword" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password"/>
        </div>

        <input type="hidden" name="role_as" value="0">


                            <!-- <div class="form-outline mb-4">
    <label class="form-label" for="images">Id picture (back to back)</label>
    <input id="images" type="file" class="form-control @error('images') is-invalid @enderror" name="images[]" multiple accept="image/*" />
    @error('images')
        <span class="invalid-feedback" role="alert">
            <strong>{{ $message }}</strong>
        </span>
    @enderror
</div> -->
                            <div class="d-flex my-4 justify-content-center flex-column mx-4 mb-3 mb-lg-4">
                            <button type="submit" class="btn btn-outline-primary btn-lg">{{ __('Register') }}</button>
                            <p class="small fw-bold mt-2 pt-1 mb-0">Already have an account? <a href="{{url('/login')}}"
                                class="link-danger">Login</a></p>
                            </div>
                </section>
                                    </form>
                       

<script>
   function loadBarangays(municipalSelect) {
        var barangaySelect = document.getElementById('barangaySelect');
        var selectedMunicipal = municipalSelect.value;

        // Clear existing options
        barangaySelect.innerHTML = '<option value="">Select Barangay</option>';

        var barangaysByMunicipal = {
          'Baungon': ['Balintad', 'Buenavista', 'Danatag', 'Kalilangan', 'Lacolac', 'Langaon', 'Liboran', 'Lingating', 'Mabuhay', 'Mabunga', 'Nicdao', 'Imbatug (Poblacion)', 'Pualas', 'Salimbalan', 'San Vicente', 'San Miguel'],

          'Cabanglasan': ['Anlogan', 'Cabulohan', 'Canangaan', 'Capinonan', 'Dalacutan', 'Freedom', 'Iba', 'Imbatug', 'Jasaan', 'Lambangan', 'Mandaing', 'Mandahikan', 'Mauswagon', 'Paradise', 'Poblacion'],

    'City of Malaybalay': ['Bangcud', 'Barangay 1 (Poblacion)', 'Barangay 2 (Poblacion)', 'Barangay 3 (Poblacion)', 'Barangay 4 (Poblacion)', 'Barangay 5 (Poblacion)', 'Barangay 6 (Poblacion)', 'Barangay 7 (Poblacion)', 'Barangay 8 (Poblacion)', 'Barangay 9 (Poblacion)', 'Barangay 10 (Poblacion)', 'Barangay 11 (Poblacion)', 'Barangay 12 (Poblacion)', 'Barangay 13 (Poblacion)', 'Barangay 14 (Poblacion)', 'Barangay 15 (Poblacion)', 'Barangay 16 (Poblacion)', 'Cabangahan', 'Caburacanan', 'Canayan', 'Capitan Angel', 'Casisang', 'Dao', 'Imbayao', 'Indalasa', 'Kalasungay', 'Kibalabag', 'Laguitas', 'Linabo', 'Magsaysay', 'Managok', 'Mapayag', 'Mapulo', 'Matin-ao', 'Merangeran', 'Mibantang', 'Patpat', 'Saint Peter', 'San Jose', 'San Martin', 'Silae', 'Simaya', 'Sinanglanan', 'Sinayawan', 'Sumpong', 'Zamboanguita'],

    'City of Valencia': ['Bagontaas', 'Banlag', 'Barobo', 'Batangan', 'Catumbalon', 'Colonia', 'Concepcion', 'Dagat-Kidavao', 'Guinoyuran', 'Kahapunan', 'Lilingayon', 'Lourdes', 'Lumbo', 'Lumayao', 'Lurogan', 'Mabuhay', 'Mailag', 'Maapag', 'Mount Nebo', 'Nabago', 'Poblacion', 'San Carlos', 'San Isidro', 'Sinabuagan', 'Sinayawan', 'Sugod', 'Tongantongan', 'Tugaya', 'Vintar'],
    'Damulog': ['Aludas', 'Angga-an', 'Dagumba-an', 'Kinapat', 'Kiraon', 'Kitingting', 'Lagandang', 'Macapari', 'Maican', 'Migcawayan', 'New Compostela', 'Old Damulog', 'Omonay', 'Poblacion (New Damulog)', 'Pocopoco', 'Sampagar', 'San Isidro'],
'Dangcagan': ['Barongcot', 'Bugwak', 'Dolorosa', 'Kapalaran', 'Kianggat', 'Lourdes', 'Macarthur', 'Miaray', 'Migcuya', 'New Visayas', 'Osmeña', 'Poblacion', 'Sagbayan', 'San Vicente'],
'Don Carlos': ['Balaoro', 'Baroy', 'Bershiba', 'Bocboc', 'Buyot', 'Cabadiangan', 'Calaocalao', 'Don Carlos Norte', 'Embayao', 'Kalubihon', 'Kasigkot', 'Kawilihan', 'Kiara', 'Kibatang', 'Mahayahay', 'Manlamonay', 'Maraymaray', 'Mauswagon', 'Minsalagan', 'New Nongnongan (Masimag)', 'New Visayas', 'Old Nongnongan', 'Pinamaloy', 'Don Carlos Sur (Poblacion)', 'Pualas', 'San Antonio East', 'San Antonio West', 'San Francisco', 'San Nicolas (Banban)', 'San Roque', 'Sinangguyan', 'Bismartz'],
'Impasug-ong': ['Bontongon', 'Bulonay', 'Capitan Bayong', 'Cawayan', 'Dumalaguing', 'Guihean', 'Hagpa', 'Impalutao', 'Kalabugao', 'Kibenton', 'La Fortuna', 'Poblacion', 'Sayawan'],
'Kadingilan': ['Bagor', 'Balukbukan', 'Be alive', 'Binoongan', 'Cabadiangan', 'Get better', 'Guided', 'Kibalagon', 'Kiulom', 'Lazy', 'Maliano', 'New Town', 'Pay ace', 'Poblacion', 'Salvation', 'San Andres', 'Sibonga'],
'Kalilangan': ['Baborawon', 'Bangbang', 'Canituan', 'Kibaning', 'Kinura', 'Lampanusan', 'Malinao', 'Ninoy Aquino', 'Pamotolon (Pamotdon)', 'Poblacion', 'Public', 'San Vicente Ferrer', 'West Poblacion'],
'Kibawe': ['Balintawak', 'Bukang Liwayway', 'Cagawasan', 'East Kibawe (Poblacion)', 'Gutapol', 'Kiorao', 'Kisawa', 'Labuagon', 'Magsaysay', 'Marapangi', 'Mascariñas', 'Natulongan', 'New Kidapawan', 'Old Kibawe', 'Palma', 'Pinamula', 'Romagooc', 'Sampaguita', 'Sanipon', 'Spring', 'Talahiron', 'Tumaras', 'West Kibawe (Poblacion)'],
'Kitaotao': ['Bagong Silang', 'Balangigay', 'Balaoro', 'Bershiba', 'Bobong', 'Bolocaon', 'Cabalantian', 'Calapaton', 'Digongan', 'Kiabo', 'Kahusayan', 'Kalumihan', 'Kauyonan', 'Kimolong', 'Kitaihon', 'Kitobo', 'Magsaysay', 'Malobalo', 'Metebagao', 'Napalico', 'Pagan', 'Panganan', 'Poblacion', 'Salvation', 'San Andres', 'San Isidro', 'San Lorenzo', 'Santo Rosario', 'Sinuda (Simod)', 'Tandong', 'Tawas', 'White Kulaman', 'Kiulom', 'Binoongan', 'Kipilas', 'East Dalurong', 'West Dalurong'],
'Lantapan': ['Alanib', 'Baclayon', 'Balila', 'Bantuanon', 'Basak', 'Bugcaon', 'Capitan Juan', 'Cawayan', 'Ka-atoan (Kaatuan)', 'Kibangay', 'Kulasihan', 'Poblacion', 'Songco', 'Victory'],
'Libona': ['Capihan', 'Crossing', 'Gango', 'Kiliog', 'Kinawe', 'Laturan', 'Maambong', 'Nangka', 'Palabucan', 'Poblacion', 'Pongol', 'San Jose', 'Santa Fe', 'Sil-ipon'],
'Malitbog': ['Kalingking', 'Kiabo', 'Mindagat', 'Omagling', 'Patpat', 'Poblacion', 'Sampiano', 'San Luis', 'Siloo', 'Santa Inez', 'Sumalsag'],
'Manolo': ['Agusan Canyon', 'Alae', 'Dahilayan', 'Dalirig', 'Damilag', 'Diclum', 'Guilang-guilang', 
'Kalugmanan', 'Kalugmanan', 'Lindaban', 'Lingion', 'Lunocan', 'Maluko', 'Mambatangan', 
'Mampayag', 'Mantibugao', 'Minsuro', 'San Miguel', 'Sankanan', 'Santiago', 'Santo Niño', 'Tankulan', 'Ticala'],

'Maramag': ['Anahawon', 'Base Camp', 'Bayabason', 'Camp 1', 'Colambugon', 'Dagumba-an', 'Danggawan', 'Dologon', 'Kisanday', 'Kuya', 'La Roxas', 'Panadtalan', 'Panalsalan', 'North Poblacion', 'South Poblacion', 'San Miguel', 'San Roque', 'Tubigon', 'Kiharong', 'Bagongsilang'],

'Quezon': ['Butong', 'Cebole', 'Delapa', 'Dumalama', 'C-Handumanan', 'Cawayan', 'Kiburiao', 'Kipaypayon', 'Lagua', 'Libertad', 'Linabo', 'Lipa', 'Lumintao', 'Magsaysay', 'Mahayag', 'Manuto', 'Merangeran', 'Mibantang', 'Minongan', 'Minsalirac', 'Minsamongan', 'Paitan', 'Palacapao', 'Pinilayan', 'Poblacion (Kiokong)', 'Puntian', 'Salawagan', 'San Isidro', 'San Jose', 'San Roque', 'Santa Cruz', 'Santa Filomena'],
'San Fernando': ['Bancasi', 'Bongabong', 'Cananga', 'Cogonan', 'Dalagsaan', 'Mabuhay', 'Poblacion', 'Sapong', 'Tigpanaloc', 'Tugbungan'],
'Sumilao': ['Kisolon', 'Culasi', 'Licoan', 'Lupiagan', 'Ocasion', 'Puntian', 'San Roque', 'San Vicente', 'Poblacion', 'Vista Villa'],
'Talakag': ['Basak', 'Baylanan', 'Cacaon', 'Colawingon', 'Cosina', 'Dagumbaan', 'Dagundalahon', 'Dominorog', 'Indulang', 'Lantud', 'Liguron', 'Lingi‑on', 'Lirongan', 'Miarayon', 'Sagaran', 'Salucot', 'San Antonio', 'San Isidro', 'San Miguel', 'San Rafael', 'Tagbak', 'Tikalaan'],

            
            // Add more cities and their corresponding barangays as needed
        };

        // Populate barangay options based on selected municipal
        if (selectedMunicipal in barangaysByMunicipal) {
            var barangays = barangaysByMunicipal[selectedMunicipal];
            for (var i = 0; i < barangays.length; i++) {
                var option = document.createElement('option');
                option.value = barangays[i];
                option.textContent = barangays[i];
                barangaySelect.appendChild(option);
            }
        }
    }
</script>




      
@endsection