@extends('admin.layout')

@section('title', 'ویرایش موزیک')


@section('content')
    <div class="block block-rounded">
        <div class="block-content fs-sm px-0 py-3">
            <form action="" method="post" enctype="multipart/form-data">
                <div class="p-4 ltr col-md-6 mx-auto text-center">
                    <div class="mb-4 text-right">
                        <label class="form-label" for="slug">آدرس موزیک</label>
                        <input dir="ltr" type="text" class="form-control" id="slug" name="slug" value="">
                    </div>
                    <div class="mb-4 text-right">
                        <label class="form-label" for="englishTitle">اسم خارجی موسیقی</label>
                        <input dir="auto" type="text" class="form-control" id="englishTitle" name="englishTitle"
                               value="">
                    </div>
                    <div class="mb-4 text-right">
                        <label class="form-label" for="alternateTitle">اسم محلی موسیقی</label>
                        <input dir="auto" type="text" class="form-control" id="alternateTitle" name="alternateTitle"
                               value="">
                    </div>
                    <div class="mb-4 text-right">
                        <label class="form-label" for="country">انتخاب کشور</label>
                        <select name="country" id="country" class="form-select rtl">
                            <option value="iran">ایرانی</option>
                            <option value="foreign">خارجی</option>
                        </select>
                    </div>
                    <div class="mb-4 text-right">
                        <label class="form-label" for="artists">خوانندگان</label>
                        <select class="js-select2 form-select" id="artists" name="artists" style="width: 100%;"
                                data-placeholder="Choose many.." multiple>
                            <option></option>
                            <option value="1" selected>HTML</option>
                            <option value="2" selected>CSS</option>
                            <option value="3">JavaScript</option>
                            <option value="4">PHP</option>
                            <option value="5">MySQL</option>
                            <option value="6">Ruby</option>
                            <option value="7">Angular</option>
                            <option value="8">React</option>
                            <option value="9">Vue.js</option>
                        </select>
                    </div>
                    <div class="mb-4 text-right">
                        <label class="form-label" for="tags">برچسب ها</label>
                        <select class="js-select2 form-select" id="tags" name="tags" style="width: 100%;"
                                data-placeholder="Choose many.." multiple>
                            <option></option>
                            <option value="1" selected>HTML</option>
                            <option value="2" selected>CSS</option>
                            <option value="3">JavaScript</option>
                            <option value="4">PHP</option>
                            <option value="5">MySQL</option>
                            <option value="6">Ruby</option>
                            <option value="7">Angular</option>
                            <option value="8">React</option>
                            <option value="9">Vue.js</option>
                        </select>
                    </div>
                    <div class="mb-4 text-right">
                        <label class="form-label" for="genres">ژانرها</label>
                        <select class="js-select2 form-select" id="genres" name="genres" style="width: 100%;"
                                data-placeholder="Choose many.." multiple>
                            <option></option>
                            <option value="1" selected>HTML</option>
                            <option value="2" selected>CSS</option>
                            <option value="3">JavaScript</option>
                            <option value="4">PHP</option>
                            <option value="5">MySQL</option>
                            <option value="6">Ruby</option>
                            <option value="7">Angular</option>
                            <option value="8">React</option>
                            <option value="9">Vue.js</option>
                        </select>
                    </div>
                    <div class="text-right mb-4">
                        <label class="form-label" for="imageFile">تصویر کاور را انتخاب کنید</label>
                        <input class="form-control" name="imageFile" type="file" id="imageFile">
                    </div>
                    <button type="submit" class="btn btn-primary rounded-pill px-4">ویرایش</button>
                </div>
            </form>
        </div>
    </div>
@endsection


@section('js-footer')
    <link rel="stylesheet" href="/assets/js/plugins/select2/css/select2.min.css">
    <script src="/assets/js/plugins/select2/js/select2.full.min.js"></script>
    <script>One.helpersOnLoad(['jq-select2']);</script>
    <style>
        .select2-search__field {
            padding-top: 4px !important;
            font-size: 1rem !important;
            height: 25px !important;
        }

        .select2-selection__choice {
            background: #4c78dd !important;
            border-color: #4c78dd !important;
            height: 25px !important;
            margin-top: 7px !important;
            margin-bottom: 0 !important;
        }

        .select2-selection__choice__remove {
            color: white !important;
        }

        .select2-selection {
            border: 1px solid #dfe3ea !important;
        }
    </style>
@endsection