@extends('layouts.app')

@section('content')
<meta name="csrf-token" id="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{ asset('/css/select2.min.css') }}">

<style type="text/css">
    .select2-container{
        float: left !important;
        padding-left: 1px !important;
    }
    .select2-container .select2-selection li {
        color: #000000 !important;
    }
</style>

<section class="content-header" style="margin-bottom:20px">
    <h1>Category Management</h1>
</section>

<!-- /.box -->

<div class="box">
    <div class="box-header">
        <h3 class="box-title">Assign album to categories</h3>
        <div class="pull-right">
            <button class="btn btn-success btn-sm pull-right" onclick="window.history.back();">Back</button>
        </div>
    </div>
    <!-- /.box-header -->
    <div class="box-body">
        <form id="assign-data" class="form-horizontal" method="POST" action="assign_data_save">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <!-- Category div -->
            <div class="col-xs-12 col-sm-12 col-md-12 category-div">
                <div class="form-group">
                    <label class="col-md-2">Category:</label>
                    <select id="category" class="col-md-4 category" name="category" required="true">
                    </select>
                    <div class="col-md-2" id="catBtns">
                        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#add-category-modal"><b>Add</b></button>
                        <button type="button" class="btn btn-primary btn-sm editCategory openPopUp" data-toggle="modal" data-target="#edit-album-modal" style="display:none;"><b>Edit</b></button>
                    </div>
                </div>
            </div>
            <!-- Category div end -->
            
            <!-- Sub Category div -->
            <div class="col-xs-12 col-sm-12 col-md-12 category-div">
                <div class="form-group">
                    <label class="col-md-2">Sub Category:</label>
                    <select id="sub-category" class="col-md-4 sub-category" name="sub_category">
                        <option value="0">Select Any Category</option>
                    </select>
                    <div class="col-md-2" id="subCatBtns">
                        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#add-sub-category-modal"><b>Add</b></button>
                        <button type="button" class="btn btn-primary btn-sm editSubCategory openPopUp" data-toggle="modal" data-target="#edit-sub-category-modal" style="display:none;"><b>Edit</b></button>
                    </div>
                </div>
            </div>
            <!-- Sub Category div end -->

            <!-- Album div -->
            <div class="col-xs-12 col-sm-12 col-md-12" id="albumDivId">
                <div class="form-group">
                    <label class="col-md-2">Album:</label>
                    <select id="album" class="col-md-4 albumCls" name="album[]" required="true" multiple="multiple"></select>
                    <div class="col-md-2">
                        <!-- <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#add-album-modal"><b>Add</b></button> -->
                    </div>
                </div>
            </div>
            <!-- Album div end -->

            <!-- Language div start -->
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="col-md-2">Language:</label>
                    <select id="language" class="col-md-4 language" name="language">
                        <option value=""></option>
                        @foreach($languages as $language)
                        <option value="{{$language->id}}">{{$language->name}}</option>
                        @endforeach
                    </select>
                    <div class="col-md-2"></div>
                </div>
            </div>
            <!-- Language div end -->

            <div class="error-success-msg col-xs-12 col-sm-12 col-md-12 text-right"></div>

            <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                <button type="submit" class="btn btn-primary btn-sm" id="assignDataBtn">Submit</button>
            </div>  
        </form>
    </div>
</div>

<div class="addBorderClass" id="songListDiv" style="display: none;margin-top: 5px;">
    <ul id="addSongsListing" style="list-style-type: none;"></ul>
</div>

@include('elements.songs')
<script src="{{ asset('/js/select2.min.js') }}"></script>
<script src="{{ asset('/js/songs.js') }}"></script>
@endsection