<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="{{ asset('picture/favicon.png') }}" type="image/x-icon">
    <link rel="icon" href="{{ asset('picture/favicon.png') }}" type="image/x-icon">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
        integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="stylesheet" href="{{ asset('') }}css/custom.css" />
    <link rel="stylesheet" href="{{ asset('') }}vendor/sweetalert-master/dist/sweetalert.css" />
    <title>Tambah Member</title>
    <style>
        .invalid-feedback {
            display: block;
        }

        label {
            color: var(--colorGreen);
        }
    </style>
</head>

<body>
    <div class="container custom">
        <div class="row justify-content-center align-items-center">
            <div class="col-md-12">
                <img src="{{ asset('picture/logo.PNG') }}" class="logo-top">
                <div class="card p-5 d-block b-radius-3 card-relative">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <form method="post" action="{{ route('simpan-pelanggan') }}" id="cek-poin">
                                @csrf
                                <h3 class="color-green font-weight-bold">Hi! Yuk, Join Member
                                    <br>
                                    di Coffee Toffee
                                </h3>
                                <p style="font-size:14px">Dapatkan berbagai benefit promo menarik yang bisa kamu
                                    nikmati. Yuk! Lengkapi data dibawah ini dan jadilah bagian dari Coffee Toffee</p>
                                <br>
                                <label for="">Nama Lengkap</label>
                                <div class="input">
                                    <span class="fa fa-user mr-2"></span>
                                    <input type="text"
                                        class="form-control @error('nama_member') is-invalid @enderror" id="nama"
                                        name="nama_member" value="{{ old('nama_member') }}" placeholder="Nama Lengkap">
                                </div>
                                @error('nama_member')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                                <br>
                                <label for="">Email</label>
                                <div class="input">
                                    <span class="fa fa-envelope mr-2"></span>
                                    <input type="email"
                                        class="form-control @error('email_member') is-invalid @enderror" id="email"
                                        name="email_member" value="{{ old('email_member') }}" placeholder="Email">
                                </div>
                                @error('email_member')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                                <br>
                                <label for="">No Telepon</label>
                                <div class="input">
                                    <span class="fa fa-phone"><span class="ml-4">62</span></span>
                                    <input type="number" style="font-size: 15px"
                                        class="form-control ml-3 @error('no_hp') is-invalid @enderror" id="phone"
                                        name="no_hp" value="{{ old('no_hp') }}" placeholder="8576xxxx">
                                </div>
                                @error('no_hp')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                                <br>
                                <label for="">Tanggal Lahir</label>
                                <div class="input">
                                    <span class="fa fa-calendar mr-2"></span>
                                    <input type="date" class="form-control @error('tgl_lahir') is-invalid @enderror"
                                        id="tgl_lahir" name="tgl_lahir" value="{{ old('tgl_lahir') }}"
                                        placeholder="No Telepon">
                                </div>
                                @error('tgl_lahir')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                                <br>
                                <label for="">Gerai</label>
                                <div class="input">
                                    <span class="fa fa-store mr-2"></span>
                                    <select class="form-control @error('id_branch') is-invalid @enderror"
                                        name="id_branch">
                                        <option value=''>---Pilih Gerai---</option>
                                        @foreach ($branch as $item)
                                            <option value='{{ $item->id }}'
                                                {{ old('id_branch') == $item->id ? 'selected' : '' }}>
                                                {{ $item->cabang }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                @error('id_branch')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                                <br>

                                <label for="">Kategori Member</label>
                                <div class="input mb-3">
                                    <span class="fa fa-list mr-2"></span>
                                    <select class="form-control @error('kategori_member') is-invalid @enderror"
                                        name="kategori_member" id="categorySelect">
                                        <option value=''>---Pilih Kategori---</option>
                                        <option value='komunitas'>Komunitas</option>
                                        <option value='universitas'>Universitas</option>
                                        <option value='corporate'>Corporate</option>
                                        <option value='sekolah'>Sekolah</option>
                                    </select>
                                </div>

                                <div id="komunitasFields" style="display: none;">
                                    <label for="namaKomunitas">Nama
                                        Komunitas</label>
                                    <div class="input mb-3">
                                        <span class="fa fa-users mr-2"></span>
                                        <input type="text" id="namaKomunitas" name="nama_komunitas"
                                            class="form-control">
                                    </div>
                                </div>

                                <div id="universitasFields" style="display: none;">
                                    <label for="namaUniversitas">Nama
                                        Universitas</label>
                                    <div class="input mb-3">
                                        <span class="fa fa-university mr-2"></span>
                                        <input type="text" id="namaUniversitas" name="nama_universitas"
                                            class="form-control">
                                    </div>
                                    <label for="namaHimpunan">Nama Himpunan</label>
                                    <div class="input mb-3"> <span class="fa fa-graduation-cap mr-2"></span>
                                        <input type="text" id="namaHimpunan" name="nama_himpunan"
                                            class="form-control">
                                    </div>
                                </div>

                                <div id="corporateFields" style="display: none;">
                                    <label for="namaPerusahaan">Nama
                                        Perusahaan</label>
                                    <div class="input mb-3">
                                        <span class="fa fa-building mr-2"></span>
                                        <input type="text" id="namaPerusahaan" name="nama_perusahaan"
                                            class="form-control">
                                    </div>
                                </div>

                                <div id="sekolahFields" style="display: none;">
                                    <label for="namaSekolah">Nama
                                        Sekolah</label>
                                    <div class="input mb-3">
                                        <span class="fa fa-school mr-2"></span>
                                        <input type="text" id="namaSekolah" name="nama_sekolah"
                                            class="form-control">
                                    </div>
                                </div>


                                <button class="btn btn-primary px-4"><span class="fas fa-save"></span> Simpan</button>
                                <a href="{{ route('cek-poin') }}" class="btn btn-green px-4"><span
                                        class="fa fa-search"></span> Cek Poin</a>
                            </form>
                        </div>
                        <div class="col-md-6 d-none d-md-block">
                            <img src="{{ asset('picture/card.PNG') }}" class="img-fluid">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer py-4">
        <div class="yes-drink  d-none d-md-flex">
            <p class="mt-5">YES I DRINK INDONESIAN COFFEE</p>
        </div>
        <div class="container d-none d-md-flex  mt-2">
            <h5 class="font-weight-bold mb-0 ml-4 mr-5">Follow Us</h5>
            <span class="mr-3"><span class="fab fa-tiktok"></span> coffeetoffeeidn</span>
            <span><span class="fab fa-instagram"></span> coffeetoffeeidn</span>
        </div>
        <div class="container py-2 pl-4 d-flex d-md-none mt-2 flex-column">
            <h5 class="font-weight-bold mb-1">Follow Us</h5>
            <div>
                <span class="mr-3"><span class="fab fa-tiktok"></span> coffeetoffeeidn</span>
                <span><span class="fab fa-instagram"></span> coffeetoffeeidn</span>

            </div>
        </div>

    </div>
</body>

</html>
<script src="{{ asset('') }}vendor/sweetalert-master/dist/sweetalert.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
@if (session('status'))
    <script>
        swal({
            title: 'Selamat',
            text: 'Data berhasil disimpan. Terimakasih Sudah Bergabung Menjadi Member CoffeToffee.',
            type: 'success',
            showCancelButton: false,
            confirmButtonColor: "#92BA92",
            confirmButtonText: 'Kembali',
            closeOnConfirm: false,
        });
    </script>
@endif

@if (session('confirm'))
    <script>
        swal({
            title: 'Selamat',
            text: 'Email anda sudah terkonfirmasi!',
            type: 'success',
            showCancelButton: false,
            confirmButtonColor: "#92BA92",
            confirmButtonText: 'Ok',
            closeOnConfirm: false,
        });
    </script>
@endif

@if (session('confirm'))
    <script>
        swal({
            title: 'Selamat',
            text: 'Email anda sudah terkonfirmasi!',
            type: 'success',
            showCancelButton: false,
            confirmButtonColor: "#92BA92",
            confirmButtonText: 'Ok',
            closeOnConfirm: false,
        });
    </script>
@endif

@if (session('confirm-error'))
    <script>
        swal({
            title: 'Kesalahan',
            text: 'Konfirmasi email salah',
            type: 'error',
            showCancelButton: false,
            confirmButtonColor: "#92BA92",
            confirmButtonText: 'Kembali',
            closeOnConfirm: false,
        });
    </script>
@endif

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const categorySelect = document.getElementById('categorySelect');
        const komunitasFields = document.getElementById('komunitasFields');
        const universitasFields = document.getElementById('universitasFields');
        const corporateFields = document.getElementById('corporateFields');
        const sekolahFields = document.getElementById('sekolahFields');

        // Function to hide all conditional fields
        function hideAllFields() {
            komunitasFields.style.display = 'none';
            universitasFields.style.display = 'none';
            corporateFields.style.display = 'none';
            sekolahFields.style.display = 'none';
        }

        // Add an event listener to the select element
        categorySelect.addEventListener('change', function() {
            hideAllFields(); // Hide all fields first

            const selectedValue = this.value; // Get the selected option's value

            if (selectedValue === 'komunitas') { // Komunitas
                komunitasFields.style.display = 'block';
            } else if (selectedValue === 'universitas') { // Universitas
                universitasFields.style.display = 'block';
            } else if (selectedValue === 'corporate') { // Corporate
                corporateFields.style.display = 'block';
            } else if (selectedValue === 'sekolah') { // Sekolah
                sekolahFields.style.display = 'block';
            }
        });

        // Initialize by hiding all fields when the page loads
        hideAllFields();
    });
</script>
