<x-app-layout>
    <style>
        h3 {
            font-weight: 600;
            font-size: 16px;
            line-height: 16px;
            color: #000000;
        }

        table {
            caption-side: bottom;
            border-collapse: collapse;
            width: 100%;
        }

        table#dynamic-table {
            width: 100%;
            margin: auto;
            margin-top: 15px;
            border: 1px solid #1B59F8;
        }

        table#dynamic-table td input,
        .users-intro-info input,
        textarea {
            border: none;
            outline: none;
        }

        #t-head {
            background: #F1F3F9;
        }

        #th-2 {
            width: 245px;
            height: 40px;
        }

        #th-3 {
            width: 191px;
            height: 40px;
        }

        #th-4 {
            width: 253px;
            height: 40px;
        }

        #th-5 {
            width: 290px;
            height: 40px;
        }

        .form-section h6 {
            font-size: 16px;
            font-weight: 600;
            color: #000000;
            margin-top: 30px;
        }

        .form-group {
            margin-top: 10px;
        }

        .form-group label {
            font-size: 14px;
            font-weight: 500;
            color: #333333;
        }

        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #1b59f8;
            border-radius: 4px;
            outline: none;
            font-size: 14px;
        }

        .form-group textarea {
            resize: vertical;
            min-height: 100px;
        }

        .btn-section {
            margin-top: 50px;
            display: flex;
            gap: 20px;
            justify-content: flex-end;
        }

        .btn-section button {
            padding: 10px 25px;
            font-size: 14px;
            font-weight: 500;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .btn-save {
            background-color: #56B429;
            color: white;
        }

        .btn-save:hover {
            background-color: #4a9621;
        }

        .btn-cancel {
            background-color: #F44336;
            color: white;
        }

        .btn-cancel:hover {
            background-color: #da190b;
        }

        .btn-wait {
            background-color: #DBA008;
            color: white;
        }

        .btn-wait:hover {
            background-color: #b88907;
        }

        .back-button {
            display: inline-flex;
            align-items: center;
            margin-bottom: 20px;
            text-decoration: none;
            color: #333333;
            font-size: 16px;
        }

        .back-button svg {
            width: 33px;
            height: 33px;
            margin-right: 10px;
        }

        .Dashboard_header header {
            border-bottom: none;
        }

        .Dashboard_header header .header_box {
            border-bottom: 1px solid #ccc;
            width: 99.5%;
        }

        .user_container {
            margin-top: 30px;
        }

        .form-container {
            background: white;
            padding: 30px;
            border-radius: 4px;
        }

        .row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .col-6 {
            grid-column: span 1;
        }

        @media (max-width: 768px) {
            .row {
                grid-template-columns: 1fr;
            }

            .btn-section {
                flex-direction: column;
            }

            .btn-section button {
                width: 100%;
            }
        }
    </style>

    <header>
        <div class="d-flex justify-content-between header_box me-4">
            <h3>Add User / User Registration</h3>
        </div>
    </header>

    <div class="user_container">
        <div class="form-container" style="margin-left: 2px;">
            <a href="{{ route('user_management') }}" class="back-button">
                <svg width="33" height="33" viewBox="0 0 43 43" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M9.40625 20.1562H36.2812C36.6376 20.1562 36.9794 20.2978 37.2314 20.5498C37.4834 20.8018 37.625 21.1436 37.625 21.5C37.625 21.8564 37.4834 22.1982 37.2314 22.4502C36.9794 22.7022 36.6376 22.8438 36.2812 22.8438H9.40625C9.04987 22.8438 8.70808 22.7022 8.45608 22.4502C8.20407 22.1982 8.0625 21.8564 8.0625 21.5C8.0625 21.1436 8.20407 20.8018 8.45608 20.5498C8.70808 20.2978 9.04987 20.1562 9.40625 20.1562Z"
                        fill="#333333" />
                    <path
                        d="M9.96301 21.4997L21.1081 32.6421C21.3604 32.8944 21.5021 33.2367 21.5021 33.5935C21.5021 33.9503 21.3604 34.2925 21.1081 34.5449C20.8558 34.7972 20.5135 34.9389 20.1567 34.9389C19.7999 34.9389 19.4576 34.7972 19.2053 34.5449L7.11157 22.4511C6.98644 22.3263 6.88715 22.178 6.81941 22.0148C6.75167 21.8515 6.7168 21.6765 6.7168 21.4997C6.7168 21.323 6.75167 21.148 6.81941 20.9847C6.88715 20.8215 6.98644 20.6732 7.11157 20.5484L19.2053 8.45462C19.4576 8.2023 19.7999 8.06055 20.1567 8.06055C20.5135 8.06055 20.8558 8.2023 21.1081 8.45462C21.3604 8.70694 21.5021 9.04916 21.5021 9.40599C21.5021 9.76283 21.3604 10.105 21.1081 10.3574L9.96301 21.4997Z"
                        fill="#333333" />
                </svg>
                Back to Users
            </a>

            <h6 style="font-size: 18px; font-weight: 600; margin-top: 20px; margin-bottom: 20px;">User Information</h6>

            <form id="userForm" method="POST" action="/admin/api/register" enctype="multipart/form-data">
                @csrf

                <!-- User Basic Details Table -->
                <table id="dynamic-table">
                    <thead id="t-head">
                        <tr>
                            <th id="th-2">Full Name</th>
                            <th id="th-3">Phone Number</th>
                            <th id="th-4">Email</th>
                            <th id="th-5">User ID</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input type="text" name="name" id="name" placeholder="Enter Full Name" required></td>
                            <td><input type="text" name="phone_number" id="phone_number" placeholder="Enter Phone" required></td>
                            <td><input type="email" name="email" id="email" placeholder="Enter Email" required></td>
                            <td><input type="text" name="user_id" id="user_id" placeholder="Auto Generated" readonly></td>
                        </tr>
                    </tbody>
                </table>

                <!-- Additional Details -->
                <div class="form-section">
                    <h6>Additional Details</h6>

                    <div class="row">
                        <!-- <div class="col-6">
                            <div class="form-group">
                                <label for="role">Role</label>
                                <select name="role" id="role" required>
                                    <option value="">-- Select Role --</option>
                                    <option value="user">User</option>
                                    <option value="admin">Admin</option>
                                    <option value="vendor">Vendor</option>
                                    <option value="driver">Driver</option>
                                </select>
                            </div>
                        </div> -->

                        <div class="col-6">
                            <div class="form-group">
                                <label for="referral_code">Referral Code</label>
                                <input type="text" name="referral_code" id="referral_code" placeholder="Enter Referral Code">
                            </div>
                        </div>
                    </div>

                    <div class="form-group" style="margin-top: 10px;">
                        <label for="avatar">Avatar/Photo</label>
                        <input type="file" name="avatar" id="avatar" accept="image/*">
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="btn-section">
                    <button type="submit" class="btn-save">
                        Save User
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
       
    </script>
</x-app-layout>
