@push('styles')
    <style>
        .avatar-upload {
            position: relative;
            max-width: 288px;
        }

        .avatar-upload .avatar-edit {
            position: absolute;
            right: 12px;
            z-index: 1;
            top: 10px;
        }

        .avatar-upload .avatar-edit input {
            display: none;
        }

        .avatar-upload .avatar-edit label {
            display: inline-block;
            width: 40px;
            height: 40px;
            margin-bottom: 0;

            background: #FFFFFF;
            border: 1px solid transparent;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
            cursor: pointer;
            font-weight: normal;
            transition: all .2s ease-in-out;
        }

        .avatar-upload .avatar-edit label:hover {
            background: #f1f1f1;
            border-color: #d6d6d6;
        }

        .avatar-upload .avatar-edit label:after {
            product: "\f040";
            font-family: 'FontAwesome';
            color: #757575;
            position: absolute;
            top: 10px;
            left: 0;
            right: 0;
            text-align: center;
            margin: auto;
        }

        .avatar-upload .avatar-preview {
            width: 300px;
            height: 300px;
            position: relative;

            border: 6px solid #F8F8F8;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
        }

        .avatar-upload .avatar-preview>div {
            width: 100%;
            height: 100%;

            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
@endpush

<div class="row m-2">
    @if ($errors->any())
        <ol>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ol>
    @endif

    <div class="col-sm-12 col-md-12 col-lg-12 form-group">
        <label for="file">File <span class="text-danger">*</span></label>
        @if (isset($download) && $download->file)
            <input type="hidden" name="photo_current" id="photoCurrent" value="{{ $download->file }}">
        @endif
        <div class="avatar-upload">
            <div class="avatar-edit">
                <input type='file' id="imageUpload" accept=".png, .jpg, .jpeg, .pdf, .doc, .docx, .xls, .xlsx"
                    class="d-none" name="file"
                    value="{{ old('file', isset($download) ? $download->file : null) }}" />
                <label for="imageUpload" class="btn btn-primary"></label>
            </div>
            <div class="avatar-preview">
                <div id="imagePreview" class="rounded-circle mx-auto"
                    style="background-image: url('{{ isset($download) && $download->file ? asset($download->file) : asset('assets/img/cover.png') }}'); background-size: cover; background-position: center;">
                </div>
            </div>
        </div>
        @error('file')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-sm-12 col-md-6 col-lg-4 form-group">
        <label for="name">Name <span class="text-danger">*</span></label>
        <input type="text" class="form-control @error('name') error-field @enderror" name="name" id="name"
            value="{{ old('name', isset($download) ? $download->name : null) }}" required>
        @error('name')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-sm-12 col-md-6 col-lg-4 form-group">
        <label for="download_category_id">Download Category<span class="text-danger">*</span></label>
        <select class="form-control @error('download_category_id') error-field @enderror select"
            name="download_category_id" id="download_category_id">
            <option value="" disabled selected>Select Download Category</option>
            @foreach ($downloadCategories as $downloadCategory)
                <option value="{{ $downloadCategory->id }}"
                    {{ old('download_category_id') == $downloadCategory->id || (isset($download) && $download->download_category_id == $downloadCategory->id) ? 'selected' : '' }}>
                    {{ $downloadCategory->name }}
                </option>
            @endforeach
        </select>
        @error('download_category_id')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-sm-12 col-md-6 col-lg-4 form-group">
        <label for="display_order">Display Order <span class="text-danger">*</span></label>
        <input type="number" class="form-control @error('display_order') error-field @enderror" name="display_order"
            id="display_order" value="{{ old('display_order', isset($download) ? $download->display_order : null) }}"
            required>
        @error('display_order')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-sm-12 col-md-6 col-lg-4 form-group">
        <label for="is_active">Is Active? <span class="text-danger">*</span></label>
        <br>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="is_active" id="yes" value=1
                {{ isset($download) ? ($download->is_active == 1 ? 'checked' : null) : 'checked' }}>
            <label class="form-check-label" for="yes">Yes</label>
        </div>

        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="is_active" id="no" value=0
                {{ isset($download) ? ($download->is_active == 0 ? 'checked' : null) : null }}>
            <label class="form-check-label" for="no">NO</label>
        </div>

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

@push('scripts')
    <script>
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#imagePreview').css('background-image', 'url(' + e.target.result + ')');
                    $('#imagePreview').hide();
                    $('#imagePreview').fadeIn(650);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

        $("#imageUpload").change(function() {
            readURL(this);
        });
    </script>
@endpush