@extends('app.layouts.app')
@section('title', 'Mail Entry')
@section('header')

    <link href="{{ asset('src/assets/css/light/elements/search.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('src/assets/css/dark/elements/search.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('src/assets/css/light/elements/alert.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('src/assets/css/dark/elements/alert.css') }}" rel="stylesheet" type="text/css" />




@endsection

@section('content')
    <div class="layout-px-spacing">

        <div class="middle-content container-xxl p-0">

            <div class="row layout-top-spacing ">
                <div class="col-xl-12 col-lg-12 col-md-12">

                    <div class="col-lg-6 col-md-6 col-sm-9 filtered-list-search mx-auto mt-3">
                        <form class="form-inline my-2 my-lg-0 justify-content-center" id="search_user_form">
                            <div class="w-100">
                                <input type="number" class="w-100 form-control product-search br-30" id="input-search"
                                    placeholder="Client ID">
                                <button
                                    class="btn btn-primary _effect--ripple waves-effect waves-light profile-search-input"><svg
                                        xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="feather feather-search">
                                        <circle cx="11" cy="11" r="8"></circle>
                                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                                    </svg></button>
                            </div>
                        </form>


                        @session('success')
                            <div class="alert alert-light-success alert-dismissible fade show border-0 mb-4 mt-3"
                                role="alert">
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <svg
                                        xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="feather feather-x close" data-bs-dismiss="alert">
                                        <line x1="18" y1="6" x2="6" y2="18"></line>
                                        <line x1="6" y1="6" x2="18" y2="18"></line>
                                    </svg></button>
                                <div class="icon-container">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="feather feather-check-circle">
                                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
                                    </svg><span class="icon-name ml-2">
                                        {{ session('success') }}. <b>
                                            Tracking ID: {{ session('mail_id') }}
                                        </b>
                                    </span>
                                </div>
                            </div>
                        @endsession


                        @session('error')
                            <div class="alert alert-light-danger alert-dismissible fade show border-0 mb-4 mt-3" role="alert">
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <svg
                                        xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="feather feather-x close" data-bs-dismiss="alert">
                                        <line x1="18" y1="6" x2="6" y2="18"></line>
                                        <line x1="6" y1="6" x2="18" y2="18"></line>
                                    </svg></button>
                                <div class="icon-container">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle">
                                        <circle cx="12" cy="12" r="10"></circle>
                                        <line x1="15" y1="9" x2="9" y2="15"></line>
                                        <line x1="9" y1="9" x2="15" y2="15"></line>
                                    </svg><span class="icon-name ml-2">

                                        {{ session('error') }}
                                    </span>
                                </div>
                            </div>
                        @endsession

                       @if($errors->any())
                            @foreach($errors->all() as $error)
                                <div class="alert alert-light-danger alert-dismissible fade show border-0 mb-4 mt-3" role="alert">
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <svg
                                            xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" class="feather feather-x close" data-bs-dismiss="alert">
                                            <line x1="18" y1="6" x2="6" y2="18"></line>
                                            <line x1="6" y1="6" x2="18" y2="18"></line>
                                        </svg></button>
                                    <div class="icon-container">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle">
                                            <circle cx="12" cy="12" r="10"></circle>
                                            <line x1="15" y1="9" x2="9" y2="15"></line>
                                            <line x1="9" y1="9" x2="15" y2="15"></line>
                                        </svg><span class="icon-name ml-2">
                                            {{ $error }}
                                        </span>
                                    </div>
                                </div>
                            @endforeach
                       @endif

                    </div>



                    <div id="profile-details">

                    </div>

                </div>

            </div>
        </div>


    </div>



@endsection

@section('footer')
    <script src="{{ asset('src/ajax.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('#search_user_form').on('submit', function(e) {
                e.preventDefault();

                $('.alert').remove();
                var data = {
                    _token: "{{ csrf_token() }}",
                    user_id: $('#input-search').val()
                };

                ajax_call('post', 'get-mail-entry-form', data).then(function(response) {
                    $('#profile-details').html(response.html);
                }).catch(function(error) {
                    console.log(error);
                    if (error.status === 404) {
                        error_alert(error.responseJSON.message);
                        $('#profile-details').html('');
                    }
                });
            });
        });
    </script>

@endsection
