@extends('layouts/base_view')
@section('title')
{!! $variables['header_routes'] !!}
@endsection
@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card card-outline card-warning">
                    <div class="card-header">
                        <h3 class="card-title">{!! $variables['judul'] !!}</h3>
                    </div>
                    <div class="card-body">
                        <!-- <form method="post" action="{{ route('users.store', $data->id, $variables['type']) }}" enctype="multipart/form-data"> -->
                        <form method="post" action="{{ route('users.store', [$data->id, $variables['type']]) }}" enctype="multipart/form-data">
                            @csrf
                            @if($variables['type'] == 'cp')
                            <div class="row">

                                @php
                                $type = '';
                                if ($f_need_change_password && $f_need_change_password != '') {
                                $type = "style=display:none";
                                }
                                @endphp

                                <div class="form-group col-md-4" {{$type}}>
                                    <label for="current_password" class="font-weight-bold">Password Lama</label>
                                    <input
                                        type="password"
                                        class="form-control"
                                        name="current_password"
                                        value="{{ $f_need_change_password ?? '' }}"
                                        placeholder="">
                                    @if ($errors->has('current_password'))
                                    <span class="text-danger text-left">{{ $errors->first('current_password') }}</span>
                                    @endif
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="password" class="font-weight-bold">Password Baru</label>
                                    <input
                                        type="password"
                                        class="form-control"
                                        name="password"
                                        placeholder=""
                                        value="{{ old('password', '') }}">
                                    @if ($errors->has('password'))
                                    <span class="text-danger text-left">{{ $errors->first('password') }}</span>
                                    @endif
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="password_confirmation" class="font-weight-bold">Konfirmasi Password</label>
                                    <input
                                        type="password"
                                        class="form-control"
                                        name="password_confirmation"
                                        placeholder=""
                                        value="{{ old('password_confirmation', $data->password_confirmation ?? '') }}">
                                    @if ($errors->has('password_confirmation'))
                                    <span class="text-danger text-left">{{ $errors->first('password_confirmation') }}</span>
                                    @endif
                                </div>
                            </div>
                            @elseif($variables['type'] == 'ema')
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="fullname" class="font-weight-bold">Nama Lengkap</label>
                                    <input value="{{ old('fullname', $data->fullname ?? '') }}" type="text" class="form-control" name="fullname" placeholder="">
                                    @if ($errors->has('fullname'))
                                    <span class="text-danger text-left">{{ $errors->first('fullname') }}</span>
                                    @endif
                                </div>
                                <div class="form-group col-md-3">
                                    <label for="email" class="font-weight-bold">Email</label>
                                    <input value="{{ old('email', $data->email ?? '') }}" type="text" class="form-control" name="email" placeholder="">
                                    @if ($errors->has('email'))
                                    <span class="text-danger text-left">{{ $errors->first('email') }}</span>
                                    @endif
                                </div>
                                <div class="form-group col-md-3">
                                    <label for="telephone" class="font-weight-bold">Telepon</label>
                                    <input value="{{ old('telephone', $data->telephone ?? '') }}" type="text" class="form-control" name="telephone" placeholder="">
                                    @if ($errors->has('telephone'))
                                    <span class="text-danger text-left">{{ $errors->first('telephone') }}</span>
                                    @endif
                                </div>
                            </div>
                            @else
                            <div class="row">
                                <div class="form-group col-md-3">
                                    <label for="fullname" class="font-weight-bold">Fullname</label>
                                    <input value="{{ old('fullname', $data->fullname ?? '') }}" type="text" class="form-control" name="fullname" placeholder="">
                                    @if ($errors->has('fullname'))
                                    <span class="text-danger text-left">{{ $errors->first('fullname') }}</span>
                                    @endif
                                </div>
                                <div class="form-group col-md-3">
                                    <label for="email" class="font-weight-bold">Email</label>
                                    <input value="{{ old('email', $data->email ?? '') }}" type="text" class="form-control" name="email" placeholder="">
                                    @if ($errors->has('email'))
                                    <span class="text-danger text-left">{{ $errors->first('email') }}</span>
                                    @endif
                                </div>
                                <div class="form-group col-md-3">
                                    <label for="telephone" class="font-weight-bold">Telephone</label>
                                    <input value="{{ old('telephone', $data->telephone ?? '') }}" type="text" class="form-control" name="telephone" placeholder="">
                                    @if ($errors->has('telephone'))
                                    <span class="text-danger text-left">{{ $errors->first('telephone') }}</span>
                                    @endif
                                </div>
                                <div class="form-group col-md-3">
                                    <label for="role_id" class="font-weight-bold">Role</label>
                                    <select name="role_id" class="form-control" required>
                                        <option value="">-- Pilih Role --</option>
                                        @foreach($variables['roles'] as $comb)
                                        <option value="{{ $comb->id }}" {{ old('role_id', $variables['currentRole'] ?? '') == $comb->id ? 'selected' : '' }}>
                                            {{ $comb->name }}
                                        </option>
                                        @endforeach
                                    </select>
                                    @if ($errors->has('role_id'))
                                    <span class="text-danger">{{ $errors->first('role_id') }}</span>
                                    @endif
                                </div>
                                @if(empty($data->username))
                                <div class="form-group col-md-3">
                                    <label for="username" class="font-weight-bold">Username</label>
                                    <input value="{{ old('username', $data->username ?? '') }}" type="text" class="form-control" name="username" placeholder="">
                                    @if ($errors->has('username'))
                                    <span class="text-danger text-left">{{ $errors->first('username') }}</span>
                                    @endif
                                </div>
                                <div class="form-group col-md-3">
                                    <label for="password" class="font-weight-bold">Password</label>
                                    <input
                                        type="password"
                                        class="form-control"
                                        name="password"
                                        placeholder=""
                                        value="{{ $data->password ?? '' }}">
                                    @if ($errors->has('password'))
                                    <span class="text-danger text-left">{{ $errors->first('password') }}</span>
                                    @endif
                                </div>
                                @endif
                                <div class="form-group col-md-3">
                                    <label for="status" class="font-weight-bold">Status <span class="text-danger">*</span></label>
                                    <select name="status" class="form-control" required>
                                        <option value="Aktif" {{ old('status', $data->status ?? 'Aktif') == 'Aktif' ? 'selected' : '' }}>Aktif</option>
                                        <option value="Nonaktif" {{ old('status', $data->status ?? '') == 'Nonaktif' ? 'selected' : '' }}>Nonaktif</option>
                                    </select>
                                    @if ($errors->has('status'))
                                    <span class="text-danger">{{ $errors->first('status') }}</span>
                                    @endif
                                </div>
                                <div class="col-sm-12">
                                    <div class="card card-outline card-warning">
                                        <div class="card-header">
                                            <h3 class="card-title">Hak Akses Khusus</h3>
                                            <div class="card-tools">
                                                <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                                                    <i class="fas fa-minus"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="form-check">
                                                <input
                                                    class="form-check-input"
                                                    type="checkbox"
                                                    name="flag_acc_spb_batalan"
                                                    id="flag_acc_spb_batalan"
                                                    value="1"
                                                    {{ old('flag_acc_spb_batalan', $data->flag_acc_spb_batalan ?? false) ? 'checked' : '' }}>
                                                <label class="form-check-label font-weight-bold" for="flag_acc_spb_batalan">
                                                    <i class="fas fa-check-circle text-success"></i> Approve Pembatalan SPB
                                                </label>
                                                <small class="form-text text-muted">
                                                    User dengan akses ini dapat menyetujui permintaan pembatalan SPB.
                                                </small>
                                            </div>
                                            <div class="form-check mt-3">
                                                <input
                                                    class="form-check-input"
                                                    type="checkbox"
                                                    name="flag_revision_so"
                                                    id="flag_revision_so"
                                                    value="1"
                                                    {{ old('flag_revision_so', $data->flag_revision_so ?? false) ? 'checked' : '' }}>
                                                <label class="form-check-label font-weight-bold" for="flag_revision_so">
                                                    <i class="fas fa-edit text-warning"></i> Revisi Stock Opname
                                                </label>
                                                <small class="form-text text-muted">
                                                    User dengan akses ini dapat melakukan revisi Stock Opname yang sudah disubmit.
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="card card-outline card-warning">
                                        <div class="card-header">
                                            <h3 class="card-title">Seksi</h3>
                                            <div class="card-tools">
                                                <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                                                    <i class="fas fa-minus"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="form-group">
                                                <div class="mb-2">
                                                    <button type="button" class="btn btn-sm btn-success" id="selectAllSeksi">
                                                        <i class="fas fa-check-double"></i> Pilih Semua
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-secondary" id="deselectAllSeksi">
                                                        <i class="fas fa-times"></i> Hapus Semua
                                                    </button>
                                                    <small class="text-muted ml-2">
                                                        <span id="selectedSeksiCount">0</span> dari <span id="totalSeksiCount">{{ count($variables['seksiList']) }}</span> seksi dipilih
                                                    </small>
                                                </div>
                                                <small class="text-info d-block mb-2">
                                                    <i class="fas fa-info-circle"></i>
                                                    <strong>Tips:</strong> Gunakan Ctrl+Click untuk pilih multiple, Shift+Click untuk pilih range
                                                </small>
                                                <select
                                                    name="seksi_ids[]"
                                                    id="seksi_ids"
                                                    class="form-control"
                                                    multiple
                                                    style="height: auto; min-height: 120px;">
                                                    @foreach($variables['seksiList'] as $seksi)
                                                    <option value="{{ $seksi->id }}"
                                                        {{ is_array(old('seksi_ids', $data->seksi_ids ?? [])) && in_array($seksi->id, old('seksi_ids', $data->seksi_ids ?? [])) ? 'selected' : '' }}>
                                                        {{ $seksi->code }} - {{ $seksi->name }}
                                                    </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="card card-outline card-warning">
                                        <div class="card-header">
                                            <h3 class="card-title">Akses Cabang</h3>
                                            <div class="card-tools">
                                                <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                                                    <i class="fas fa-minus"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="form-group">
                                                <div class="mb-2">
                                                    <button type="button" class="btn btn-sm btn-success" id="selectAllStores">
                                                        <i class="fas fa-check-double"></i> Pilih Semua
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-secondary" id="deselectAllStores">
                                                        <i class="fas fa-times"></i> Hapus Semua
                                                    </button>
                                                    <small class="text-muted ml-2">
                                                        <span id="selectedStoresCount">0</span> dari <span id="totalStoresCount">{{ count($variables['stores']) }}</span> toko dipilih
                                                    </small>
                                                </div>
                                                <small class="text-info d-block mb-2">
                                                    <i class="fas fa-info-circle"></i>
                                                    <strong>Tips:</strong> Gunakan Ctrl+Click untuk pilih multiple, Shift+Click untuk pilih range
                                                </small>
                                                <select
                                                    required
                                                    name="user_stores[]"
                                                    id="user_stores"
                                                    class="form-control"
                                                    multiple
                                                    size="15"
                                                    style="height: 300px;">
                                                    @foreach($variables['stores'] as $comb)
                                                    <option value="{{ $comb->id }}" {{ (is_array(old('user_stores', $variables['user_stores'] ?? [])) && in_array($comb->id, old('user_stores', $variables['user_stores'] ?? []))) ? 'selected' : '' }}>
                                                        {{ $comb->code }} - {{ $comb->name }}
                                                    </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <!-- /.card-body -->
                                    </div>
                                    <!-- /.card -->
                                </div>
                            </div>
                            @endif
                            <button type="submit" class="btn btn-info btn-sm button-cek-permission" data-permission="users.store"><i class="fas fa-save"></i> Simpan</button>
                            <a href="{{ $data->id ? route('users.show',$data->id) : route('users.index') }}" class="btn btn-warning btn-sm" data='back' onclick="return notificationBeforeBack(event, this);"> <i class="fas fa-arrow-left"></i> Kembali</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
/* Custom styling for native multi-select */
#user_stores, #seksi_ids {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 0.375rem;
}

#user_stores option, #seksi_ids option {
    padding: 8px 12px;
    border-radius: 3px;
    margin-bottom: 2px;
    cursor: pointer;
}

#user_stores option:hover, #seksi_ids option:hover {
    background-color: #e9ecef;
}

#user_stores option:checked, #seksi_ids option:checked {
    background: linear-gradient(#ffc107, #ffc107);
    color: #000;
    font-weight: 500;
}

/* Firefox specific */
@-moz-document url-prefix() {
    #user_stores option:checked, #seksi_ids option:checked {
        background-color: #ffc107 !important;
        color: #000 !important;
    }
}
</style>

<script>
$(document).ready(function() {
    // Update selected count on load
    updateSelectedCount();

    // Update count when selection changes
    $('#user_stores').on('change', function() {
        updateSelectedCount();
    });

    // Select All button
    $('#selectAllStores').on('click', function() {
        $('#user_stores option').prop('selected', true);
        updateSelectedCount();
    });

    // Deselect All button
    $('#deselectAllStores').on('click', function() {
        $('#user_stores option').prop('selected', false);
        updateSelectedCount();
    });

    // Function to update selected count
    function updateSelectedCount() {
        var selectedCount = $('#user_stores option:selected').length;
        $('#selectedStoresCount').text(selectedCount);

        if (selectedCount === 0) {
            $('#deselectAllStores').prop('disabled', true);
        } else {
            $('#deselectAllStores').prop('disabled', false);
        }

        var totalCount = $('#user_stores option').length;
        if (selectedCount === totalCount) {
            $('#selectAllStores').prop('disabled', true);
        } else {
            $('#selectAllStores').prop('disabled', false);
        }
    }

    // Seksi multi-select
    updateSeksiCount();
    $('#seksi_ids').on('change', function() { updateSeksiCount(); });
    $('#selectAllSeksi').on('click', function() {
        $('#seksi_ids option').prop('selected', true);
        updateSeksiCount();
    });
    $('#deselectAllSeksi').on('click', function() {
        $('#seksi_ids option').prop('selected', false);
        updateSeksiCount();
    });
    function updateSeksiCount() {
        var sel = $('#seksi_ids option:selected').length;
        var tot = $('#seksi_ids option').length;
        $('#selectedSeksiCount').text(sel);
        $('#deselectAllSeksi').prop('disabled', sel === 0);
        $('#selectAllSeksi').prop('disabled', sel === tot);
    }
});
</script>
@endsection