@extends('layouts.participant')
@section('title')
    Upload Produk
@endsection

@section('customStyle')
    <link rel="stylesheet" type="text/css" href="{{ asset('css/user_home.css') }}" />
@endsection

@section('content')
<div class="row h-100 mx-auto">
    <div class="col my-auto h-100">
        <div class="registration-form my-auto">
        <form method="POST" action="{{ url('/participant/product/upload') }}" enctype="multipart/form-data">
        @csrf
        @method('post')
            <div class="text-center">
                <img src="{{ asset('assets/images/logo-pkkp.png') }}" width="180">
            </div>
            <h3 class="text-center font-weight-bold my-4">UPLOAD PRODUK PKKP {{date('Y')}}</h3>

            <div class="form-group">
                <input type="text" class="form-control item @error('name') is-invalid @enderror" id="name" placeholder="nama produk" name="name" value="{{ old('name') }}" autofocus required>
                @error('name')
                    <div class="invalid-feedback" role="alert">{{ $message }}</div>
                @enderror
            </div>


            <div class="form-group">
                <select class="form-control item @error('category') is-invalid @enderror" id="category" name="category" required>
                  <option selected disabled class="bg-secondary text-white">kategori produk</option>
                  @foreach ($categorys as $category)
                    <option value="{{$category->name_category}}">{{ucwords($category->name_category)}}</option>
                  @endforeach
                  
                </select>
                @error('category')
                    <div class="invalid-feedback" role="alert">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-group">
                <input type="text" class="form-control item @error('sub_category') is-invalid @enderror" id="sub_category" placeholder="kategori khusus" name="sub_category" value="{{ old('sub_category') }}" >
                @error('sub_category')
                    <div class="invalid-feedback" role="alert">{{ $message }}</div>
                @enderror
            </div>

            {{-- tokopedia --}}
            <div class="form-group">
                <input type="text" class="form-control item @error('link_tokopedia') is-invalid @enderror" id="link_tokopedia" placeholder="link tokopedia (isi bila ada)" name="link_tokopedia" value="{{ old('link_tokopedia') }}" >
                @error('link_tokopedia')
                    <div class="invalid-feedback" role="alert">{{ $message }}</div>
                @enderror
            </div>

            {{-- shopee --}}
            <div class="form-group">
                <input type="text" class="form-control item @error('link_shopee') is-invalid @enderror" id="link_shopee" placeholder="link shopee (isi bila ada)" name="link_shopee" value="{{ old('link_shopee') }}" >
                @error('link_shopee')
                    <div class="invalid-feedback" role="alert">{{ $message }}</div>
                @enderror
            </div>

            {{-- bukalapak --}}
            <div class="form-group">
                <input type="text" class="form-control item @error('link_bukalapak') is-invalid @enderror" id="link_bukalapak" placeholder="link bukalapak (isi bila ada)" name="link_bukalapak" value="{{ old('link_bukalapak') }}" >
                @error('link_bukalapak')
                    <div class="invalid-feedback" role="alert">{{ $message }}</div>
                @enderror
            </div>
            
            {{-- youtube --}}
            <div class="form-group">
                <input type="text" class="form-control item @error('link_youtube') is-invalid @enderror" id="link_youtube" placeholder="link youtube (isi bila ada)" name="link_youtube" value="{{ old('link_youtube') }}" >
                @error('link_youtube')
                    <div class="invalid-feedback" role="alert">{{ $message }}</div>
                @enderror
            </div>

            {{-- facebook --}}
            <div class="form-group">
                <input type="text" class="form-control item @error('link_facebook') is-invalid @enderror" id="link_facebook" placeholder="link facebook (isi bila ada)" name="link_facebook" value="{{ old('link_facebook') }}" >
                @error('link_facebook')
                    <div class="invalid-feedback" role="alert">{{ $message }}</div>
                @enderror
            </div>

            {{-- instagram --}}
            <div class="form-group">
                <input type="text" class="form-control item @error('link_instagram') is-invalid @enderror" id="link_instagram" placeholder="link instagram (isi bila ada)" name="link_instagram" value="{{ old('link_instagram') }}" >
                @error('link_instagram')
                    <div class="invalid-feedback" role="alert">{{ $message }}</div>
                @enderror
            </div>

            {{-- link lain --}}
            <div class="form-group">
                <input type="text" class="form-control item @error('promotion') is-invalid @enderror" id="promotion" placeholder="link promosi lainnya (isi bila ada)" name="promotion" value="{{ old('promotion') }}" >
                @error('promotion')
                    <div class="invalid-feedback" role="alert">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-group">
                <div class="custom-file">
                    <input type="file" class="custom-file-input" name="image" id="image" required/>
                    <label class="custom-file-label item" for="image">pilih gambar utama produk</label>
                </div>
                @error('image')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>

            <div class="form-group">
                <div class="custom-file">
                    <input type="file" class="custom-file-input" name="image_2" id="image_2" />
                    <label class="custom-file-label item label_2" for="image_2">pilih gambar produk 2</label>
                </div>
                @error('image_2')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>

            <div class="form-group">
                <div class="custom-file">
                    <input type="file" class="custom-file-input" name="image_3" id="image_3" />
                    <label class="custom-file-label item label_3" for="image_3">pilih gambar produk 3</label>
                </div>
                @error('image_3')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>

            <div class="form-group">
                <div class="custom-file">
                    <input type="file" class="custom-file-input" name="image_4" id="image_4" />
                    <label class="custom-file-label item label_4" for="image_4">pilih gambar produk 4</label>
                </div>
                @error('image_4')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>

            <div class="form-group">
                <label for="description" class="form-label">deskripsi singkat</label>
                <textarea class="form-control item @error('description') is-invalid @enderror" name="description" id="description" rows="5" value=""></textarea>
                @error('description')
                    <div class="invalid-feedback" role="alert">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-group">
                <div class="row mt-3">
                    <div class="col text-center">
                        <button type="submit" class="btn hadir">Upload</button>
                        <a href="{{ url('/home') }}" class="btn hadir bg-secondary">Kembali</a>
                    </div>
                </div>
            </div>

            {{-- <div class="text-center mt-3">
                <a class="" href="{{ url('/register') }}">Don't have account?</a>
            </div> --}}
        </form>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    $('#image').on('change',function(){
        //get the file name
        var fileName = $(this).val().replace('C:\\fakepath\\', " ");
        //replace the "Choose a file" label
        $(this).next('.custom-file-label').html(fileName);
    })
    $('#image_2').on('change',function(){
        //get the file name
        var fileName = $(this).val().replace('C:\\fakepath\\', " ");
        //replace the "Choose a file" label
        $(this).next('.label_2').html(fileName);
    })
    $('#image_3').on('change',function(){
        //get the file name
        var fileName = $(this).val().replace('C:\\fakepath\\', " ");
        //replace the "Choose a file" label
        $(this).next('.label_3').html(fileName);
    })
    $('#image_4').on('change',function(){
        //get the file name
        var fileName = $(this).val().replace('C:\\fakepath\\', " ");
        //replace the "Choose a file" label
        $(this).next('.label_4').html(fileName);
    })
</script>
@endsection