<form class="row g-3 auto-width company_images" action="{{ route('companies-images.store')}}" method="post" enctype='multipart/form-data'>
    @csrf
    <input type="hidden" name="company_id" data-id="{!! $id !!}">
    <!-- Image Url -->
    <div class="col-md-12">
        <label for="image_url" class="form-label">Image Url  <span class="text-danger"><b>*</b></span></label>
        <input type="file" class="form-control" id="image_url" name="image_url" aria-describedby="inputGroupPrepend" required>
        <span class="text-danger error_image_url" style="display: none;">This field is required.</span>
    </div>
    <!-- Image Type -->
    <div class="col-md-12">
        <label for="image_type" class="form-label" >Image Type/Position <span class="text-danger"><b>*</b></span></label>
        <select class="form-select" aria-label="image_type" name="image_type">
            <option selected value="">Select Image Type</option>
            <option value="logo">LOGO</option>
            <option value="header">HEADER</option>
            <option value="footer">FOOTER</option>
            <option value="watermark">WATERMARK</option>
        </select>
        <span class="text-danger error_image_type" style="display:none;">This field is required.</span>
    </div>

    <!-- Height  -->
    <div class="col-md-6">
        <label for="height" class="form-label">Image Height<span class="text-danger"><b>*</b></span></label>
        <input type="text" class="form-control" id="height" name="height" aria-describedby="inputGroupPrepend" placeholder="Enter Height" required value="250">
        <span class="text-danger error_height" style="display:none;">This field is required.</span>
    </div>
    <!-- Width  -->
    <div class="col-md-6">
        <label for="width" class="form-label">Image Width<span class="text-danger"><b>*</b></span></label>
        <input type="text" class="form-control" id="width" name="width" aria-describedby="inputGroupPrepend" placeholder="Enter Width" required value="250">
        <span class="text-danger error_width" style="display:none;">This field is required.</span>
    </div>
    <div class="col-md-12">
        <div>
            <label for="margin" class="form-label">Margin <span class="text-danger"><b>*</b></span></label>
        </div>
        <div class="input-group">
            <input type="number" id="top_margin" name="top_margin" class="form-control" placeholder="Top Margin" maxlength="4">
            <input type="number" id="left_margin" name="left_margin" class="form-control" placeholder="Left Margin">
            <input type="number" id="right_margin" name="right_margin" class="form-control" placeholder="Right Margin">
            <input type="number" id="bottom_margin" name="bottom_margin" class="form-control" placeholder="Bottom Margin">
        </div>
        <div class="d-flex justify-content-around">
            <div>Top Margin</div>
            <div>Left Margin</div>
            <div>Right Margin</div>
            <div>Bottom Margin</div>
        </div>
        <span class="text-danger error_margin" style="display:none;">The field is required.</span>
    </div>
    <div class="col-md-12">
        <div>
            <label for="padding" class="form-label">Padding</span></label>
        </div>
        <div class="input-group">
            <input type="number" id="top_padding" name="top_padding" class="form-control" placeholder="Top Padding" maxlength="4">
            <input type="number" id="left_padding" name="left_padding" class="form-control" placeholder="Left Padding">
            <input type="number" id="right_padding" name="right_padding" class="form-control" placeholder="Right Padding">
            <input type="number" id="bottom_padding" name="bottom_padding" class="form-control" placeholder="Bottom Padding">
        </div>
        <div class="d-flex justify-content-around">
            <div>Top Padding</div>
            <div>Left Padding</div>
            <div>Right Padding</div>
            <div>Bottom Padding</div>
        </div>
        <span class="text-danger error_padding" style="display:none;">The field is required.</span>
    </div>
    {{-- <!-- Alignment  -->
    <div class="col-md-6">
        <label for="alignment" class="form-label">Alignment<span class="text-danger"><b>*</b></span></label>
        <input type="text" class="form-control" id="alignment" name="alignment" aria-describedby="inputGroupPrepend" placeholder="Enter Alignment" required>
        <span class="text-danger error_alignment" style="display:none;">This field is required.</span>
    </div> --}}
    <!-- Alignment -->
    <div class="col-md-6">
        <label for="alignment" class="form-label">Alignment <span class="text-danger"><b>*</b></span></label>
        <select class="form-select" aria-label="alignment" name="alignment">
            <option selected value="">Select Alignment</option>
            <option value="left">Left</option>
            <option value="center">Center</option>
            <option value="right">Right</option>
            <option value="justify">Justify</option>
        </select>
        <span class="text-danger error_alignment" style="display:none;">This field is required.</span>
    </div>
    <!-- Priority  -->
    <div class="col-md-6">
        <label for="priority" class="form-label">Priority <span class="text-danger"><b>*</b></span></label>
        <input type="number" class="form-control" name="priority" aria-describedby="inputGroupPrepend" required value="{!! $priority + 1 !!}">
        <span class="text-danger error_priority" style="display:none;">This field is required.</span>
    </div>


</form>
