@extends('layouts.main')

@section('page-style')
    <link href="{{ env('STORAGE_URL_VIEW') }}{{ 'assets/global/plugins/select2/css/select2.min.css' }}" rel="stylesheet"
        type="text/css" />
    <link href="{{ env('STORAGE_URL_VIEW') }}{{ 'assets/global/plugins/select2/css/select2-bootstrap.min.css' }}"
        rel="stylesheet" type="text/css" />
    <link href="{{ env('STORAGE_URL_VIEW') }}{{ 'assets/global/plugins/bootstrap-summernote/summernote.css' }}"
        rel="stylesheet" type="text/css" />
    <link href="{{ env('STORAGE_URL_VIEW') }}{{ 'assets/global/plugins/bootstrap-sweetalert/sweetalert.css' }}"
        rel="stylesheet" type="text/css" />
    <link href="{{ env('STORAGE_URL_VIEW') }}{{ 'assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css' }}"
        rel="stylesheet" type="text/css" />
    <link href="{{ env('STORAGE_URL_VIEW') }}{{ 'assets/global/plugins/bootstrap-toastr/toastr.min.css' }}"
        rel="stylesheet" type="text/css" />
    <link
        href="{{ env('STORAGE_URL_VIEW') }}{{ 'assets/global/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css' }}"
        rel="stylesheet" type="text/css" />
    <link href="{{ env('STORAGE_URL_VIEW') }}{{ 'assets/global/plugins/icheck/skins/all.css' }}" rel="stylesheet"
        type="text/css" />

    <style>
        #exampleModal .modal-dialog {
            -webkit-transform: translate(0, -50%);
            -o-transform: translate(0, -50%);
            transform: translate(0, -50%);
            top: 50%;
            margin: 0 auto;
        }
    </style>
@endsection

@section('page-script')
    <script src="{{ env('STORAGE_URL_VIEW') }}{{ 'assets/global/plugins/select2/js/select2.full.min.js' }}"
        type="text/javascript"></script>
    <script src="{{ env('STORAGE_URL_VIEW') }}{{ 'assets/pages/scripts/components-select2.min.js' }}"
        type="text/javascript"></script>
    <script src="{{ env('STORAGE_URL_VIEW') }}{{ 'js/global.js' }}" type="text/javascript"></script>
    <script src="{{ env('STORAGE_URL_VIEW') }}{{ 'assets/global/plugins/bootstrap-summernote/summernote.min.js' }}"
        type="text/javascript"></script>
    <script src="{{ env('STORAGE_URL_VIEW') }}{{ 'assets/global/plugins/bootstrap-sweetalert/sweetalert.min.js' }}"
        type="text/javascript"></script>
    <script src="{{ env('STORAGE_URL_VIEW') }}{{ 'assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js' }}"
        type="text/javascript"></script>
    <script src="{{ env('STORAGE_URL_VIEW') }}{{ 'assets/global/plugins/bootstrap-toastr/toastr.min.js' }}"
        type="text/javascript"></script>
    <script
        src="{{ env('STORAGE_URL_VIEW') }}{{ 'assets/global/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js' }}">
    </script>
    <script src="{{ env('STORAGE_URL_VIEW') }}{{ 'assets/global/plugins/icheck/icheck.min.js' }}" type="text/javascript">
    </script>
    <script>
        var SweetAlert = function() {
            return {
                init: function() {
                    $(".save").each(function() {
                        var token = "{{ csrf_token() }}";
                        let column = $(this).parents('tr');
                        let name = $(this).data('name');
                        let status = $(this).data('status');

                        $(this).click(function() {
                            var min = $('#songwriter_range_price_min').val();
                            var max = $('#songwriter_range_price_max').val();
                            if (status == 'approve' && (min === '' || max === '')) {

                                swal("Error!", 'Range Price can not be empty', "error")

                            }
                        })
                    })
                }
            }
        }();

        jQuery(document).ready(function() {
            SweetAlert.init()
            var options = []

            var rejection = @json($detail['rejection']);
            let status = ''
            $('.btn-action').click(function() {

                var token = "{{ csrf_token() }}";
                let name = $(this).data('name');
                status = $(this).data('status');

                let column = $(this).parents('tr');
                let title = $(this).data('status') === 'approve' ? `Approval of ${name}` :
                    `Rejection  of ${name}`;
                let statusMessage = $(this).data('status') === 'approve' ? `approve` :
                    `reject`;

                $('#exampleModalLabel').text(title);
                $('#rejection').html('')
                if ($(this).data('status') === 'approve') {
                    $('#rejection').append(`<p class="text-center">
                        <h3 class="display-3 mb-0">Are you sure want to ${statusMessage} ${name} as a song writer?</h3>
                        <footer class="">Please note that your will not be able to recover this data</footer>
                        </p>`);
                } else {
                    $('#rejection').append(`
                                    <p class="text-center">
                                        <h3 class="display-3 mb-0">Are you sure want to ${statusMessage} ${name} as a song writer?</h3>
                                        <footer class="">Please note that your will not be able to recover this data</footer>
                                    </p>
                                    <select id="reject_reason_option" class="form-control input-sm select2" data-placeholder="Please select the reason">
                                        <option disabled>Select...</option>
                                    </select>
                                `)
                    $.each(rejection, function(index, object) {
                        var option = new Option(object, index);
                        $('#reject_reason_option').append(option)
                    })
                }

            })

            $('.btn-submit').click(function() {
                if ($('#reject_reason_option').val() == null) {
                    $('#action_type').val('approve');
                } else {
                    $('#action_type').val($('#reject_reason_option').val());
                    $('#reject_reason').val($('input[name="reject_reason_text"]').val());
                }

                // Log the value to the console
                $('form#form_submit').submit();
            })

            $(document).on('change', '#reject_reason_option', function() {
                const rejectReasonText = $('#reject_reason_text');
                rejectReasonText.toggleClass('hidden', $(this).val() !== 'Reject Profile Sample');

            });
            
        });

        function changeFromAdmin(val) {
            if (val == 0) {
                $('#id_brand').attr("disabled", false);
            } else {
                $('#id_brand').attr("disabled", true);
                $('#id_brand').val('').trigger("change")
            }
        }
    </script>
@endsection

@section('content')


    <div class="page-bar">
        <ul class="page-breadcrumb">
            <li>
                <a href="/">Home</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <span>{{ $title }}</span>
                @if (!empty($sub_title))
                    <i class="fa fa-circle"></i>
                @endif
            </li>
            @if (!empty($sub_title))
                <li>
                    <span>{{ $sub_title }}</span>
                </li>
            @endif
        </ul>
    </div><br>

    @if ($detail['songwriter_status'] == 'Active' || $detail['songwriter_status'] == 'Inactive')
        <a href="{{ url('songwriter') }}" class="btn green" style="margin-bottom: 2%;"><i class="fa fa-arrow-left"></i>
            Back</a>
    @else
        <a href="{{ url('songwriter/pending') }}" class="btn green" style="margin-bottom: 2%;"><i
                class="fa fa-arrow-left"></i> Back</a>
    @endif

    @include('layouts.notifications')
    <div class="portlet light bordered">
        <div class="portlet-title tabbable-line">
            <div class="caption">
                <span
                    class="caption-subject bold uppercase font-blue">{{ $detail['songwriter_status'] == 'Active' || $detail['songwriter_status'] == 'Inactive' ? $sub_title : 'Songwriter Pending Detail' }}</span>
            </div>
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#info" data-toggle="tab"> Info </a>
                </li>
                <li>
                    <a href="#songs" data-toggle="tab"> Songs </a>
                </li>
                <li>
                    <a href="#bundling" data-toggle="tab"> Bundling </a>
                </li>
            </ul>
        </div>
        <div class="portlet-body">
            <div class="tab-content">
                <div class="tab-pane active" id="info">