@extends('Admin.layout')

@section('content')

<div class="row flex-column flex-md-row mb-3">
    <div class="d-md-flex justify-content-between align-items-center dt-layout-start col-md-auto me-auto mt-0" onclick="window.history.back()">
        <h4> <button type="button" class="btn btn-icon bg-white waves-effect me-2"
                style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                    viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M15 6l-6 6l6 6" />
                </svg>
            </button>Create Custom</h4>
    </div>
    <div class="d-md-flex justify-content-between align-items-center dt-layout-end col-md-auto ms-auto mt-0">
        <div class="dt-buttons btn-group flex-wrap mb-0">
            <div class="btn-group">
                <a href="{{ route('Custom_product_table') }}">
                    <button class="btn buttons-collection btn-primary me-4" tabindex="0"
                        aria-controls="DataTables_Table_0" type="button" aria-haspopup="dialog" aria-expanded="false">
                        View Table
                    </button>
                </a>
            </div>
        </div>
    </div>
</div>
<div class="card p-5">
    <div class="form-section">
        <h5>Custom Product</h5>
        <form id="updateForm" method="POST" action="{{ route('update_custom_product_form') }}" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="id" value="{{ $product->id }}">

            <div class="row">
                <div class="col-lg-6 mb-3">
                    <label class="form-label" for="stateName"> Product Name</label>
                    <input type="text" class="form-control" name="product_name" id="product_name" value="{{ old('product_name', $product->product_name) }}">
                    @error('product_name')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="col-lg-6 mb-3">
                    <label class="form-label" for="material">Enter Material</label>
                    <select name="material" id="material" class="form-control">
                        <option value="">-- Select Material --</option>
                        @foreach($materials as $material)
                        <option value="{{ $material->material }}"
                            {{ old('material', $product->material ?? '') == $material->material ? 'selected' : '' }}>
                            {{ $material->material }}
                        </option>
                        @endforeach
                    </select>
                    @error('material')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>


            </div>


            <div class="row">
                <div class="col-lg-6 mb-3">
                    <label class="form-label" for="stateLogo">Image</label>
                    <input type="file" class="form-control" id="image" name="image" accept="image/*" onchange="previewImage(event)">
                    @error('image')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror

                    @if($product->image)
                    <div class="mt-2">
                        <img id="preview" src="{{ asset($product->image) }}" width="100" height="100" class="rounded border">
                    </div>
                    @else
                    <img id="preview" src="#" width="100" height="100" class="rounded border d-none">
                    @endif
                </div>

                <div class="col-lg-6 mb-3">
                    <label class="form-label" for="stateName"> Per sq Rate</label>
                    <input type="text" class=" form-control" name="per_sq_rate" id="per_sq_rate" value="{{ old('per_sq_rate', $product->per_sq_rate) }}">
                    @error('per_sq_rate')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

            </div>
            <div class="form-actions d-flex justify-content-center mt-4">
                <button type="button" class="btn btn-primary me-3" data-bs-toggle="modal"
                    data-bs-target="#update_submit">Submit</button>
                <button type="reset" class="btn btn-label-secondary">Discard</button>
            </div>
        </form>
    </div>
</div>

<!-- submit -->
<div class="modal fade" id="update_submit" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to submit ?</p>
            <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                <button type="button" class="btn btn-outline-primary p-3 fw-semibold me-3" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="submit" id="submit_btn" class="btn btn-primary p-3 fw-semibold ">
                    Yes, Sure
                </button>
            </div>
        </div>
    </div>
</div>




<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
<script>
    // Preview uploaded image
    function previewImage(event) {
        const preview = document.getElementById('preview');
        const file = event.target.files[0];
        if (file) {
            preview.src = URL.createObjectURL(file);
            preview.classList.remove('d-none');
        }
    }

    document.getElementById('submit_btn').addEventListener('click', function(e) {
        e.preventDefault();
        let btn = this;
        btn.disabled = true;
        btn.innerText = 'Processing...';
        document.getElementById('updateForm').submit();
    });
</script>

@endsection