@extends('layouts.app')

@section('content')


    <div class="page-header d-print-none mt-5">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <h2 class="page-title">
                        Tambahkan Lagu Baru
                    </h2>
                    <div class="text-muted mt-1">Buat lagu baru di sistem</div>
                </div>
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">
                        <a href="{{ route('user.profile.my-assets') }}" class="btn btn-primary d-none d-sm-inline-block">
                            <i class="ti ti-arrow-left me-2"></i>
                            Kembali
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body" id="pageUserCreateSong" data-userid="{{ Auth::id() }}" data-role="{{ $roleUser }}"
        data-name="{{ $authUser->name ?? '' }}">
        <div class="container-xl">

            <div class="row">

                <div class="col-12">
                    <div class="p-2" style="background-color: var(--tblr-white);">

                        <ul class="nav nav-tabs " id="stepNav">
                            <li class="nav-item">
                                <a class="nav-link fs-4 active" data-name="step1" data-bs-toggle="pill"
                                    href="#step1">Informasi Lagu</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link fs-4" data-name="step2" data-bs-toggle="pill"
                                    href="#step2">Contributor</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link fs-4" data-name="step3" data-bs-toggle="pill" href="#step3">Lisensi &
                                    Harga</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link fs-4" data-name="step4" data-bs-toggle="pill"
                                    href="#step4">Agreement</a>
                            </li>
                        </ul>

                    </div>
                </div>


            </div>



            <div class="row row-cards">
                <div class="col-12">

                    <form class="card" id="formSong" action="{{ route('user.composer.songs.store') }}"
                        method="post"enctype="multipart/form-data">
                        @csrf

                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="step1">


                                <div class="card-header">
                                    <h3 class="card-title">Informasi Lagu</h3>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-4 col-xl-4">
                                            <div class="mb-3">
                                                <div class="form-label required">Judul lagu</div>
                                                <input type="text"
                                                    class="form-control @error('title') is-invalid @enderror" name="title"
                                                    id="title" placeholder="Input judul lagu" required
                                                    value="{{ old('title') }}">
                                                @error('title')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-md-4 col-xl-4">
                                            <div class="mb-3">
                                                <div class="form-label required @error('types') is-invalid @enderror">Tipe
                                                    Lagu</div>
                                                <select class="form-select" name="types" id="types">
                                                    <option value="">-- Pilih Tipe --</option>
                                                    <option value="belum release"
                                                        {{ old('types') == 'belum release' ? 'selected' : '' }}>Belum
                                                        Release</option>
                                                    <option value="sudah release"
                                                        {{ old('types') == 'sudah release' ? 'selected' : '' }}>Sudah
                                                        Release</option>
                                                </select>
                                                @error('types')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                        </div>



                                        <div class="col-md-4 col-xl-4 d-none" id="ctrReleaseDate">
                                            <div class="mb-3">
                                                <div class="form-label required">Tanggal Rilis</div>
                                                <input type="date"
                                                    class="form-control @error('release_date') is-invalid @enderror"
                                                    name="release_date" id="release_date"
                                                    value="{{ old('release_date', now()->format('Y-m-d')) }}" required>
                                                @error('release_date')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>


                                        <div class="col-md-6 col-xl-6 d-none" id="ctrAlbum">
                                            <div class="mb-3">
                                                <div class="form-label ">Album</div>
                                                <select name="album_id" id="album_id"
                                                    class="selectpicker form-control @error('album_id') is-invalid @enderror"
                                                    data-live-search="true" data-size="5">
                                                    <option value="">Pilih Album</option>
                                                </select>
                                                @error('album_id')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-md-6 col-xl-6 d-none" id="ctrGenre">
                                            <div class="mb-3">
                                                <div class="form-label ">Genre</div>
                                                <select name="genre_id" id="genre_id"
                                                    class="selectpicker form-control @error('genre_id') is-invalid @enderror"
                                                    data-live-search="true" data-size="5">
                                                    <option value="">Pilih Genre</option>
                                                    @foreach ($genres as $genre)
                                                        <option value="{{ $genre->id }}"
                                                            {{ old('genre_id') == $genre->id ? 'selected' : '' }}>
                                                            {{ $genre->name }}</option>
                                                    @endforeach
                                                </select>

                                                {{-- <select name="genre_id" class="form-control">
                                                    <option value="" selected>Pilih Genre</option>
                                                    @foreach ($genres as $genre)
                                                        <option value="{{ $genre->id }}"
                                                            {{ old('genre_id') == $genre->id ? 'selected' : '' }}>
                                                            {{ $genre->name }}
                                                        </option>
                                                    @endforeach
                                                </select> --}}


                                                @error('genre_id')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <div class="form-label">Deskripsi</div>
                                                <textarea class="form-control @error('description') is-invalid @enderror" name="description" id="description"
                                                    rows="4" placeholder="Enter song description"></textarea>
                                                @error('description')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <div class="form-label">Lirik</div>
                                                <textarea class="form-control" name="lyrics" id="lyrics" rows="4" placeholder="Enter song lyrics"></textarea>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="mb-5">
                                                <div class="form-label">Label</div>
                                                <input type="text" class="form-control" name="labels" id="labels"
                                                    placeholder="input label lagu" />
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <div class="form-label">Tag User</div>
                                                <select id="tag_users" name="tag_users[]" class="form-select"
                                                    multiple="multiple">
                                                </select>

                                                {{-- <textarea class="form-control" name="tag_users" id="tag_users" rows="2"
                                                    placeholder="tag user dengan @mention..."></textarea> --}}
                                                <div id="tag_users_help" class="form-text">
                                                    tag user yang ingin diberitahukan mengenai lagu ini.
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @php
                                    $linksNo = 0;
                                @endphp
                                <div class="card-header">
                                    <div class="d-flex justify-content-between align-items-center w-100">
                                        <h3 class="card-title">Link Social Media Lagu</h3>
                                        <button type="button" data-rowid="{{ $linksNo }}" class="btn btn-primary"
                                            onclick="addSongLinks($(this))"><i class="ti ti-plus me-2"></i> Tambah
                                            Link</button>
                                    </div>
                                </div>

                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="form-label">Platform</div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-label">Links (URL)</div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-label">Keterangan</div>
                                        </div>

                                    </div>
                                </div>

                                <div class="card-body ctrSongLinks">

                                    <div id="rowLinks-{{ $linksNo }}" class="row rowLinks-{{ $linksNo }}">

                                        <div class="col-md-3">

                                            <select class="form-control selectpicker" id="platform-{{ $linksNo }}"
                                                name="platforms[]" data-live-search="true" data-size="5">
                                                <option value="">Select Platform</option>
                                                @foreach ($socialMedias as $socialMedia)
                                                    <option value="{{ $socialMedia->name }}">
                                                        {{ $socialMedia->name }}
                                                    </option>
                                                @endforeach
                                            </select>

                                        </div>
                                        <div class="col-md-3">
                                            <div class="mb-3">

                                                <input type="text" data-rowid="{{ $linksNo }}"
                                                    class="form-control links @error('link') is-invalid @enderror"
                                                    name="links[]" id="link-{{ $linksNo }}"
                                                    placeholder="Input link lagu" value="{{ old('link') }}">
                                                @error('link')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="mb-3">
                                                <input type="text" class="form-control"
                                                    @error('link_description') is-invalid @enderror
                                                    name="link_description[]"
                                                    placeholder="Input keterangan"id="linkdescription-{{ $linksNo }}">
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="mb-3 ">

                                                <button type="button" data-rowid="{{ $linksNo }}"
                                                    onclick="delSongLinks($(this))" id="btn-add-song-link"
                                                    class="btn btn-primary btn-add-song-link">
                                                    <i class="ti ti-trash "></i>
                                                </button>
                                            </div>
                                        </div>

                                    </div>

                                </div>

                                <div class="card-header mt-5 d-none ctrFile">
                                    <h3 class="card-title">File & Media </h3>
                                </div>
                                <div class="card-body d-none ctrFile">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <div class="form-label ">Gambar Cover</div>
                                                <input type="file"
                                                    class="form-control @error('cover_image') is-invalid @enderror"
                                                    name="cover_image" id="cover_image" accept="image/*">
                                                @error('cover_image')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                                <div class="form-hint fw-bold text-dark">wajib ukuran standar 1500px x
                                                    1500px atau 3000px x
                                                    3000px *
                                                </div>
                                            </div>
                                        </div>

                                        {{-- <div class="col-md-6 ">
                                            <div class="mb-3">
                                                <div class="form-label ">File Audio</div>
                                                <input type="file"
                                                    class="form-control @error('file_path') is-invalid @enderror"
                                                    name="file_path" id="file_path" accept="audio/*">
                                                @error('file_path')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                                <div class="form-hint fw-bold text-dark">format WAV Max 300Mb Harus 24 bit
                                                    , 44,100 Hz / 48,000 Hz untuk HD Audio *</div>
                                            </div>
                                            <div class="mb-3">
                                                <div class="form-label">Durasi (detik)</div>
                                                <input type="number" class="form-control" name="duration"
                                                    placeholder="Enter song duration" value="{{ old('duration') }}">
                                                <div class="form-hint">detik mulai untuk video pendek </div>

                                            </div>
                                        </div> --}}

                                    </div>
                                </div>

                                <div class="card-footer text-end mt-5">
                                    <div class="d-flex justify-content-end">
                                        <button type="button" class="btn btn-primary next-step"> Selanjutnya <i
                                                class="ti ti-arrow-right ms-2"></i></button>
                                    </div>
                                </div>




                            </div>
                            <div class="tab-pane fade" id="step2">
                                <div class="card-header">
                                    <div class="d-flex justify-content-between align-items-center w-100">
                                        <div class="d-flex flex-column">

                                            <h3 class="card-title">Kontributor</h3>
                                            <div class="text-muted mt-1">Orang-orang di balik karya musik</div>

                                        </div>

                                        <button type="button" id="btnAddLicense" data-mode="add"
                                            onclick="openContributor($(this))" class="btn btn-primary">
                                            <span class="me-2">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                    fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
                                                    <path fill-rule="evenodd"
                                                        d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2" />
                                                </svg>
                                            </span>
                                            Kontributor
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">

                                    <div class="container">
                                        <div class="row align-items-stretch" id="ctrContainer">

                                            {{-- @for ($i = 0; $i <= 3; $i++)
                                                <div class="col-md-3 mb-3 license-item" data-licenseid="">

                                                    <div class="card shadow h-100 ">
                                                        <div class="card-body">

                                                            <input type="hidden" name="contributor_userid[]">
                                                            <input type="hidden" name="contributor_role[]">
                                                            <input type="hidden" name="contributor_description[]">

                                                            @if ($i == 0)
                                                                <div class=" position-relative">
                                                                    <div class=" position-absolute z-1 text-primary"
                                                                        style="top:-10px;right:-10px;">
                                                                        <svg xmlns="http://www.w3.org/2000/svg"
                                                                            width="16" height="16"
                                                                            fill="currentColor" class="bi bi-star-fill"
                                                                            viewBox="0 0 16 16">
                                                                            <path
                                                                                d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                                                                        </svg>
                                                                    </div>
                                                                </div>
                                                            @endif

                                                            <div class="row align-items-stretch">
                                                                <div class="col px-0">
                                                                    <div
                                                                        class="d-flex justify-content-center align-items-center h-100 text-primary">

                                                                        <div
                                                                            style="width:48px;height:48px;background-image: url('https://placehold.co/64');background-repeat:no-repeat;background-position:center;background-size:cover;border-radius:50%;">
                                                                        </div>

                                                                    </div>
                                                                </div>
                                                                <div class="col-9">

                                                                    <div class="d-flex flex-column small">

                                                                        <div class="fw-bold">
                                                                            Nama Kontributor
                                                                        </div>
                                                                        <div>Role</div>
                                                                        <div>deskripsi kontributor</div>

                                                                    </div>

                                                                </div>
                                                            </div>
                                                            <div class="row align-items-stretch mt-3 small">
                                                                <div
                                                                    class="col bg-danger text-white mx-1 my-2 py-1 rounded">
                                                                    <div
                                                                        class="h-100 d-flex justify-content-center align-items-center">
                                                                        Ubah
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="col bg-danger text-white mx-1 my-2 py-1 rounded">
                                                                    <div
                                                                        class="h-100 d-flex justify-content-center align-items-center ">
                                                                        Hapus
                                                                    </div>
                                                                </div>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                            @endfor --}}

                                        </div>

                                    </div>

                                </div>

                                <div class="card-footer text-end">
                                    <div class="d-flex justify-content-end">
                                        <button type="button" class="btn btn-secondary prev-step"> <i
                                                class="ti ti-arrow-left me-2"></i>
                                            Sebelumnya</button>
                                        <button type="button" class="btn btn-primary next-step ms-2"> Selanjutnya <i
                                                class="ti ti-arrow-right ms-2"></i></button>
                                    </div>
                                </div>

                            </div>
                            <div class="tab-pane fade" id="step3">


                                <div class="card-header">
                                    <div class="d-flex justify-content-between align-items-center w-100">
                                        <h3 class="card-title">Lisensi & Harga</h3>

                                        {{-- <button type="button" id="btnAddLicense" data-mode="add"
                                            onclick="openLicense($(this))" class="btn btn-primary">
                                            <span class="me-2">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                    fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
                                                    <path fill-rule="evenodd"
                                                        d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2" />
                                                </svg>
                                            </span>
                                            Lisensi
                                        </button> --}}

                                    </div>
                                </div>

                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-12">

                                            <div class="row mb-3 align-items-stretch " id="lcsContainer">

                                                @php

                                                @endphp
                                                @if (isset($license->licenseItems))
                                                    @foreach ($license->licenseItems as $row)
                                                        <div class="col-md-3 mb-3 license-item-{{ $row->id }} "
                                                            id="row-{{ $row->id }}"
                                                            data-rowid="{{ $row->id }}"
                                                            data-id="{{ $row->id }}"
                                                            data-license-type="{{ $row->license_type }}"
                                                            data-payment-type="{{ $row->payment_type }}"
                                                            data-license-zone="{{ $row->zone }}"
                                                            data-license-amount="{{ $row->amount }}"
                                                            data-license-description="{{ $row->description }}"
                                                            data-time-type="{{ $row->time_type }}"
                                                            data-time-amount="{{ $row->time_amount }}"
                                                            data-is-active="{{ $row->is_active }}">

                                                            <div class="card shadow h-100 ">
                                                                <div class="card-body">

                                                                    <input type="hidden" name="license_id[]"
                                                                        value="{{ $row->id }}">
                                                                    <input type="hidden" name="license_type[]"
                                                                        value="{{ $row->license_type }}">
                                                                    <input type="hidden" name="license_payment_type[]"
                                                                        value="{{ $row->payment_type }}">
                                                                    <input type="hidden" name="license_time_amount[]"
                                                                        value="{{ $row->time_amount }}">
                                                                    <input type="hidden" name="license_time_type[]"
                                                                        value="{{ $row->time_type }}">
                                                                    <input type="hidden" name="license_zone[]"
                                                                        value="{{ $row->zone }}">
                                                                    <input type="hidden" name="license_amount[]"
                                                                        value="{{ $row->amount }}">
                                                                    <input type="hidden" name="license_description[]"
                                                                        value="{{ $row->description }}">
                                                                    <input type="hidden" name="license_song_types[]"
                                                                        value="{{ $row->song_types }}">

                                                                    <input type="hidden"
                                                                        id="license-active-{{ $row->id }}"
                                                                        name="lcs_is_active[]" value="1">

                                                                    <div class="row align-items-stretch">
                                                                        <div class="col">
                                                                            <div
                                                                                class="d-flex justify-content-center align-items-center h-100 text-primary">
                                                                                <svg xmlns="http://www.w3.org/2000/svg"
                                                                                    width="24" height="24"
                                                                                    fill="currentColor"
                                                                                    class="bi bi-bookmark-check"
                                                                                    viewBox="0 0 16 16">
                                                                                    <path fill-rule="evenodd"
                                                                                        d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0" />
                                                                                    <path
                                                                                        d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1z" />
                                                                                </svg>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-9">

                                                                            <div class="d-flex flex-column small">

                                                                                <div class="fw-bold">
                                                                                    <div class="d-flex flex-wrap">
                                                                                        {{ $row->license_type }}
                                                                                        {{ $row->time_amount == 0 ? '' : $row->time_amount }}
                                                                                        {{ $row->time_type ?? '' }}
                                                                                    </div>
                                                                                </div>
                                                                                <div
                                                                                    class="d-flex justify-content-between mb-1">

                                                                                    <div>{{ $row->payment_type }}</div>
                                                                                    <div
                                                                                        class="ms-2 px-2  rounded-4 bg-primary text-white fw-bold">
                                                                                        {{ $row->zone }}
                                                                                    </div>
                                                                                </div>
                                                                                @php
                                                                                    $spay = '';
                                                                                    if (
                                                                                        $row->payment_type ==
                                                                                        'Beli Harga'
                                                                                    ) {
                                                                                        $spay =
                                                                                            'Rp. ' .
                                                                                            number_format(
                                                                                                $row->amount,
                                                                                                2,
                                                                                                ',',
                                                                                                '.',
                                                                                            );
                                                                                    } else {
                                                                                        $spay =
                                                                                            number_format(
                                                                                                $row->amount,
                                                                                                2,
                                                                                                ',',
                                                                                                '.',
                                                                                            ) . '%';
                                                                                    }
                                                                                @endphp
                                                                                <div class="fs-4">{{ $spay }}
                                                                                </div>

                                                                            </div>

                                                                        </div>
                                                                    </div>
                                                                    <div class="row align-items-stretch mt-3 small">
                                                                        <div
                                                                            class="col bg-danger text-white mx-1 my-2 py-1 rounded">
                                                                            <a href="javascript:void(0)"
                                                                                data-id="{{ $row->id }}"
                                                                                data-rowid="{{ $row->id }}"
                                                                                onclick="editLicense($(this))"
                                                                                class="h-100 d-flex justify-content-center align-items-center text-white text-decoration-none">
                                                                                Ubah
                                                                            </a>
                                                                        </div>
                                                                        <div
                                                                            class="col d-flex justify-content-end align-items-center">
                                                                            <div class="form-check form-switch">
                                                                                <input class="form-check-input"
                                                                                    type="checkbox"
                                                                                    id="license_is_active_{{ $row->id }}"
                                                                                    name="license_is_active[]"
                                                                                    role="switch"
                                                                                    onchange="toggleLicenseStatus('{{ $row->id }}', this.checked)"
                                                                                    checked>
                                                                                <label class="form-check-label"
                                                                                    for="license_is_active_{{ $row->id }}"></label>
                                                                            </div>
                                                                        </div>
                                                                        {{-- <div
                                                                            class="col bg-danger text-white mx-1 my-2 py-1 rounded">
                                                                            <a href="javascript:void(0)"
                                                                                data-id="{{ $row->id }}"
                                                                                data-rowid="{{ $row->id }}"
                                                                                onclick="delLicense($(this))"
                                                                                class="h-100 d-flex justify-content-center align-items-center text-white text-decoration-none">
                                                                                Hapus
                                                                            </a>
                                                                        </div> --}}
                                                                    </div>

                                                                </div>
                                                            </div>

                                                        </div>
                                                    @endforeach
                                                @endif


                                            </div>


                                        </div>
                                        <div class="col-md-12">
                                            <div class="mb-5">
                                                <div class="form-label required">Zona Lokal</div>
                                                <div class="d-flex align-items-center ">
                                                    <select
                                                        class="form-control @error('local_zones') is-invalid @enderror selectpicker "
                                                        name="local_zones[]" id="local_zones"
                                                        data-json='@json($lastZones)' data-live-search="true"
                                                        data-size="5" multiple>
                                                        <option>Pilih Kota</option>
                                                    </select>
                                                    <button type="button"
                                                        class="btn btn-outline-primary ms-3 btn-clear-zone">
                                                        <i class="ti ti-trash me-2"></i>
                                                        Clear
                                                    </button>

                                                </div>
                                                @error('local_zones')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>

                                    </div>
                                </div>


                                <div class="card-footer text-end">
                                    <div class="d-flex justify-content-end">
                                        <button type="button" class="btn btn-secondary prev-step"> <i
                                                class="ti ti-arrow-left me-2"></i>
                                            Sebelumnya</button>
                                        <button type="button" class="btn btn-primary next-step ms-2"> Selanjutnya <i
                                                class="ti ti-arrow-right ms-2"></i></button>
                                    </div>
                                </div>


                            </div>
                            <div class="tab-pane fade" id="step4">

                                <div class="card-header">
                                    <div class="d-flex justify-content-between align-items-center w-100">
                                        <h3 class="card-title">Syarat dan Persetujuan (Agreement)</h3>
                                        <div class="me-3">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value=""
                                                    id="chkAllAgreement">
                                                <label class="form-check-label" for="chkAllAgreement">
                                                    Centang Semua
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-12">

                                            <div class="d-flex flex-column" id="ctrAgreement">

                                                @if (isset($agreement->agreementItems))
                                                    @php
                                                        $itemNo = 0;
                                                    @endphp
                                                    @foreach ($agreement->agreementItems as $rowItem)
                                                        @php
                                                            $itemNo++;
                                                        @endphp
                                                        <input type="hidden" name="agreement_item_id[]"
                                                            id="agreement_item_id_{{ $rowItem->id }}"
                                                            value="{{ $rowItem->id }}">

                                                        @if ($rowItem->type == 'text')
                                                            <div class="mb-2">

                                                                <label class="form-label"><span
                                                                        class="me-2">{{ $itemNo }}</span> Baca
                                                                    terlebih dahulu syarat dan persetujuan
                                                                    berikut ini</label>

                                                                <div class="p-3  rounded border shadow-sm bg-light">

                                                                    <div class=""
                                                                        style="height: 200px;overflow-y:auto;">
                                                                        {!! $rowItem->content !!}
                                                                    </div>

                                                                </div>


                                                            </div>
                                                            <div class="mb-4 d-flex">

                                                                <input class="form-check-input agreement_accepted"
                                                                    type="checkbox" value="{{ $rowItem->id }}"
                                                                    name="agreement_check[]"
                                                                    id="agreement_accepted_{{ $rowItem->id }}">
                                                                <label class="form-check-label ms-2"
                                                                    for="agreement_accepted">
                                                                    saya menyetujui agrement ini
                                                                </label>

                                                            </div>
                                                        @endif
                                                        @if ($rowItem->type == 'checklist')
                                                            <div class="mb-3 d-flex">


                                                                <input class="form-check-input agreement_check ms-2"
                                                                    type="checkbox" value="{{ $rowItem->id }}"
                                                                    name="agreement_check[]"
                                                                    id="agreement_check_{{ $rowItem->id }}">
                                                                <label class="form-check-label ms-2"
                                                                    for="agreement_check">
                                                                    {{ $rowItem->content }}
                                                                </label>

                                                            </div>
                                                        @endif
                                                    @endforeach
                                                @else
                                                    <div class="mb-3">
                                                        <div class="alert alert-primary">
                                                            Belum ada agreement yang diatur
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>

                                        </div>
                                    </div>
                                </div>

                                <div class="card-footer text-end">
                                    <div class="d-flex justify-content-end">
                                        <button type="button" class="btn btn-secondary prev-step"> <i
                                                class="ti ti-arrow-left me-2"></i>
                                            Sebelumnya</button>


                                        <button type="button" id="btnSaveSong" onclick="saveSong(event)"
                                            class="btn btn-primary ms-2">
                                            <i class="ti ti-device-floppy me-2"></i>Submit Lagu
                                        </button>
                                    </div>
                                </div>

                            </div>
                        </div>


                    </form>

                </div>
            </div>



        </div>
    </div>



    <!-- Modal Kontributor -->
    <div class="modal fade" id="modalContributor" data-mode="add" data-rowid="" data-id="" data-userid=""
        data-role="" data-name="" tabindex="-1" aria-labelledby="modalContributor" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
            <div class="modal-content">

                <div class="modal-body">

                    <div class="container">
                        <div class="row mb-3">
                            <div class="col">
                                <h3 class="">Form Kontributor Lagu <span class="contributor-mode ms-2"></span></h3>
                            </div>
                        </div>
                        <div class="row">

                            <div class="col">
                                <div class="mb-3">
                                    <div class="form-label required">Nama Kontributor</div>
                                    <div class="d-flex align-items-center ">

                                        <select id="contributor_userid" name="contributor_userid"
                                            class="form-control"></select>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="mb-3">
                                    <label class="form-label">Role </label>
                                    <input type="text" class="form-control" placeholder="role kontributor"
                                        name="contributor_role" id="contributor_role" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="mb-3">
                                    <label class="form-label">Deskripsi</label>
                                    <textarea class="form-control" name="contributor_description" id="contributor_description" rows="3"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col">
                                <div class="mb-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="1"
                                            name="contributor_send_notify" id="contributor_send_notify" checked>
                                        <label class="form-check-label" for="contributor_send_notify">
                                            Kirim Notifikasi
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="btnsaveContributor" data-rowid=""
                        data-id="" onclick="saveContributor($(this))">Submit</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal License -->
    <div class="modal fade" id="modalLicense" data-mode="add" data-rowid="" data-id="" data-license-type=""
        data-payment-type="" data-license-zone="" data-license-amount="" data-license-description="" data-time-type=""
        data-time-amount="" tabindex="-1" aria-labelledby="modalLicense" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
            <div class="modal-content">

                <div class="modal-body">

                    <div class="container">
                        <div class="row mb-3">
                            <div class="col">
                                <h3>Form Lisensi & Harga <span class="license-mode"></span></h3>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">Jenis Lisensi</label>
                                    <select class="form-select" name="license_type" id="license_type" disabled>
                                        <option value="" selected>-- Pilih Tipe Lisensi --</option>
                                        <option value="Cover">Cover</option>
                                        <option value="Remake">Remake</option>
                                        <option value="Official">Official</option>
                                        <option value="Official Exclusive">Official Exclusive</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4 ctime_type d-none">
                                <div class="mb-3">
                                    <label class="form-label">Tipe Waktu</label>
                                    <select class="form-select" name="time_type" id="time_type" disabled>
                                        <option value="" selected>-- Pilih Tipe Waktu --</option>
                                        <option value="Hari">Hari</option>
                                        <option value="Bulan">Bulan</option>
                                        <option value="Tahun">Tahun</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4 ctime_amount d-none">
                                <div class="mb-3">
                                    <label class="form-label">Jumlah Waktu</label>
                                    <input type="number" class="form-control" placeholder="nilai lisensi"
                                        name="time_amount" id="time_amount" value="0">
                                </div>
                            </div>

                        </div>
                        <div class="row">

                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Metode Pembayaran</label>
                                    <select class="form-select" name="payment_type" id="payment_type" disabled>
                                        <option value="" selected>-- Pilih Metode Pembayaran --</option>
                                        <option value="Beli Harga">Beli Harga Lisensi</option>
                                        <option value="Profit Sharing">Persentase Profit Sharing</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Zona</label>
                                    <select class="form-select" name="license_zone" id="license_zone" disabled>
                                        <option value="" selected>-- Pilih Zona --</option>
                                        <option value="Local">Lokal</option>
                                        <option value="Global">Global</option>
                                    </select>
                                </div>
                            </div>

                        </div>

                        <div class="row">
                            <div class="col">
                                <div class="mb-3">
                                    <label class="form-label">Nilai % / Harga Rp.</label>
                                    <input type="number" class="form-control" placeholder="nilai lisensi"
                                        name="license_amount" id="license_amount">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col">
                                <div class="mb-3">
                                    <label class="form-label">Deskripsi</label>
                                    <textarea name="license_description" id="license_description" class="form-control" rows="5">

                                    </textarea>
                                </div>
                            </div>
                        </div>

                        <input type="hidden" id="license_song_types" name="license_song_types" value="">

                        <div class="row">
                            <div class="col">
                                <div class="mb-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" role="switch"
                                            id="license_is_active" onchange="toggleLicenseStatusModal(this.checked)"
                                            checked>
                                        <label class="form-check-label activeModalText"
                                            for="license_is_active">Aktif</label>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-rowid="" data-id=""
                        onclick="saveLicense($(this))" id="btnSaveLicense">Submit</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Config -->
    <div class="modal fade" id="modalAgreementConfig" data-mode="add" data-id="" tabindex="-1"
        aria-labelledby="modalAgreementConfig" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">

            <div class="modal-content">

                <div class="modal-body">
                    <div class="container">
                        <div class="row mb-3">
                            <div class="col">
                                <h3>Form Pengaturan Agreement Lagu</h3>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <div class="form-label required">Nama Agreement</div>
                                    <div class="d-flex align-items-center ">
                                        <select id="song_agreements" name="song_agreements" class="form-control">
                                            @foreach ($agreementSelect as $row)
                                                <option value="{{ $row->name }}">{{ $row->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <input type="hidden" id="csrf_token" value="{{ csrf_token() }}">
                    <button type="button" class="btn btn-primary" id="btnsaveAgreementConfig"
                        onclick="saveAgreementConfig()">Submit</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                </div>
            </div>

        </div>
    </div>


@endsection
@push('styles')
    <!-- Bootstrap Select CSS -->
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta2/dist/css/bootstrap-select.min.css">

    <style>
        .bootstrap-select .dropdown-toggle {
            border: 1px solid black;
        }

        .form-check-input {
            border: 1px solid black;
        }

        .bootstrap-select>.dropdown-toggle {
            height: auto;
        }

        .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
            white-space: normal !important;
            overflow-wrap: break-word;
            word-break: break-word;
        }

        .bootstrap-select .dropdown-toggle .filter-option-inner {
            white-space: normal !important;
        }

        .bootstrap-select .dropdown-toggle {
            max-height: 100px;
            overflow-y: auto;
            white-space: normal !important;
        }

        .card-no-hover {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            transition: none;
        }

        .card-no-hover:hover {
            transform: none;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        }

        .select2-container {
            width: 100% !important;
        }
    </style>
@endpush
@section('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta2/dist/js/bootstrap-select.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-number@2.1.6/jquery.number.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tributejs/5.1.3/tribute.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tributejs/5.1.3/tribute.min.js"></script>



    <script>
        $(document).ready(function() {

            $('#tag_users').select2({
                placeholder: 'Cari user...',
                minimumInputLength: 3,
                ajax: {
                    url: "/user/data/users-only",
                    type: "GET",
                    dataType: "json",
                    delay: 250,
                    data: function(params) {
                        return {
                            search: params.term,
                            limit: 5
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: data.map(function(res) {
                                return {
                                    id: res.id,
                                    text: res.name + ' (' + res.roleName + ')',
                                    roleName: res.roleName
                                };
                            })
                        };
                    },
                    cache: true
                }
            });


        });

        document.addEventListener('DOMContentLoaded', function() {

            // var tribute = new Tribute({
            //     trigger: '@',
            //     values: function(text, cb) {
            //         if (text.length < 3) {
            //             return cb([]); // jangan panggil api, kosongkan hasil
            //         }

            //         fetch('/user/data/users-only?search=' + text)
            //             .then(response => response.json())
            //             .then(data => cb(data));
            //     },
            //     lookup: 'name',
            //     fillAttr: 'name',
            //     menuItemTemplate: function(item) {
            //         return item.original.name + ' <small>(' + item.original.roleName + ')</small>';
            //     },
            //     selectTemplate: function(item) {
            //         return '@' + item.original.name;
            //     }
            // });

            // tribute.attach(document.getElementById('tag_users'));


        });
    </script>


    <script>
        $(document).ready(function() {


            $('#platform-0 option').each(function() {
                if ($(this).val().toLowerCase() === 'youtube') {
                    $('#platform-0').val($(this).val());
                    return false;
                }
            });

            $('.selectpicker').selectpicker('refresh');

            fetchAlbum("#album_id");

            let oldLocalZones = @json(old('local_zones'));
            fetchCity('#local_zones');

            document.querySelector('.btn-clear-zone').addEventListener('click', function() {
                $('#local_zones').val([]);
                $('#local_zones').selectpicker('refresh');
            });

            $('#types').on('change', function() {
                let stypes = $(this).val();
                if (stypes == 'sudah release') {
                    $('.ctrFile').removeClass('d-none');
                    $('#ctrReleaseDate').removeClass('d-none');
                    $('#release_date').val(new Date().toISOString().split('T')[0]);
                    $('#ctrAlbum').removeClass('d-none');
                    $('#ctrGenre').removeClass('d-none');
                    $('#album_id').val('');
                    $('#album_id').selectpicker('refresh');
                    $('#genre_id').val('');
                    $('#genre_id').selectpicker('refresh');
                    $('#cover_image').val('');
                    $('#file_path').val('');
                } else {
                    $('.ctrFile').addClass('d-none');
                    $('#ctrReleaseDate').addClass('d-none');
                    $('#ctrAlbum').addClass('d-none');
                    $('#ctrGenre').addClass('d-none');
                }
                setLicenseByType(stypes);
            });

            $('#chkAllAgreement').on('change', function() {
                let isChecked = $(this).is(':checked');
                $('.agreement_accepted, .agreement_check').prop('checked', isChecked);
            });

            createFirstContributor();

        });

        function setLicenseByType(types) {
            let search = '';
            let limit = 20;

            $.ajax({
                url: '/user/data/license-by-type/' + types,
                type: 'GET',
                data: {
                    search: search,
                    limit: limit
                },
                success: function(response) {

                    if (response.length > 0 && response[0].license_items && response[0].license_items.length >
                        0) {
                        setContentLicense(response[0].license_items);
                    } else {
                        $('#lcsContainer').html(
                            `<div class="alert alert-danger small lcsEmpty">belum terdapat data silahkan hubungi admin</div>`
                        );
                    }
                },
                error: function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Pesan',
                        text: 'Gagal mengambil data license! ' + xhr.responseText
                    });
                }
            });
        }

        function setContentLicense(data) {

            let lcsContent = ``;

            $.each(data, function(index, item) {

                let rowId = generateUniqueId('lcs-');
                let license_id = item.id;
                let license_type = item.license_type;
                let payment_type = item.payment_type;
                let license_zone = item.zone;
                let license_amount = item.amount;
                let license_description = item.description;
                let license_song_types = item.song_types;
                let time_type = item.time_type;
                let time_amount = item.time_amount;
                let isActive = item.is_active;
                let license_is_active = (isActive) ? "1" : "0";

                let stime_type = time_type;
                let stime_amount = time_amount;
                if (license_type != 'Official Exclusive') {
                    stime_type = ``;
                    stime_amount = ``;
                }

                let spay = ``;
                let spaytype = ``;
                if (payment_type == 'Beli Harga') {
                    spay = `Rp. ${$.number(license_amount,2)}`;
                    spaytype = 'Beli Harga';
                } else {
                    spaytype = 'Profit Sharing';
                    spay = `${$.number(license_amount,2)}%`;
                }

                lcsContent += `

                <div class="col-md-3 mb-3 license-item-${rowId} " id="row-${rowId}" data-rowid="${rowId}" data-id="${license_id}" data-license-type="${license_type}" data-payment-type="${payment_type}" data-license-zone="${license_zone}" data-license-amount="${license_amount}" data-license-description="${license_description}" data-license-song-types="${license_song_types}" data-time-type="${time_type}" data-is-active="${license_is_active}"  data-time-amount="${time_amount}" >

                    <div class="card shadow h-100 ">
                        <div class="card-body">

                            <input type="hidden" name="license_id[]" value="${license_id}">
                            <input type="hidden" name="license_type[]" value="${license_type}">
                            <input type="hidden" name="license_payment_type[]" value="${payment_type}" >
                            <input type="hidden" name="license_time_amount[]" value="${time_amount}" >
                            <input type="hidden" name="license_time_type[]" value="${time_type}" >
                            <input type="hidden" name="license_zone[]" value="${license_zone}" >
                            <input type="hidden" name="license_amount[]" value="${license_amount}" >
                            <input type="hidden" name="license_description[]" value="${license_description}" >
                            <input type="hidden" name="license_song_types[]" value="${license_song_types}" >
                            <input type="hidden" id="license-active-${rowId}" name="lcs_is_active[]" value="${license_is_active}" >

                            <div class="row align-items-stretch">
                                <div class="col">
                                    <div
                                        class="d-flex justify-content-center align-items-center h-100 text-primary">
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                            width="24" height="24"
                                            fill="currentColor"
                                            class="bi bi-bookmark-check"
                                            viewBox="0 0 16 16">
                                            <path fill-rule="evenodd"
                                                d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0" />
                                            <path
                                                d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1z" />
                                        </svg>
                                    </div>
                                </div>
                                <div class="col-9">

                                    <div class="d-flex flex-column small">

                                        <div class="fw-bold">
                                            <div class="d-flex flex-wrap">
                                                ${license_type} ${stime_amount} ${stime_type}
                                            </div>
                                        </div>
                                        <div class="d-flex justify-content-between mb-1">
                                            <div>${spaytype}</div>
                                            <div class="ms-2 px-2  rounded-4 bg-primary text-white fw-bold"> ${license_zone}
                                            </div>
                                        </div>
                                        <div class="fs-4">${spay}</div>

                                    </div>

                                </div>
                            </div>
                            <div class="row align-items-stretch mt-3 small">
                                <div class="col bg-danger text-white mx-1 my-2 py-1 rounded">
                                    <a href="javascript:void(0)" data-id="${license_id}" data-rowid="${rowId}"
                                        onclick="editLicense($(this))"
                                        class="h-100 d-flex justify-content-center align-items-center text-white text-decoration-none">
                                        Ubah
                                    </a>
                                </div>
                                <div class="col d-flex justify-content-end align-items-center">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="license_is_active_${license_id}"
                                        name="license_is_active[]"
                                        role="switch" onchange="toggleLicenseStatus('${rowId}', this.checked)"  ${isActive?'checked':''} >
                                        <label class="form-check-label" for="license_is_active_${license_id}"></label>
                                    </div>
                                </div>
                                <!--
                                <div class="col bg-danger text-white mx-1 my-2 py-1 rounded">
                                    <a href="javascript:void(0)" data-id="${license_id}" data-rowid="${rowId}"
                                        onclick="delLicense($(this))"
                                        class="h-100 d-flex justify-content-center align-items-center text-white text-decoration-none">
                                        Hapus
                                    </a>
                                </div>
                                -->
                            </div>

                        </div>
                    </div>

                </div>

                 `;

            });

            $('#lcsContainer').html(lcsContent);

        }



        function fetchAlbum(selectId, selectedValue = "", search = "") {
            $.ajax({
                url: "/user/data/albums",
                type: "GET",
                data: {
                    search: search,
                    limit: 20
                },
                dataType: "json",
                success: function(data) {
                    var albumSelect = $(selectId);
                    albumSelect.empty();
                    albumSelect.append('<option value="">Select Album</option>');

                    $.each(data, function(index, album) {
                        const selected = album.id == selectedValue ? 'selected' : '';
                        albumSelect.append('<option value="' + album.id + '" ' + selected +
                            '>' + album.title + ' (' + album.artist + ')' + ' </option>');
                    });

                    albumSelect.selectpicker("refresh");
                }
            });
        }


        function fetchCity(selector, selectedLocalZone) {
            fetch('/user/data/cities')
                .then(response => response.json())
                .then(data => {
                    let select = document.querySelector(selector);
                    let preloadedJson = select.dataset.json;
                    let selectedJson = [];

                    try {
                        selectedJson = JSON.parse(preloadedJson);
                    } catch (e) {
                        console.error('Invalid JSON in data-json:', e);
                    }

                    // Clear all options
                    select.innerHTML = '';

                    // Add default option
                    select.insertAdjacentHTML('beforeend', '<option disabled>Select City</option>');

                    // Add preloaded selected cities
                    selectedJson.forEach(function(city) {
                        const option = document.createElement('option');
                        option.value = city.name;
                        option.text = city.name;
                        option.selected = true;
                        select.appendChild(option);
                    });

                    // Append cities from fetch, skip if already added
                    data.forEach(function(city) {
                        const exists = Array.from(select.options).some(opt => opt.value === city);
                        if (!exists) {
                            const option = document.createElement('option');
                            option.value = city;
                            option.text = city;

                            if (selectedLocalZone && Array.isArray(selectedLocalZone) && selectedLocalZone
                                .includes(city)) {
                                option.selected = true;
                            }

                            select.appendChild(option);
                        }
                    });

                    // Refresh selectpicker to reflect updates
                    $('.selectpicker').selectpicker('refresh');
                })
                .catch(error => {
                    console.error('Error fetching cities:', error);
                });
        }

        function addSongLinks(e) {

            let newRowId = parseInt(e.attr('data-rowid')) + 1;

            //insert ke
            let songItem = `
                <div id="rowLinks-${newRowId}" class="row rowLinks-${newRowId}">

                    <div class="col-md-3">
                        <select class="form-control selectpicker" id="platform-${newRowId}" name="platforms[]"
                            data-live-search="true" data-size="5">
                            <option value="">Select Platform</option>
                            @foreach ($socialMedias as $socialMedia)
                                <option value="{{ $socialMedia->name }}">
                                    {{ $socialMedia->name }}
                                </option>
                            @endforeach
                        </select>

                    </div>
                    <div class="col-md-3">
                        <div class="mb-3">
                            <input type="text"
                                data-rowid="${newRowId}" class="form-control links @error('link') is-invalid @enderror"
                                name="links[]" id="link-${newRowId}" placeholder="Enter song link"
                                value="{{ old('link') }}">
                            @error('link')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3">
                            <input type="text" class="form-control @error('link_description') is-invalid @enderror" name="link_description[]" placeholder="Input keterangan"id="linkdescription-${newRowId}">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="mb-3 ">
                            <button type="button" data-rowid="${newRowId}"
                                onclick="delSongLinks($(this))" id="btn-add-song-link"
                                class="btn btn-primary btn-add-song-link">
                                <i class="ti ti-trash "></i>
                            </button>
                        </div>
                    </div>

                </div>
            `;
            e.attr('data-rowid', newRowId);
            $('.ctrSongLinks').append(songItem);
            $(`#platform-${newRowId} option`).each(function() {
                if ($(this).val().toLowerCase() === 'youtube') {
                    $(`#platform-${newRowId}`).val($(this).val());
                    return false;
                }
            });

            $('#platform-' + newRowId).selectpicker('refresh');

        }

        function delSongLinks(e) {
            let rowId = e.attr('data-rowid');
            $(`#rowLinks-${rowId}`).remove();
        }
    </script>

    <script>
        $(document).ready(function() {
            $('.next-step').on('click', function() {
                const active = document.querySelector('.nav-link.active');
                // Validasi step jika diperlukan
                // let isvalid = validateStepContent(active);
                // if (!isvalid) return;

                const next = active.parentElement.nextElementSibling?.querySelector('.nav-link');
                if (next) new bootstrap.Tab(next).show();
            });

            $('.prev-step').on('click', function() {
                const active = document.querySelector('.nav-link.active');
                const prev = active.parentElement.previousElementSibling?.querySelector('.nav-link');
                if (prev) new bootstrap.Tab(prev).show();
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {

            $('#contributor_userid').on('select2:select', function(e) {
                const data = e.params.data;

                $('#contributor_role').val(data.roleName);
                $('#modalContributor').attr('data-userid', data.id);
                $('#modalContributor').attr('data-role', data.roleName);
                $('#modalContributor').attr('data-name', data.text);

            });

            $('#license_type').on('change', function() {
                let license_type = $(this).val();
                if (license_type == 'Official Exclusive') {
                    $('.ctime_type').removeClass('d-none');
                    $('.ctime_amount').removeClass('d-none');
                    let mode = $('#modalLicense').attr('data-mode');
                    if (mode == 'add') {
                        $('#time_type').val('');
                        $('#time_amount').val('0');
                    }
                } else {
                    $('.ctime_type').addClass('d-none');
                    $('.ctime_amount').addClass('d-none');
                }
            });

            let childCount = $('#lcsContainer').children().length;
            if (childCount == 0) {
                $('#lcsContainer').html(`<div class="alert alert-danger small lcsEmpty">belum terdapat data</div>`);
            }
            childCount = $('#ctrContainer').children().length;
            if (childCount == 0) {
                $('#ctrContainer').html(`<div class="alert alert-danger small ctrEmpty">belum terdapat data</div>`);
            }

            const modalElement = document.getElementById('modalContributor');
            modalElement.addEventListener('shown.bs.modal', function() {
                fetchUser();
            });


        });

        window.openLicense = function(e) {
            let mode = e.attr('data-mode');
            let rowId = generateUniqueId('lcs-');
            $('#modalLicense').attr('data-mode', 'add');
            $('#modalLicense').attr('data-rowid', rowId);
            $('#btnSaveLicense').attr('data-rowid', rowId);
            let modeStr = (mode == 'add') ? '(Tambah)' : '(Ubah)';
            $('.license-mode').html(modeStr);

            const modalElement = document.getElementById('modalLicense');
            const modal = new bootstrap.Modal(modalElement);
            modalElement.addEventListener('shown.bs.modal', function() {
                //console.log('Modal has show');
                clearLicense();
            });
            modal.show();
        }

        window.saveLicense = function(e) {
            let mode = $('#modalLicense').attr('data-mode');
            let rowId = $('#modalLicense').attr('data-rowid');
            let license_id = $('#modalLicense').attr('data-id');
            let license_type = $('#license_type').val();
            let payment_type = $('#payment_type').val();
            let license_zone = $('#license_zone').val();
            let license_amount = $('#license_amount').val();
            let license_description = $('#license_description').val();
            let license_song_types = $('#license_song_types').val();
            let time_type = $('#time_type').val();
            let time_amount = $('#time_amount').val();
            let isActive = $('#license_is_active').is(':checked');
            let license_is_active = (isActive) ? "1" : "0";

            let stime_type = time_type;
            let stime_amount = time_amount;
            if (license_type != 'Official Exclusive') {
                stime_type = ``;
                stime_amount = ``;
            }

            let spay = ``;
            let spaytype = ``;
            if (payment_type == 'Beli Harga') {
                spay = `Rp. ${$.number(license_amount,2)}`;
                spaytype = 'Beli Harga';
            } else {
                spaytype = 'Profit Sharing';
                spay = `${$.number(license_amount,2)}%`;
            }

            let lcsContent = `

                <div class="col-md-3 mb-3 license-item-${rowId} " id="row-${rowId}" data-rowid="${rowId}" data-id="${license_id}" data-license-type="${license_type}" data-payment-type="${payment_type}" data-license-zone="${license_zone}" data-license-amount="${license_amount}" data-license-description="${license_description}" data-license-song-types="${license_song_types}"  data-time-type="${time_type}" data-is-active="${license_is_active}"  data-time-amount="${time_amount}" >

                    <div class="card shadow h-100 ">
                        <div class="card-body">

                            <input type="hidden" name="license_id[]" value="${license_id}">
                            <input type="hidden" name="license_type[]" value="${license_type}">
                            <input type="hidden" name="license_payment_type[]" value="${payment_type}" >
                            <input type="hidden" name="license_time_amount[]" value="${time_amount}" >
                            <input type="hidden" name="license_time_type[]" value="${time_type}" >
                            <input type="hidden" name="license_zone[]" value="${license_zone}" >
                            <input type="hidden" name="license_amount[]" value="${license_amount}" >
                            <input type="hidden" name="license_description[]" value="${license_description}" >
                            <input type="hidden" name="license_song_types[]" value="${license_song_types}" >
                            <input type="hidden" id="license-active-${rowId}" name="lcs_is_active[]" value="${license_is_active}" >

                            <div class="row align-items-stretch">
                                <div class="col">
                                    <div
                                        class="d-flex justify-content-center align-items-center h-100 text-primary">
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                            width="24" height="24"
                                            fill="currentColor"
                                            class="bi bi-bookmark-check"
                                            viewBox="0 0 16 16">
                                            <path fill-rule="evenodd"
                                                d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0" />
                                            <path
                                                d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1z" />
                                        </svg>
                                    </div>
                                </div>
                                <div class="col-9">

                                    <div class="d-flex flex-column small">

                                        <div class="fw-bold">
                                            <div class="d-flex flex-wrap">
                                                ${license_type} ${stime_amount} ${stime_type}
                                            </div>
                                        </div>
                                        <div class="d-flex justify-content-between mb-1">
                                            <div>${spaytype}</div>
                                            <div class="ms-2 px-2  rounded-4 bg-primary text-white fw-bold"> ${license_zone}
                                            </div>
                                        </div>
                                        <div class="fs-4">${spay}</div>

                                    </div>

                                </div>
                            </div>
                            <div class="row align-items-stretch mt-3 small">
                                <div class="col bg-danger text-white mx-1 my-2 py-1 rounded">
                                    <a href="javascript:void(0)" data-id="${license_id}" data-rowid="${rowId}"
                                        onclick="editLicense($(this))"
                                        class="h-100 d-flex justify-content-center align-items-center text-white text-decoration-none">
                                        Ubah
                                    </a>
                                </div>
                                <div class="col d-flex justify-content-end align-items-center">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="license_is_active_${license_id}"
                                        name="license_is_active[]"
                                        role="switch" onchange="toggleLicenseStatus('${rowId}', this.checked)"  ${isActive?'checked':''} >
                                        <label class="form-check-label" for="license_is_active_${license_id}"></label>
                                    </div>
                                </div>
                                <!--
                                <div class="col bg-danger text-white mx-1 my-2 py-1 rounded">
                                    <a href="javascript:void(0)" data-id="${license_id}" data-rowid="${rowId}"
                                        onclick="delLicense($(this))"
                                        class="h-100 d-flex justify-content-center align-items-center text-white text-decoration-none">
                                        Hapus
                                    </a>
                                </div>
                                -->
                            </div>

                        </div>
                    </div>

                </div>


            `;

            if (mode == 'add') {
                $('#lcsContainer').append(lcsContent);
                $('.lcsEmpty').remove();
            } else {
                $('#row-' + rowId).replaceWith(lcsContent);
            }

            $('#modalLicense').modal('hide');
            clearContributor();


        }

        window.clearLicense = function() {

            let mode = $('#modalLicense').attr('data-mode');
            if (mode != 'edit') {

                $('#modalLicense').attr('data-id', '');
                $('#license_type').val('');
                $('#payment_type').val('');
                $('#license_zone').val('');
                $('#license_amount').val('');
                $('#license_description').val('');
                $('#license_song_types').val('');
                $('#time_type').val('');
                $('#time_amount').val('');
                $('#license_type').trigger('change');

                $('#modalLicense').attr('data-id', '');
                $('#modalLicense').attr('data-license-type', '');
                $('#modalLicense').attr('data-payment-type', '');
                $('#modalLicense').attr('data-license-zone', '');
                $('#modalLicense').attr('data-license-amount', '');
                $('#modalLicense').attr('data-license-description', '');
                $('#modalLicense').attr('data-time-type', '');
                $('#modalLicense').attr('data-time-amount', '');
            }

        }

        window.editLicense = function(e) {

            let rowId = e.attr('data-rowid');
            let license_type = $('.license-item-' + rowId).attr('data-license-type');
            let payment_type = $('.license-item-' + rowId).attr('data-payment-type');
            let license_zone = $('.license-item-' + rowId).attr('data-license-zone');
            let license_amount = $('.license-item-' + rowId).attr('data-license-amount');
            let license_description = $('.license-item-' + rowId).attr('data-license-description');
            let license_song_types = $('.license-item-' + rowId).attr('data-license-song-types');
            let time_type = $('.license-item-' + rowId).attr('data-time-type');
            time_type = time_type.charAt(0).toUpperCase() + time_type.slice(1);
            time_type = time_type.trim();
            let time_amount = $('.license-item-' + rowId).attr('data-time-amount');
            let isActive = $('.license-item-' + rowId).attr('data-is-active');
            if (isActive == '1') {
                $('#license_is_active').prop('checked', true);
            } else {
                $('#license_is_active').prop('checked', false);
            }

            setTimeout(function() {
                $('#time_type').val(time_type);
                $('#time_amount').val(time_amount);
            }, 100);
            $('#payment_type').val(payment_type);
            $('#license_zone').val(license_zone);
            if (!isNaN(license_amount)) {
                let amount = parseFloat(license_amount);
                if (amount % 1 === 0) {
                    $('#license_amount').val(parseInt(amount));
                } else {
                    $('#license_amount').val(amount);
                }
            }
            $('#license_type').val(license_type);
            $('#license_type').trigger('change');

            $('#modalLicense').attr('data-rowid', rowId);
            $('#modalLicense').attr('data-license-type', license_type);
            $('#modalLicense').attr('data-payment-type', payment_type);
            $('#modalLicense').attr('data-license-zone', license_zone);
            $('#modalLicense').attr('data-license-amount', license_amount);
            $('#modalLicense').attr('data-license-description', license_description);
            $('#modalLicense').attr('data-license-song-types', license_song_types);
            $('#modalLicense').attr('data-time-type', time_type);
            $('#modalLicense').attr('data-time-amount', time_amount);

            $('#modalLicense').attr('data-mode', 'edit');
            $('#btnSaveLicense').attr('data-rowid', rowId);
            $('#modalLicense').modal('show');

        }

        window.delLicense = function(e) {
            let rowId = e.attr('data-rowid');
            Swal.fire({
                title: 'Yakin ingin menghapus?',
                text: "Data yang dihapus tidak bisa dikembalikan!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                confirmButtonText: 'Ya, hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    $(`#row-${rowId}`).remove();
                }
            });
        }


        window.toggleLicenseStatus = function(id, isActive) {
            if (isActive) {
                $('#license-active-' + id).val('1');
                $('.license-item-' + id).attr('data-is-active', '1');
            } else {
                $('#license-active-' + id).val('0');
                $('.license-item-' + id).attr('data-is-active', '0');
            }
        }

        window.toggleLicenseStatusModal = function(isActive) {
            if (isActive) {
                $('.activeModalText').html('Aktif');
            } else {
                $('.activeModalText').html('Nonaktif');
            }
        }


        window.openContributor = function(e) {
            let mode = e.attr('data-mode');
            let rowId = generateUniqueId();
            $('#modalContributor').attr('data-mode', 'add');
            $('#modalContributor').attr('data-rowid', rowId);
            $('#btnsaveContributor').attr('data-rowid', rowId);
            let modeStr = (mode == 'add') ? '(Tambah)' : '(Ubah)';
            $('.contributor-mode').html(modeStr);
            if (mode == 'add') {
                $('#contributor_userid').val(null).trigger('change');
            }

            const modalElement = document.getElementById('modalContributor');
            const modal = new bootstrap.Modal(modalElement);
            modal.show();
        }


        window.fetchUser = function() {

            $('#contributor_userid').select2({
                dropdownParent: $('#modalContributor'),
                placeholder: 'Cari nama kontributor',
                minimumInputLength: 3,
                ajax: {
                    url: "/user/data/users-only",
                    type: "GET",
                    dataType: "json",
                    delay: 250,
                    data: function(params) {
                        return {
                            search: params.term,
                            limit: 5
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: data.map(function(res) {
                                return {
                                    id: res.id,
                                    text: res.name + ' (' + res.roleName + ')',
                                    roleName: res.roleName
                                };
                            })
                        };
                    },
                    cache: true
                }
            });

        }

        window.createFirstContributor = function(E) {
            $('#ctrContainer').html(``);

            let rowId = generateUniqueId('lcs-');
            let contributor_id = rowId;
            let contributor_userid = $('#pageUserCreateSong').attr('data-userid');
            let contributor_role = $('#pageUserCreateSong').attr('data-role');
            let contributor_name = $('#pageUserCreateSong').attr('data-name');
            let ctrRoel = contributor_role;
            let contributor_description = '';

            let starComposer = ``;
            if (ctrRoel == 'Composer') {
                starComposer = `
                <div class=" position-relative">
                    <div class=" position-absolute z-1 text-primary" style="top:-10px;right:-10px;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-star-fill" viewBox="0 0 16 16">
                            <path
                                d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                        </svg>
                    </div>
                </div>

                `;
            }

            let ctrContent = `

            <div class="col-md-3 mb-3 contributor-item contributor-item-${contributor_id}" id="row-${rowId}"
                data-id="${contributor_id}" data-userid="${contributor_userid}"  data-role="${contributor_role}" data-name="${contributor_name}"
                data-description="${contributor_description}">

                <div class="card shadow h-100 ">
                    <div class="card-body">

                        <input type="hidden" name="contributor_id[]" value="${contributor_id}">
                        <input type="hidden" name="contributor_userid[]" value="${contributor_userid}">
                        <input type="hidden" name="contributor_role[]" value="${contributor_role}">
                        <input type="hidden" name="contributor_description[]" value="${contributor_description}">

                        ${starComposer}

                        <div class="row align-items-stretch">
                            <div class="col px-0">
                                <div class="d-flex justify-content-center align-items-center h-100 text-primary">

                                    <div
                                        style="width:48px;height:48px;background-image: url('https://static.vecteezy.com/system/resources/previews/026/266/484/non_2x/default-avatar-profile-icon-social-media-user-photo-image-vector.jpg');background-repeat:no-repeat;background-position:center;background-size:cover;border-radius:50%;">
                                    </div>

                                </div>
                            </div>
                            <div class="col-9">

                                <div class="d-flex flex-column small">

                                    <div class="fw-bold">
                                        ${contributor_name}
                                    </div>
                                    <div>${contributor_role}</div>
                                    <div>
                                        ${limitString(contributor_description, limit = 100)}
                                    </div>

                                </div>

                            </div>
                        </div>
                        <div class="row align-items-stretch mt-3 small">
                            <!--
                            <div class="col bg-danger text-white mx-1 my-2 py-1 rounded">
                                <a href="javascript:void(0)" data-id="${contributor_id}" data-rowid="${rowId}"
                                    onclick="editContributor($(this))"
                                    class="h-100 d-flex justify-content-center align-items-center text-white text-decoration-none">
                                    Ubah
                                </a>
                            </div>

                            <div class="col bg-danger text-white mx-1 my-2 py-1 rounded">
                                <a href="javascript:void(0)" data-id="${contributor_id}" data-rowid="${rowId}"
                                    onclick="delContributor($(this))"
                                    class="h-100 d-flex justify-content-center align-items-center text-white text-decoration-none">
                                    Hapus
                                </a>
                            </div>
                            -->

                        </div>

                    </div>
                </div>
            </div>


            `;

            $('.ctrEmpty').remove();
            $('#ctrContainer').append(ctrContent);

        }

        window.saveContributor = function(e) {
            let mode = $('#modalContributor').attr('data-mode');
            let rowId = $('#modalContributor').attr('data-rowid');
            let contributor_id = rowId;
            let contributor_userid = $('#contributor_userid').val();
            let contributor_role = $('#contributor_role').val();
            let contributor_name = $('#modalContributor').attr('data-name');
            let ctrRoel = $('#modalContributor').attr('data-role');
            let contributor_description = $('#contributor_description').val();

            if (contributor_userid == '' || contributor_role == '') {
                Swal.fire({
                    icon: 'warning',
                    title: 'Pesan!',
                    text: 'Kontributor harap diisi.',
                    confirmButtonColor: '#e53935',
                });
                return;
            }

            let starComposer = ``;
            if (ctrRoel == 'Composer') {
                starComposer = `
                <div class=" position-relative">
                    <div class=" position-absolute z-1 text-primary" style="top:-10px;right:-10px;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-star-fill" viewBox="0 0 16 16">
                            <path
                                d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                        </svg>
                    </div>
                </div>

                `;
            }

            let ctrContent = `

            <div class="col-md-3 mb-3 contributor-item contributor-item-${contributor_id}" id="row-${rowId}"
                data-id="${contributor_id}" data-userid="${contributor_userid}"  data-role="${contributor_role}" data-name="${contributor_name}"
                data-description="${contributor_description}">

                <div class="card shadow h-100 ">
                    <div class="card-body">

                        <input type="hidden" name="contributor_id[]" value="${contributor_id}">
                        <input type="hidden" name="contributor_userid[]" value="${contributor_userid}">
                        <input type="hidden" name="contributor_role[]" value="${contributor_role}">
                        <input type="hidden" name="contributor_description[]" value="${contributor_description}">

                        ${starComposer}

                        <div class="row align-items-stretch">
                            <div class="col px-0">
                                <div class="d-flex justify-content-center align-items-center h-100 text-primary">

                                    <div
                                        style="width:48px;height:48px;background-image: url('https://static.vecteezy.com/system/resources/previews/026/266/484/non_2x/default-avatar-profile-icon-social-media-user-photo-image-vector.jpg');background-repeat:no-repeat;background-position:center;background-size:cover;border-radius:50%;">
                                    </div>

                                </div>
                            </div>
                            <div class="col-9">

                                <div class="d-flex flex-column small">

                                    <div class="fw-bold">
                                        ${contributor_name}
                                    </div>
                                    <div>${contributor_role}</div>
                                    <div>
                                        ${limitString(contributor_description, limit = 100)}
                                    </div>

                                </div>

                            </div>
                        </div>
                        <div class="row align-items-stretch mt-3 small">
                            <div class="col bg-danger text-white mx-1 my-2 py-1 rounded">
                                <a href="javascript:void(0)" data-id="${contributor_id}" data-rowid="${rowId}"
                                    onclick="editContributor($(this))"
                                    class="h-100 d-flex justify-content-center align-items-center text-white text-decoration-none">
                                    Ubah
                                </a>
                            </div>
                            <div class="col bg-danger text-white mx-1 my-2 py-1 rounded">
                                <a href="javascript:void(0)" data-id="${contributor_id}" data-rowid="${rowId}"
                                    onclick="delContributor($(this))"
                                    class="h-100 d-flex justify-content-center align-items-center text-white text-decoration-none">
                                    Hapus
                                </a>
                            </div>
                        </div>

                    </div>
                </div>
            </div>


            `;

            if (mode == 'add') {
                $('#ctrContainer').append(ctrContent);
                $('.ctrEmpty').remove();
            } else {
                $('#row-' + rowId).replaceWith(ctrContent);
            }

            $('#modalContributor').modal('hide');
            clearContributor();

        }

        window.clearContributor = function() {
            let mode = $('#modalContributor').attr('data-mode');
            if (mode != 'edit') {
                $('#contributor_userid').val(null).trigger('change');
                $('#contributor_role').val('');
                $('#contributor_description').val('');
                $('#modalContributor').attr('data-rowid', '');
                $('#modalContributor').attr('data-id', '');
                $('#modalContributor').attr('data-name', '');
                $('#modalContributor').attr('data-role', '');
                $('#modalContributor').attr('data-description', '');
            }
        }

        window.editContributor = function(e) {
            let rowId = e.attr('data-rowid');
            let contributor_id = e.attr('data-id');
            let contributor_userid = $('.contributor-item-' + contributor_id).attr('data-userid');
            let contributor_role = $('.contributor-item-' + contributor_id).attr('data-role');
            let contributor_name = $('.contributor-item-' + contributor_id).attr('data-name');
            let contributor_description = $('.contributor-item-' + contributor_id).attr('data-description');

            const option = new Option(contributor_name, contributor_userid, true, true);
            $('#contributor_userid').append(option).trigger('change');

            $('#contributor_role').val(contributor_role);
            $('#contributor_description').val(contributor_description);

            $('#modalContributor').attr('data-rowid', rowId);
            $('#modalContributor').attr('data-id', contributor_id);
            $('#modalContributor').attr('data-userid', contributor_userid);
            $('#modalContributor').attr('data-name', contributor_name);
            $('#modalContributor').attr('data-role', contributor_role);
            $('#modalContributor').attr('data-description', contributor_description);
            $('#modalContributor').attr('data-mode', 'edit');
            $('#btnsaveContributor').attr('data-rowid', rowId);
            $('#modalContributor').modal('show');

        }

        window.delContributor = function(e) {
            let rowId = e.attr('data-rowid');
            Swal.fire({
                title: 'Yakin ingin menghapus?',
                text: "Data yang dihapus tidak bisa dikembalikan!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                confirmButtonText: 'Ya, hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    $(`#row-${rowId}`).remove();
                }
            });
        }


        window.openAgreementConfig = function() {
            const modalElement = document.getElementById('modalAgreementConfig');
            const modal = new bootstrap.Modal(modalElement);
            modalElement.addEventListener('show.bs.modal', function() {

                $('#song_agreements').select2({
                    dropdownParent: $('#modalAgreementConfig'),
                    placeholder: 'Cari nama agreement',
                });

            });
            modal.show();
        }


        window.validateStepContent = function(el) {
            const dataName = el.getAttribute('data-name');

            if (dataName == 'step1') {

                const container = document.getElementById('ctrContainer');

                if (container && container.children.length > 0) {
                    // valid, tidak lakukan apa-apa
                } else {
                    // tampilkan sweet alert error
                    Swal.fire({
                        icon: 'warning',
                        title: 'Pesan!',
                        text: 'Silakan tambahkan kontributor sebelum melanjutkan.',
                        // confirmButtonText: 'OK',
                        confirmButtonColor: '#e53935',
                    });

                    return false;
                }
            }

            if (dataName == 'step2') {
                const container = document.getElementById('ctrContainer');

                if (container && container.children.length > 0) {
                    // valid, tidak lakukan apa-apa
                } else {
                    // tampilkan sweet alert error
                    Swal.fire({
                        icon: 'warning',
                        title: 'Pesan!',
                        text: 'Silakan tambahkan kontributor sebelum melanjutkan.',
                        // confirmButtonText: 'OK',
                        confirmButtonColor: '#e53935',
                    });

                    return false;
                }
            }

            if (dataName == 'step3') {
                const container = document.getElementById('lcsContainer');

                if (container && container.children.length > 0) {
                    // valid, tidak lakukan apa-apa
                } else {
                    // tampilkan sweet alert error
                    Swal.fire({
                        icon: 'warning',
                        title: 'Pesan!',
                        text: 'Silakan tambahkan lisensi sebelum melanjutkan.',
                        // confirmButtonText: 'OK',
                        confirmButtonColor: '#e53935',
                    });

                    return false;
                }
            }

            return true;
        }
    </script>

    <script>
        window.saveSong = function(event) {

            event.preventDefault();

            let title = $('#title').val();
            let stypes = $('#types').val();
            let description = $('#description').val();
            let lyrics = $('#lyrics').val();
            let countSongLinks = $('.song-link-lists').children().length;
            let countContributor = $('#ctrContainer').children().length;
            let countLicense = $('#lcsContainer').children().length;

            if (title == '') {
                Swal.fire({
                    icon: 'warning',
                    title: 'Pesan!',
                    text: 'judul lagu tidak boleh kosong.',
                    confirmButtonColor: '#e53935',
                });
                return;
            }

            if (stypes == '') {
                Swal.fire({
                    icon: 'warning',
                    title: 'Pesan!',
                    text: 'harap pilih Tipe lagu.',
                    confirmButtonColor: '#e53935',
                });
                return;
            }

            if (description == '') {
                Swal.fire({
                    icon: 'warning',
                    title: 'Pesan!',
                    text: 'harap input deskripsi lagu.',
                    confirmButtonColor: '#e53935',
                });
                return;
            }

            if (lyrics == '') {
                Swal.fire({
                    icon: 'warning',
                    title: 'Pesan!',
                    text: 'harap input lirik lagu.',
                    confirmButtonColor: '#e53935',
                });
                return;
            }

            if (countContributor <= 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Pesan!',
                    text: 'Harap tambahkan kontributor.',
                    confirmButtonColor: '#e53935',
                });
                return;
            }

            if (countLicense <= 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Pesan!',
                    text: 'Harap tambahkan lisensi dan harga.',
                    confirmButtonColor: '#e53935',
                });
                return;
            }

            //cek jika sudah release
            if (stypes == 'sudah release') {
                let genre_id = $('#genre_id').val();
                let coverFiles = $('#cover_image').prop('files');
                let audioFiles = $('#file_path').prop('files');

                let hasArtist = false;
                let hasComposer = false;

                // Loop semua contributor
                $('.contributor-item').each(function() {
                    let role = $(this).data('role');
                    if (role == 'Artist' || role == 'Cover Creator') {
                        hasArtist = true;
                    }
                    if (role == 'Composer') {
                        hasComposer = true;
                    }
                });

                // Jika salah satu tidak terpenuhi
                if (!hasArtist || !hasComposer) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Pesan!',
                        text: 'Contributor tidak valid, harus mengandung Artist dan Composer',
                        confirmButtonColor: '#e53935',
                    });
                    return;
                }



                if (genre_id == '') {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Pesan!',
                        text: 'harap input genre.',
                        confirmButtonColor: '#e53935',
                    });
                    return;
                }

                if (coverFiles.length <= 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Pesan!',
                        text: 'harap upload gambar cover lagu.',
                        confirmButtonColor: '#e53935',
                    });
                    return;
                }

                // if (audioFiles.length <= 0) {
                //     Swal.fire({
                //         icon: 'warning',
                //         title: 'Pesan!',
                //         text: 'harap upload file wav lagu.',
                //         confirmButtonColor: '#e53935',
                //     });
                //     return;
                // }

            }



            let countAgreement = $('#ctrAgreement').children().length;
            let ctrAgreement = "no";
            if (countAgreement > 0) {
                ctrAgreement = "yes";
            }

            if (ctrAgreement == 'yes') {
                let allChecked = true;
                $('.agreement_accepted').each(function() {
                    if (!$(this).is(':checked')) {
                        allChecked = false;
                        return false;
                    }
                });
                if (!allChecked) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Pesan!',
                        text: 'Wajib centang untuk persetujuan teks.',
                        confirmButtonColor: '#e53935',
                    });
                    return;
                }

            }

            // hapus link tidak terisi
            $('.links').each(function() {
                let links = $(this).val().trim();
                let rowid = $(this).attr('data-rowid');
                if (links == '' && rowid != 0) {
                    $('.rowLinks-' + rowid).remove();
                }
            });



            Swal.fire({
                title: 'Yakin untuk menambahkan lagu ini?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya, tambahkan',
                confirmButtonColor: '#e53935',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    $('#formSong').submit();
                }
            });


        }
    </script>
@endsection