@extends('admin.partials.master')
@section('admin_content')
    <section id="dashboard-ecommerce">
        <div class="row">
            <div class="col-12">
                <form action="{{ route('admin.package.insert') }}" method="POST" enctype="multipart/form-data">@csrf
                    <input type="hidden" name="id" value="{{ $data ? $data->id : '' }}">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">
                                <div class="d-flex justify-content-between">
                                    <div>{{ $data ? 'Update' : 'Create New' }} Package</div>
                                    <div>
                                        <a href="{{ route('admin.package.index') }}" class="btn btn-primary btn-sm"> 
                                            <i class="bx bx-left-arrow"></i> Package List
                                        </a>
                                    </div>
                                </div>
                            </h4>
                        </div>
                        <div class="card-content">
                            <div class="card-body">
                                <div class="row">

                                    <!-- Package Name -->
                                    <div class="col-sm-6">
                                        <label for="name">Package Name</label>
                                        <input type="text" class="form-control is-valid"
                                               name="name" id="name"
                                               placeholder="Name" value="{{ $data ? $data->name : '' }}" required>
                                        <div class="valid-feedback">
                                            <i class="bx bx-radio-circle"></i>
                                            Note: This field is required
                                        </div>
                                    </div>

                                    <!-- Package Title -->
                                    <div class="col-sm-6">
                                        <label for="title">Package Title</label>
                                        <input type="text" class="form-control is-valid"
                                               name="title" id="title"
                                               placeholder="Title" value="{{ $data ? $data->title : '' }}" required>
                                        <div class="valid-feedback">
                                            <i class="bx bx-radio-circle"></i>
                                            Note: This field is required
                                        </div>
                                    </div>

                                    <!-- Package Category -->
                                    <div class="col-sm-6 mt-2">
                                        <label for="category">Package Category</label>
                                        <select name="category" id="category" class="form-control is-valid" required>
                                            <option value="">-- Select Category --</option>
                                            <option value="P Series" {{ $data && $data->category=='P Series' ? 'selected' : '' }}>P Series</option>
                                            <option value="B Series" {{ $data && $data->category=='B Series' ? 'selected' : '' }}>B Series</option>
                                        </select>
                                        <div class="valid-feedback">
                                            <i class="bx bx-radio-circle"></i>
                                            Note: Please choose a category
                                        </div>
                                    </div>

                                    <!-- Progress -->
                                    <div class="col-sm-6 mt-2">
                                        <label for="progress">Progress (%)</label>
                                        <input type="number" class="form-control is-valid"
                                               name="progress" id="progress" step="0.1" min="0" max="100"
                                               placeholder="e.g. 6.4"
                                               value="{{ $data ? $data->progress : '' }}">
                                        <div class="valid-feedback">
                                            <i class="bx bx-radio-circle"></i>
                                            Note: Enter percentage value (0 - 100)
                                        </div>
                                    </div>

                                    <!-- Photo Upload -->
                                    <div class="col-sm-12 mt-2">
                                        <div class="row">
                                            <div class="col-12 col-sm-6">
                                                <fieldset class="form-group">
                                                    <label for="basicInputFile">Upload Photo 
                                                        <small>{Suggestion: size 200X200(px)}</small>
                                                    </label>
                                                    <div class="custom-file">
                                                        <input type="file" name="photo"
                                                               class="custom-file-input is-valid" id="inputGroupFile01"
                                                               @if(!$data) required @endif onchange="showPreview(event)">
                                                        <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
                                                        <div class="valid-feedback">
                                                            <i class="bx bx-radio-circle"></i>
                                                            Note: Package image mandatory
                                                        </div>
                                                    </div>
                                                </fieldset>
                                            </div>
                                            <div class="col-12 col-sm-6">
                                                <div class="image_preview">
                                                    <img src="{{ $data ? asset(view_image($data->photo)) : asset(not_found_img()) }}"
                                                         id="file-ip-1-preview" class="rounded" alt="Preview Image"
                                                         style="width: 100px;height: 100px">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Price -->
                                    <div class="col-sm-6">
                                        <label for="price">Price</label>
                                        <input type="number" class="form-control is-valid"
                                               name="price" id="price"
                                               placeholder="Price" value="{{ $data ? $data->price : '' }}" required>
                                        <div class="valid-feedback">
                                            <i class="bx bx-radio-circle"></i>
                                            Note: This field is required
                                        </div>
                                    </div>

                                    <!-- Validity -->
                                    <div class="col-sm-6">
                                        <label for="validity">Validity Days</label>
                                        <input type="number" class="form-control is-valid"
                                               oninput="calculateHour(this)"
                                               name="validity" id="validity"
                                               placeholder="Validity days" value="{{ $data ? $data->validity : '' }}" required>
                                        <div class="valid-feedback">
                                            <i class="bx bx-radio-circle"></i>
                                            Note: This field is required
                                        </div>
                                    </div>

                                    <!-- Commission -->
                                    <div class="col-sm-6">
                                        <label for="commission_with_avg_amount">Commission with average amount</label>
                                        <input type="number" class="form-control is-valid"
                                               name="commission_with_avg_amount" id="commission_with_avg_amount"
                                               placeholder="Commission with average amount" value="{{ $data ? $data->commission_with_avg_amount : '' }}" required>
                                        <div class="valid-feedback">
                                            <i class="bx bx-radio-circle"></i>
                                            Note: This field is required
                                        </div>
                                    </div>

                                    <!-- Status -->
                                    @if($data)
                                        <div class="col-sm-12">
                                            <label for="status">Package Status</label>
                                            <select name="status" class="form-control" id="status">
                                                <option value="active" {{ $data->status == 'active' ? 'selected' : '' }}>Active</option>
                                                <option value="inactive" {{ $data->status == 'inactive' ? 'selected' : '' }}>In-Active</option>
                                            </select>
                                            <div class="valid-feedback">
                                                <i class="bx bx-radio-circle"></i>
                                                Note: This field is required
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <div class="card">
                        <div class="card-header">
                            <h6 class="card-title">
                                <div class="d-flex justify-content-between">
                                    <div style="margin-top: .7rem !important">
                                        Submit Your Package Information
                                    </div>
                                    <div>
                                        <div class="form-group mb-0">
                                            <button type="submit" class="btn btn-success">
                                                <i class="bx bx-plus"></i>{{ $data ? 'Update' : 'Submit' }} 
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </h6>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <!-- JS -->
    <script>
        function showPreview(event){
            if(event.target.files.length > 0){
                var src = URL.createObjectURL(event.target.files[0]);
                var preview = document.getElementById("file-ip-1-preview");
                preview.src = src;
                preview.style.display = "block";
            }
        }
        function calculateHour(_this){
            document.getElementById('hours').value = _this.value * 24
        }
    </script>
@endsection
