@extends('layouts.admin')

@section('title')
    Ananas | Edit Word
@endsection

@section('words')
    active {{session('sidebar_color')}}
@endsection

@section('breadcrumb')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
            <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="javascript:;">Pages</a></li>
            <li class="breadcrumb-item text-sm text-dark active" aria-current="page">Edit Word</li>
        </ol>
        <h6 class="font-weight-bolder mb-0">Edit Word</h6>
    </nav>
@endsection

@section('style')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    <style>
        .fixed-plugin .badge {
            border: 1px solid #fff;
            border-radius: 50%;
            cursor: pointer;
            display: inline-block!important;
            height: 32px;
            margin-right: 5px;
            position: relative;
            width: 32px;
            transition: all 0.2s ease-in-out;
        }
    </style>
@endsection

@section('content')

    <div class="row marginT1">
        <div class="col-md-12 col-sm-12 col-xxl-8 offset-xxl-2 col-xl-10 offset-xl-1 ">

            <div class="card my-4">
                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                    <div class="{{session('sidebar_color')}} border-radius-lg pt-4 pb-3">
                        <h6 class="text-white text-capitalize ps-3">Word Detail</h6>
                    </div>
                </div>
                <div class="card-body px-0 pb-2">
                    <form method="post" action="{{route('word.updateDetail',['id'=>$word->id])}}">
                        @csrf
                        <div class="d-flex col-12 row ms-1">
                            <div class="form-group col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
                                <label for="title">title</label>
                                <input type="text" class="form-control" id="title" name="title" aria-describedby="title" value="{{$word->title}}" required>
                            </div>
                            <div class="form-group col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
                                <label for="meaning">meaning</label>
                                <input type="text" class="form-control" id="meaning" name="meaning" aria-describedby="meaning" value="{{$word->meaning}}" required>
                            </div>
                        </div>

                        <div class="d-flex  col-12 row ms-1 mt-2">
                            <div class="form-group col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                <label for="pronunciation">pronunciation</label>
                                <input type="text" class="form-control" id="pronunciation" name="pronunciation" aria-describedby="pronunciation" value="{{$word->pronunciation}}" placeholder="Optional">
                            </div>
                            <div class="form-group col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                <label for="order">order</label>
                                <input type="text" class="form-control" id="order" name="order" aria-describedby="order" value="{{$word->order}}" required>
                            </div>
                        </div>
                        <div class=" col-2 mt-4 float-end">
                            <button type="submit" class="btn {{session('sidebar_color')}} float-end me-3">Update</button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card  mt-7">
                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                    <div class="{{session('sidebar_color')}}  border-radius-lg pt-4 pb-3">
                        <h6 class="text-white text-capitalize ps-3">Sound</h6>
                    </div>
                </div>
                <div class="card-body px-0 pb-2">

                    <form method="post" action="{{route('word.uploadSound',['id'=>$word->id])}}" enctype="multipart/form-data">
                        @csrf
                        <div class="d-flex col-12 row ms-1">
                            <div class="form-group col-lg-5 col-md-5 col-sm-12 col-xs-12">
                                <label for="sound_file">Sound</label>
                                <input type="file" class="form-control" id="sound_file" name="sound_file" accept="audio/*" aria-describedby="sound_file" >
                            </div>
                            <div class="form-group col-lg-5 col-md-5 col-sm-12 col-xs-12">
                                <audio class="mt-4" controls >
                                    <source src="{{$word->sound}}" type="audio/ogg">
                                    <source src="{{$word->sound}}" type="audio/mpeg">
                                    Your browser does not support the audio element.
                                </audio>
                            </div>
                            <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 mt-4  ">
                                <button type="submit" class="btn {{session('sidebar_color')}} float-end me-3 mt-2">Update</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>


            @if(true)
                <div class="card  mt-7">

                    <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                        <div class="{{session('sidebar_color')}}  border-radius-lg pt-4 pb-3">
                            <h6 class="text-white text-capitalize ps-3">Example</h6>
                        </div>
                    </div>
                    <div class="card-body px-0 pb-2">
                        <form method="post" action="{{route('word.updateExample',['id'=>$word->id])}}" >
                            @csrf


                            <div class="d-flex col-12 row ms-1 mt-2">
                                <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
                                    <label for="example">Example</label>
                                    <textarea class="form-control"  name="example" id="example" rows="4" style="width:98%!important;" required>{{$word->example}} </textarea>
                                </div>
                            </div>

                            <div class="d-flex col-12 row ms-1 mt-2">
                                <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
                                    <label for="example_meaning">Example meaning</label>
                                    <textarea dir="rtl" class="form-control"  name="example_meaning" id="example_meaning" rows="4" style="width:98%!important;" required>{{$word->example_meaning}} </textarea>
                                </div>
                            </div>

                            <div class=" col-2 mt-4 float-end">
                                <button type="submit" class="btn {{session('sidebar_color')}} float-end me-3">Update</button>
                            </div>

                        </form>
                    </div>
                </div>
            @endif



            @if(false)
                <div class="card  mt-7">

                    <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                        <div class="{{session('sidebar_color')}}  border-radius-lg pt-4 pb-3">
                            <h6 class="text-white text-capitalize ps-3">Video</h6>
                        </div>
                    </div>
                    <div class="card-body px-0 pb-2">
                        <form method="post" action="{{route('word.uploadVideo',['id'=>$word->id])}}" enctype="multipart/form-data">
                            @csrf
                            <div class="d-flex col-12 row ms-1">
                                <div class="form-group col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
                                    <label for="title">Video title</label>
                                    <input type="text" class="form-control" id="title" name="title" aria-describedby="title" value="{{$word->video?$word->video->title:""}}" required>
                                </div>
                                <div class="form-group col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
                                    <label for="time">Video time</label>
                                    <input type="text" class="form-control" id="time" name="time" aria-describedby="time" value="{{$word->video?$word->video->time:""}}" required>
                                </div>
                            </div>

                            <div class="d-flex col-12 row ms-1 mt-2">
                                <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
                                    <label for="words">Video words</label>
                                    <textarea class="form-control"  name="words" id="words" rows="4" style="width:98%!important;" required>{{$word->video?$word->video->words:""}} </textarea>
                                </div>
                            </div>

                            <div class="d-flex col-12 row ms-1  mt-2">
                                <div class="form-group col-lg-5 col-md-5 col-sm-12 col-xs-12">
                                    <label for="cover_file">Cover</label>
                                    <input type="file" class="form-control" id="cover_file" name="cover_file" accept="image/*" aria-describedby="cover_file" >
                                </div>
                                <div class="form-group col-lg-5 col-md-5 col-sm-12 col-xs-12">
                                    <label for="video_file">Video</label>
                                    <input type="file" class="form-control" id="video_file" name="video_file" accept="video/*" aria-describedby="video_file" >
                                </div>
                                <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 mt-4  ">
                                    <button type="submit" class="btn {{session('sidebar_color')}} float-end me-3 mt-2">Update</button>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div class="d-flex col-12 row ms-1  mt-2">
                        <div class="form-group col-lg-5 col-md-5 col-sm-12 col-xs-12 d-flex justify-content-center align-items-center">
                            <img src="{{($word->video && $word->video->cover)?$word->video->cover:"/admin/assets/img/no_image.png"}}" alt="cover" style="width: inherit;">
                        </div>
                        <div class="form-group col-lg-5 col-md-5 col-sm-12 col-xs-12 ">
                            <video width="320" height="240" controls>
                                <source src="{{$word->video?$word->video->url:""}}" type="video/mp4">
                                <source src="{{$word->video?$word->video->url:""}}" type="video/ogg">
                                Your browser does not support the video tag.
                            </video>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>

@endsection