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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../assets/css/style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" /> -->
    <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> -->
    <title>Document</title>
    <style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48
        }
    </style>
</head>

<body>
    <header>
        <div class="back">
            <a href="{{url('/')}}" style="text-decoration: none;">&larr;</a>
        </div>
        <div class="epicNumber">
            VoterID no. <br> <b>{{$details->EPIC_NO}}</b>
        </div>
    </header>
    <main>
        <section class="profile-picture">
            <img class="profile-picture-img" src="../assets/images/img.jpg" alt="">
            <div class="add-camera"><img src="../assets/images/camera.png" alt=""></div>
            change profile picture
        </section>
        <section class="form">
            <form action="{{url('/update')}}/{{$details->id}}" method="post">
                @csrf
                <div class="input-div">
                    <label for="firstName">First Name</label>
                    <input type="text" name="firstname" id="firstName" placeholder="John" value="{{$details->FM_NAME_EN}}">
                </div>
                <div class="input-div">
                    <label for="lastName">Last Name</label>
                    <input type="text" name="lastname" id="lastName" placeholder="Doe" value="{{$details->LASTNAME_EN}}">
                </div>
                <div class="input-div">
                    <label for="DOB">Date Of Birth</label>
                    <input type="date" name="DOB" id="DOB" placeholder="DD/MM/YYYY" value="{{$details->DOB}}">
                </div>
                <div class="input-div">
                    <label for="Gender">Gender</label>
                    <select name="gender" id="Gender">
                        <option value="" selected disabled>Select your gender</option>
                        <option value="M" {{$details->GENDER == "M" ? "selected" : ""}}>Male</option>
                        <option value="F" {{$details->GENDER == "F" ? "selected" : ""}}>Female</option>
                        <option value="O" {{$details->GENDER == "O" ? "selected" : ""}}>Other</option>
                    </select>
                </div>
                <div class="input-div">
                    <label for="Occupation">Occupation</label>
                    <select name="occupation" id="Occupation">
                        <option value="" selected disabled>Select your occupation</option>
                        <option value="Teacher">Teacher</option>
                        <option value="Officer">Officer</option>
                    </select>
                </div>
                <div class="input-div">
                    <label for="Caste">Caste</label>
                    <select name="caste" id="Caste">
                        <option value="" selected disabled>Select your caste</option>
                        <option value="Jain">Jain</option>
                        <option value="Hindu">Hindu</option>
                        <option value="Muslim">Muslim</option>
                    </select>
                </div>
                <div class="input-div">
                    <label for="address">Address</label>
                    <textarea name="address" id="address" rows="3" cols="40">{{$details->VILLAGE_NAME_EN}}, {{$details->Block_NAME_EN}}</textarea>
                </div>
                <div class="input-div">
                    <label for="mobileNumber">Mobile No.</label>
                    <input name="mobileNumber" id="mobileNumber" type="number" value="{{$details->MOB}}">
                </div>
                <div class="input-div">
                    <label for="whatsappNumber">WhatsApp No.</label>
                    <input name="whatsappNumber" id="whatsappNumber" type="number" value="{{$details->MOB}}">
                </div>
                <div class="more-info">
                    <a href="#">more info</a>
                </div>
                <div class="submit">
                    <button>Add members</button>
                    <button type="submit">Update</button>
                </div>
            </form>
        </section>
    </main>
</body>

</html>