@extends('backend.layouts.app')
@section('content')
    <div class="aiz-titlebar text-left mt-2 mb-3 row">
        <div class="col-md-6">
            <h1 class="h3">{{ translate('Import Keywords') }}</h1>
        </div>
    </div>
    <div class="admin-list-table pt-0 border-0">
        <div class="d-flex align-items-center py-3 tableTab-freeze" style="border-top:1px solid #d2d2d2;">
            <div class="common-tbl-head m-0 ml-1">
                <div class="common-tbl-heading">{{ translate('Import Excel/CSV') }}</div>
            </div>
            <div class="table-search ml-auto">
                <i class="icons icon-search-s" id="memberSearch"></i>
            </div>
        </div>
    </div>
    <div class="d-flex align-items-start w-100" style="gap:12px">
        <form action="{{ url('keys/import') }}" method="POST" enctype="multipart/form-data" class="w-100">
            @csrf
            <select name="type" id="cars" required>
                <option value="product_application">Product Application</option>
                <option value="use_case">Use Case</option>
                <option value="brand">Brand</option>
                <option value="category">Category</option>
            </select>
            <select name="category_id" id="cars" required>
                <option value="" disabled selected>Select Category</option>
                @foreach($catgoryListing as $cat_list)
                    <option value="{{$cat_list->id}}">{{$cat_list->name}}</option>
                @endforeach
            </select>    
            <span>
                @error('type')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </span>
            <input type="file" name="file" accept=".xlsx,.xls" id="fileInput"
                style="border:1px solid #d2d2d2;background-color:#fff;border-radius:4px;padding-right:6px" />
            <button type="submit" id="submit"
                style="border:1px solid #d7282f;color:#fff;background-color:#fff;padding:4px 8px;border-radius:4px;background-color:#d7282f;">
                <i class="fa-solid fa-file-import"></i>
                Import
            </button>
            <span>
                @error('file')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </span>
            <div class="text-muted" style="margin-top: 8px;">
                (In this import, only .xlsx, .xls files are allowed)
            </div>
            @if(session('success'))
            <div class="alert alert-success" role="alert" id="flash-message">
                {{ session('success') }}
            </div>
            <script>
                window.onload = function() {
                    var flashMessage = document.getElementById('flash-message');
                    if (flashMessage) {
                        setTimeout(function() {
                            flashMessage.style.transition = 'opacity 1s ease-out'; 
                            flashMessage.style.opacity = '0'; 
                            flashMessage.style.visibility = 'hidden'; 
                            setTimeout(function() {
                                flashMessage.style.display = 'none'; 
                            }, 1000); 
                        }, 1000); 
                    }
                }
            </script>
        @endif
        </form>
    </div>
    












    <div class="modal right fade newAttributes-modal" data-refresh="true" id="newAttributes-modal1" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header close-btn" style="padding:16px;">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class=""
                        style="border-bottom:1px solid rgba(0,0,0,.1);width:100%;padding:0rem 0 12px 0;font-size:18px;">
                        Chat Preview
                    </h4>
                </div>
                <div class="modal-body" id ="editData" style="padding: 0px 16px 16px 16px">
                    <div class="ChatOuterBox">
                        <div class="headerbg">
                            <div class="ChatHeader">
                                <div class="UserIconandName">
                                    <div class="UserImage">
                                        <img src="{{ url('public/assets/img/chat/man_avatar1.jpg') }}">
                                    </div>
                                    <div class="UserName">
                                        Sharat Chauhan
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="Chatcontent">
                            <div class="latestmessageBox">
                                <div class="chatdaytimeBox">
                                    <div class="chatdaytime">
                                        Today
                                    </div>
                                </div>
                            </div>
                            <div class="row mx-0 mt-3">
                                {{-- normal chat starts --}}
                                <div class="col-12">
                                    <div class="senderouter">
                                        <div class="sendermessages">
                                            Hi, Advit
                                        </div>
                                        <div class="chattime">
                                            9:21 AM
                                        </div>
                                    </div>
                                </div>
                                {{-- normal ends here --}}

                                {{-- reply message --}}
                                <div class="col-12 mt-2">
                                    <div class="senderouter">
                                        <div class="sendermessages">
                                            {{-- own reply text starts from here --}}
                                            <div class="ownreplymessage">
                                                <div class="senderownreplytext">You</div>
                                                Hey Advit, are you there?
                                            </div>
                                            {{-- reply text ends here --}}
                                            jsut got your message
                                        </div>
                                        <div class="chattime">
                                            9:25 AM
                                        </div>
                                    </div>
                                </div>
                                {{-- reply end --}}

                                {{-- others reply message --}}
                                <div class="col-12 mt-2">
                                    <div class="senderouter">
                                        <div class="sendermessages">

                                            {{-- others reply text starts from here --}}
                                            <div class="ownreplymessage">
                                                <div class="senderownreplytext">Advit</div>
                                                please call me
                                            </div>
                                            {{-- others reply text ends here --}}
                                            jsut got your message
                                        </div>
                                        <div class="chattime">
                                            9:25 AM
                                        </div>
                                    </div>
                                </div>
                                {{-- others reply end --}}

                                {{-- image starts --}}
                                <div class="col-12 mt-2">
                                    <div class="senderouter">
                                        <div class="sendermessages">
                                            {{-- image starts --}}
                                            <div class="senderImage">
                                                <img src="{{ url('public/assets/img/aboutimgmain.webp') }}">
                                            </div>
                                            {{-- image ends --}}
                                            Please have a look
                                        </div>
                                        <div class="chattime">
                                            9:26 AM
                                        </div>
                                    </div>
                                </div>
                                {{-- image ends --}}

                                {{-- Image reply starts --}}
                                <div class="col-12 mt-2">
                                    <div class="senderouter chatimagereply">
                                        <div class="sendermessages ">
                                            {{-- image reply starts --}}
                                            <div class="ownreplymessage">
                                                <div class="replybox">
                                                    <div>
                                                        <div class="Ownmessage">You</div>
                                                        <div class="imageiconandtext">
                                                            <i class="icons icon-imagereply"></i> <span> Please have a
                                                                look</span>
                                                        </div>
                                                    </div>
                                                    <div class="imagereply">
                                                        <img src="{{ url('public/assets/img/aboutimgmain.webp') }}"
                                                            alt="dummy">
                                                    </div>
                                                </div>
                                            </div>
                                            {{-- image reply ends --}}
                                            This is a factory facility where our products manufactured.
                                        </div>
                                        <div class="chattime">
                                            9:30 AM
                                        </div>
                                    </div>
                                </div>
                                {{-- Image reply ends --}}

                                {{-- link starts here --}}
                                <div class="col-12 mt-2">
                                    <div class="senderouter">
                                        <div class="sendermessages">
                                            <div
                                                style="display: flex;align-items:start;gap:6px;background-color:rgb(248, 209, 209);padding:0 4px 0 0;border-radius:4px;height:100px;overflow:hidden;">
                                                <div class=""
                                                    style="max-width:100px;border-radius:4px 0px 0px 4px;overflow:hidden;height:100px;">
                                                    <img src="{{ url('public/assets/img/aboutimgmain.webp') }}"
                                                        style="height: 100%;width:100%;object-fit:cover;">
                                                </div>
                                                <div>
                                                    <p class="m-0">Power cozmo Pvt. ltd. sdhf fhj djkfgh jhdj fjd
                                                        djfhdjfh d</p>
                                                    <p class="m-0">Power cozmo Pvt. ltd.dfgdfg d g adgdgf </p>
                                                    <p class="m-0">Power cozmo Pvt. ltd.dfgdfg d g adgdgf </p>
                                                    <p class="m-0">Power cozmo Pvt. ltd.dfgdfg d g adgdgf </p>
                                                </div>
                                            </div>
                                            www.powercozmo.com
                                        </div>
                                        <div class="chattime">
                                            9:21 AM
                                        </div>
                                    </div>
                                </div>
                                {{-- link ends here --}}

                                {{-- ------------------------------------------------------------------------------------------------ --}}

                                {{-- Receiver --}}

                                {{-- normal chat starts --}}
                                <div class="col-12 mt-2">
                                    <div class="receiverimageandtext">
                                        <div class="messengerImageBox">
                                            <img src="{{ url('public/assets/img/chat/man_avatar4.jpg') }}">
                                        </div>
                                        <div class="receiverouter">
                                            <div class="receivermessages">
                                                Hello, Sharat Chauhan
                                            </div>
                                            <div class="chattime">
                                                10:00 AM
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- normal ends here --}}

                                {{-- reply chat starts --}}
                                <div class="col-12 mt-2">
                                    <div class="receiverimageandtext">
                                        <div class="messengerImageBox">
                                            <img src="{{ url('public/assets/img/chat/man_avatar4.jpg') }}">
                                        </div>
                                        <div class="receiverouter">
                                            <div class="receivermessages">

                                                <div class="receiverownreplymessage">
                                                    <div class="senderownreplytext">You</div>
                                                    Hello, Sharat Chauhan
                                                </div>

                                                ?
                                            </div>
                                            <div class="chattime">
                                                10:02 AM
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- reply ends here --}}

                                {{-- others reply chat starts --}}
                                <div class="col-12 mt-2">
                                    <div class="receiverimageandtext">
                                        <div class="messengerImageBox">
                                            <img src="{{ url('public/assets/img/chat/man_avatar4.jpg') }}">
                                        </div>
                                        <div class="receiverouter chatimagereply">
                                            <div class="receivermessages">
                                                <div class="receiverownreplymessage">
                                                    <div class="senderownreplytext">Sharat</div>
                                                    Hi Advit
                                                </div>
                                                Hello, Sharat Chauhan
                                            </div>
                                            <div class="chattime">
                                                10:02 AM
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- others reply ends here --}}

                                {{-- others photo reply  starts --}}
                                <div class="col-12 mt-2">
                                    <div class="receiverimageandtext">
                                        <div class="messengerImageBox">
                                            <img src="{{ url('public/assets/img/chat/man_avatar4.jpg') }}">
                                        </div>
                                        <div class="receiverouter chatimagereply">
                                            <div class="receivermessages">

                                                <div class="receiverownreplymessage">
                                                    <div class="replybox">
                                                        <div>
                                                            <div class="senderownreplytext">You</div>
                                                            <div class="imageiconandtext">
                                                                <i class="icons icon-imagereply"></i> <span> Please have a
                                                                    look</span>
                                                            </div>
                                                        </div>
                                                        <div class="imagereply">
                                                            <img src="{{ url('public/assets/img/aboutimgmain.webp') }}"
                                                                alt="dummy">
                                                        </div>
                                                    </div>
                                                </div>

                                                I never thought that your factory is so huge. Great!
                                            </div>
                                            <div class="chattime">
                                                10:02 AM
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- others photo reply ends here --}}

                                {{-- image starts here --}}
                                <div class="col-12 mt-2">
                                    <div class="receiverimageandtext">
                                        <div class="messengerImageBox">
                                            <img src="{{ url('public/assets/img/chat/man_avatar4.jpg') }}">
                                        </div>
                                        <div class="receiverouter">
                                            <div class="receivermessages">
                                                <div class="receiverimage">
                                                    <img src="{{ url('public/assets/img/aboutimgmain.webp') }}">
                                                </div>
                                                I would love to visit this gorgeous factory.
                                            </div>
                                            <div class="chattime">
                                                10:00 AM
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- image ends here --}}

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('script')
    <script type="text/javascript">
        $(document).ready(function() {

            $(document).on('click', '#editUnit', function(event) {
                $('#newAttributes-modal1').modal('show');
            });
        });
    </script>
@endsection