@extends('adminlte::page')

@section('title', '收件箱')

@section('content_header')
<h1>收件箱</h1>
@stop

@section('content')
<div class="row">
    <div class="col-md-4">
        <div class="card card-primary">
            <div class="card-header">
                <h3 class="card-title">邮件地址</h3>
            </div>
            <div class="card-body">
                <table class="table">
                    <thead>
                        <tr>
                            <th>邮箱</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($mail_address_list as $mail_address)
                        <tr>
                            <td>{{$mail_address->mail}}</td>
                            <td>
                                <a class="btn btn-primary info-btn btn-sm"
                                    href="{{route('home', ['mail'=>$mail_address->mail])}}" type="button">查看邮件</a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

    </div>
    <div class="col-md-4">
        <form class="card card-primary" method="post">
            @csrf
            <div class="card-header">
                <h3 class="card-title">添加新邮箱</h3>
            </div>
            <div class="card-body">
                <div class="input-group mb-3">
                    <input type="text" class="form-control" name="prefix" id="prefixInput" value=""
                        placeholder="Enter text">
                    <div class="input-group-append">
                        <span class="input-group-text">@</span>
                    </div>
                    <select class="form-control select2" name="domain" id="domainList" style="width: auto;">
                        @foreach($domain_list as $domain)
                        <option value="{{$domain}}">{{$domain}}</option>
                        @endforeach
                    </select>
                </div>

                <div class="alert alert-info alert-dismissible">
                    最多可创建{{$private_limit}}个私人邮箱地址.
                </div>
            </div>
            <div class="card-footer">
                <button type="submit" class="btn btn-primary">添加</button>
            </div>
        </form>
    </div>


    @stop

    @section('css')
    {{-- Add here extra stylesheets --}}
    <!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet"
        crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css"
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <style>
        .page-container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .main-content {
            flex-grow: 1;
        }

        .footer {
            flex-shrink: 0;
            bottom: 0;
            width: 100%;
            text-align: center;
            padding: 10px;
            background-color: #f8f9fa;
        }

        .select2-container .select2-selection--single {
            height: calc(1.5em + .75rem + 2px);
        }

        /* .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: calc(1.5em + .75rem);
        } */

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: calc(1.5em + .75rem + 2px);
        }

        .input-group-text {
            border-right: 0;
        }

        /* .select2-container {
            border-left: 0;
        } */
    </style>
    @stop

    @section('js')
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"
        referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" crossorigin="anonymous"
        referrerpolicy="no-referrer"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" crossorigin="anonymous"
        referrerpolicy="no-referrer"></script>
    <script>
        function generateRandomString(length) {
            var result = '';
            var characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
            var charactersLength = characters.length;
            for (var i = 0; i < length; i++) {
                result += characters.charAt(Math.floor(Math.random() * charactersLength));
            }
            return result;
        }
        $(function () {

            let randomStr = generateRandomString(8);
            $('#prefixInput').val(randomStr);

            $('.select2').select2({
                tags: true
            });

        });
    </script>
    @stop